Integrate Elm with Phoenix

[SimonLab]

linked to #12

Elm can be used to display and managing the state of the calendar instead of using vanilla js.

• [x] Install elm via Docker
• [x] Initialise Elm calendar module
• [x] Compile and minified elm code

read:

• https://paulfioravanti.com/blog/2018/02/09/connecting-elm-to-phoenix-1-3/

[SimonLab]

(I think now elm is available via npm)

update the Dockerfile to install elm:

...  
  && mix local.rebar --force \
  && wget "https://github.com/elm/compiler/releases/download/0.19.0/binaries-for-linux.tar.gz" \
  && tar xzf binaries-for-linux.tar.gz \
  && mv elm /usr/local/bin/

Run docker-compose build to rebuild the image and install elm Test elm is installed with docker-compose run --rm app elm --version

Phoenix 1.3 is using Brunch to manage assets see https://phoenixframework.org/blog/static-assets Phoenix 1.4 will use Webpack instead of brunch:

To manage/compile the new elm code we need to install and configure elm-brunch:

• install elm-brunch: docker-compose run --rm app npm --prefix ./assets install --save-dev elm-brunch

• update brunch-config.js:

  • add the elm folder to the list of "watched" code

    paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "elm", "vendor"],
    // Where to compile files to
    public: "../priv/static"
    },

  • add new configuration plugin

    elmBrunch: {
    elmFolder: "elm",
    mainModules: ["src/Main.elm"],
    outputFolder: "../js",
    outputFile: "elm.js",
    makeParameters: ["--warn"]
    }

  • do not run babel on js compiled file from elm

    babel: {
    // Do not use ES6 compiler in vendor code and elm compile js
    ignore: [/vendor/, "js/elm.js"]
    },

• Create the assets/elm folder and initialise the application with elm init:

  docker-compose run --rm app /bin/sh -c "cd assets/elm/ && elm init"

Update the owner of the elm folder: sudo chown -R $USER:$USER assets/elm/

Now as soon as you modify the elm code, brunch will compile it to elm.js file

[SimonLab]

Implemented with #40