👉 I gave a talk to explain the principles I used to build this. I highly recommend watching it!

Elm codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

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.

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 http-server.

This is a two-step process. First we compile elm.js using 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 --mangle.

It's necessary to run Uglify twice if you use the pure_funcs flag, because if you enable both --compress and --mangle at the same time, the pure_funcs argument will have no effect; Uglify will mangle the names first and then not recognize them when it encounters those functions later.