This codebase was created to demonstrate a fully fledged fullstack application built with Elm including CRUD operations, authentication, routing, pagination, and more.
For more information on how this works with other frontends/backends, head over to the RealWorld repo.
How it works
Check out the full writeup!
I decided not to include a build script, since all you need for a development build is the
elm executable, and all you need on top of that for production is Uglify.
Install Elm (e.g. with
npm install --global elm), then from the root project directory, run this:
$ elm make src/Main.elm --output elm.js
If you want to include the time-traveling debugger, add
--debug like so:
$ elm make src/Main.elm --output elm.js --debug
To view the site in a browser, bring up
index.html from any local HTTP server, for example
This is a two-step process. First we compile
elm make with
--optimize, and then we Uglify the result.
$ elm make src/Main.elm --output elm.js --optimize
This generates production-optimized JS that is ready to be minified further using Uglify.
(Make sure you have Uglify installed first, e.g. with
npm install --global uglify-js)
$ uglifyjs elm.js --compress 'pure_funcs="F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9",pure_getters=true,keep_fargs=false,unsafe_comps=true,unsafe=true,passes=2' --output=elm.js && uglifyjs elm.js --mangle --output=elm.js
This one lengthy command (make sure to scroll horizontally to get all of it if you're copy/pasting!) runs
uglifyjs twice - first with
--compress and then again with
It's necessay to run Uglify twice if you use the
pure_funcsflag, because if you enable both
--mangleat the same time, the
pure_funcsargument will have no effect; Uglify will mangle the names first and then not recognize them when it encounters those functions later.