Setup an Elm project

This is how I setup a new Elm project for development.

Create a repository.

For a Github Pages app, go to Settings > Pages, change Source to Branch: main and directory to /docs.

Clone the repository:

git clone ssh://git@github.com/explodinglabs/myapp-frontend
cd myapp-frontend

Install Elm.

Initialize a project:

elm init

Create a Caddyfile like:

caddy/Caddyfile

# This is the frontend's Caddyfile, which serves frontend files, and proxies
# requests to the backend.

:80, :443

file_server
root * /usr/share/caddy

@proxy path /rest/* /rpc/* /upload/*
handle @proxy {
  reverse_proxy http://caddy:80
}

handle {
  try_files {path} /index.html
}

Start Caddy:

docker run -d --name sku-frontend -p 8001:80 -v $PWD/site:/usr/share/caddy caddy:2

Create App

mkdir src site

Add site/{index.html,index.css}.

Create a src/Main.elm.

elm make src/Main.elm --output site/elm.js

To build for prod:

node_modules/.bin/uglifyjs static/elm.js --compress 'pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe' | ./node_modules/.bin/uglifyjs --mangle --output static/elm.js

Dev Tools

Update global npm:

npm update -g npm

Install dev packages:

npm install --save-dev elm-format elm-review

node_modules/.bin/elm-review --template jfmengels/elm-review-unused/example

Pre-commit

Add to package.json:

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.elm": [
      "elm-format --validate",
      "elm-review"
    ]
  }
}

Copy index.html from another project into static/.

Bring up the development container: http://localhost/