Menu
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?
564
https://github.com/elm-community/elm-webpack-starter was my first attempt to graduate beyond elm-reactor + inline styles. It seemed kind of heavy.
I currently use elm-live (https://github.com/tomekwi/elm-live), like so:
$ cat <<——— > index.html
<!doctype html>
<link rel="stylesheet" href="style.css" />
<body>
<div></div>
<script src="elm.js"></script>
<script>Elm.Main.embed(document.querySelector("div"));</script>
</body>
———
$ elm-live Main.elm --output=elm.js --open
Code is in Main.elm and styles are in style.css.
169
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.
40
I found a good solution for those who want quick prototyping in elm-reactor with full CSS but don't want to figure out build tooling or more sophisticated elm CSS packages. You can get started pretty fast using basic elm, elm-html, and css.
This solution uses standard Elm to generate inline styles and Html.node to create a style tag so you can apply a CSS rule to the body of the document.
-- VIEWS
view model =
main_
[ cssMain ]
[
styleTag
, div
[ cssControlPanel ]
[
button
[ cssBtn
, cssBtnGenerate
, onClick GenerateMap
]
[ text "GENERATE MAP" ]
]
-- STYLES
styleTag : Html Msg
styleTag =
let
styles =
"""
body { overflow: hidden; }
"""
in
node "style" [] [ text styles ]
cssMain : Attribute Msg
cssMain =
style
[ ("backgroundColor", "#eee")
, ("position", "relative")
, ("width", "100vw")
, ("height", "100vh")
]
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
