SimonLab
commented
4 years ago Add new Elm project to Phoenix
- Make sure you have Elm installed: https://guide.elm-lang.org/install/
- Create a new elm project in the assert folder
cd assets & elm init
We should now have a elm.json file and a src folder in assets where our Elm code will be added
Compile Elm to js using Webpack
Phoenix is already using Webpack to create one javascript containing all the code imported in assets/js/app.js
- Learn about the Webpack concepts https://webpack.js.org/concepts/
- entry: which file to start the bundling from (ie assets/js/app.js)
- output: where to save the bundle (for phx priv/static/js/app.js)
- loader: tool used to compile file.
There is a specific webpack loader for Elm: https://github.com/elm-community/elm-webpack-loader that we can use in our Phoenix project to compile and bundle the Elm application
-
install the Elm loader. Make sure you are still on the assets folder as it is where the
package.jsonis defined and install elm-webpack-loader with npm:cd /assets npm install --save-dev elm-webpack-loader -
add a new rule in
/assets/webpack.config.jsto use the elm loader to bundle the .elm files:
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
use: {
loader: 'elm-webpack-loader',
options: {
optimize: true
}
}Create the Elm application
To test that Elm is working well with Phoenix and webpack we can create a simple application:
- Create a
Main.elmfile in `assets/src with the following code:module Main exposing (main) import Html exposing (text)
main = text "This is Elm text!"
- Import the Elm application in `/assets/js/app.js`:
```js
// import Elm application
import { Elm } from "../src/Main.elm";
var app = Elm.Main.init({
node: document.getElementById('elm-app')
})-
Create the div html node where the Elm application will be added, for example in
lib/app_web/templates/layout/app.html.eexwe can add in the body:<div id="elm-app"></div> <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script -
You can now run the Phoenix application with
mix phx.serverand you should be able to see "This is Elm text!". -
You can add changes to the Elm code, Phoenix will automatically detect the modificaiton in app.js and reload the page
nelsonic
How much use is a "keep track of all the things" App that doesn't work offline?
We hypothesize that an App meant to help people capture everything on their mind and get stuff done must work offline.
With this in mind, we need to do a Spike1 to explore using Elm for a Progressive Web App (PWA).
Objectives
textareasignal_wifi_offin UI to inform the user they're offline.itemwhen offline.new itemwhile offlineTodo
Practical Elm Book: https://korban.net/elm/bookThe PWA does not have to use Elm UI, but it would be a good "bonus level" to attempt to use it. See: https://github.com/dwyl/learn-elm/issues/145
We have collected a few useful links on Elm PWAs https://github.com/dwyl/learn-elm/issues/54 including a complete application: https://github.com/rl-king/elm-hnpwa We should be able to get started quite quickly by combining the work done in our dwyl/app-mvp-phoenix with this https://github.com/opvasger/elm-pwa by following this guide: https://github.com/dwyl/learn-elm/issues/54#issuecomment-558550433
Constraints
1https://en.wikipedia.org/wiki/Spike_(software_development)