cambricorp / elm-phoenix-example

minimum elm + phoenix setup, with webpack

Elm + Phoenix

This is a minimum setup for an Elm + Phoenix project, using webpack for bundling.

This is intended to be a teaching tool rather than a production boilerplate, therefore the webpack config is as small as possible, and there is only very basic Phoenix usage.

The Phoenix application has been named Foo to make it easy to identify where your application name is used.

REQUIREMENTS

• Elixir/Mix/Phoenix (Installation guide)
• Node.js/npm (Install using nvm)
• Elm ($ npm install --global elm)
• A PostgreSQL server running on your machine.

FEATURES

BACKEND:
Basically just $ mix phx.new foo --no-brunch, with changes made to ./lib/foo/web/templates/layout/app.html.eex and ./lib/foo/web/templates/page/index.html.eex to load up the Elm app.
FRONTEND:
All related files are found in ./assets, including package.json, elm-package.json and webpack.config.js. Therefore npm install and elm-package install will have to be run from there.
SCRIPTS:
As a convenience due to the location of package.json, I have added a custom mix task (./lib/mix/npm.ex) which allows the execution of npm run scripts from the project root using mix: mix npm build, mix npm watch, etc.

USAGE

INITIAL SETUP:

• $ cd assets
• $ npm install (Gets npm dependencies)
• $ elm-package install (Gets Elm dependencies)
• $ cd ..
• $ mix deps.get (Gets Phoenix dependencies)
• $ mix ecto.create (Sets up database)

TO RUN:

• $ mix npm build or $ mix npm watch
• $ mix phx.server
• Visit http://localhost:4000.