This will eventually be a full-featured Elm client for a Phoenix-powered Forum engine.
For now, it's the repo where we're building out the client in screencasts as a means for people to learn more about the Elm programming language.
This project is bootstrapped with Create Elm App.
- Elm version at least 0.18.0.
You can use asdf to help you manage you elm version.
npm nstall elm-github-install -g
npm install create-elm-app -g
Once you have installed the dependencies, you will be able to build the app. To build the app, use [build.sh].
Installing Elm packages
elm-app package install <package-name>
package.json, install the dependencies, and you're ready to go.
npm init -y # Add package.json npm install --save-dev pouchdb-browser # Install library from npm
// Use in your JS code var PouchDB = require('pouchdb-browser'); var db = new PouchDB('mydb');
In the project directory you can run:
Builds the app for production to the
The build is minified, and the filenames include the hashes. Your app is ready to be deployed!
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
Run tests with node-test-runner
You can make test runner watch project files by running:
elm-app test --watch
Alias for elm-package
Use it for installing Elm packages from package.elm-lang.org
Alias for elm-repl
Alias for elm-make
Alias for elm-reactor
Adding Images and Fonts
With Webpack, using static assets like images and fonts works similarly to CSS.
Here is an example:
require('./main.css'); var logoPath = require('./logo.svg'); // Tell Webpack this JS file uses this image var Elm = require('./Main.elm'); var root = document.getElementById('root'); Elm.Main.embed(root, logoPath); // Pass image path as a flag.
Later on, you can use the image path in your view for displaying it in the DOM.
view : Model -> Html Msg view model = div  [ img [ src model.logo ]  , div  [ text model.message ] ]
IDE setup for Hot Module Replacement
Remember to disable safe write if you are using VIM or IntelliJ IDE, such as WebStrom.