I'm new to Elm and trying to build a web app with elm-html. I'm having trouble setting up my workflow to develop and see my results quickly.
I've used elm-reactor
to serve and reload my changes but that serves my app from localhost:8000/Foo.elm
which doesn't include any external stylesheets. I have to use inline styles for all my components, which is discouraged by most HTML guidelines. I'd rather use CSS (or a CSS preprocessor).
I can use elm-make
to build to a *.js file and include that in an index.html
that I maintain, but it won't watch changes.
Is it the wrong approach to include CSS files in an Elm project, and if not, how do I maintain stylesheets outside of Elm and still serve my project locally, while watching for changes?
You're probably better off not using elm-reactor for your main development because of those limitations. It is perfectly acceptable to use your own external CSS file and I agree, that's a much better practice than embedding styling in the output html.
I've used gulp and the gulp-elm package to set up a file watching task that compiles all Elm code (as well as SCSS files) on save, and that works wonderfully.
There is a Grunt plug-in for Elm if you're into that.
There is a webpack loader for Elm if you prefer that over gulp or grunt.
There is a young project that offers a Single Page Application generator for Yeoman which bundles together some of the live-reloading tasks. It is very opinionated on some of the decisions it makes, but it's a good reference if you want to get running quickly.