Product Promotion
0x5a.live
for different kinds of informations and explorations.
GitHub - ronanyeah/elm-phoenix-example: minimum elm + phoenix setup, with webpack
minimum elm + phoenix setup, with webpack. Contribute to ronanyeah/elm-phoenix-example development by creating an account on GitHub.
Visit SiteGitHub - ronanyeah/elm-phoenix-example: minimum elm + phoenix setup, with webpack
minimum elm + phoenix setup, with webpack. Contribute to ronanyeah/elm-phoenix-example development by creating an account on GitHub.
Powered by 0x5a.live ๐
WARNING: I haven't been paying much attention to Phoenix lately so this repo is likely to be out of date.
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.
Elm Resources
are all listed below.
Made with โค๏ธ
to provide different kinds of informations and resources.