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.
- Elixir/Mix/Phoenix (Installation guide)
- Node.js/npm (Install using nvm)
- Elm (
$ npm install --global elm) - A PostgreSQL server running on your machine.
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.
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 buildor$ mix npm watch$ mix phx.server- Visit http://localhost:4000.