Elm prototype for firestorm
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
scripts
src
tests
.gitignore
README.md
build.sh
elm-package.json
package.json
publish.sh
yarn.lock

README.md

Firestorm Elm

An Elm client for the Firestorm Forum, written in Elm by DailyDrip.

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.

Using

Dependencies

  • 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

Running

yarn start

Build

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>

Installing JavaScript packages

To use JavaScript packages from npm, you'll need to add a 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');

Available scripts

In the project directory you can run:

elm-app build

Builds the app for production to the dist folder.

The build is minified, and the filenames include the hashes. Your app is ready to be deployed!

elm-app start

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.

elm-app test

Run tests with node-test-runner

You can make test runner watch project files by running:

elm-app test --watch

package

Alias for elm-package

Use it for installing Elm packages from package.elm-lang.org

repl

Alias for elm-repl

make

Alias for elm-make

reactor

Alias for elm-reactor

Adding Images and Fonts

With Webpack, using static assets like images and fonts works similarly to CSS.

By requiring an image in JavaScript code, you tell Webpack to add a file to the build of your application. The variable will contain a unique path to the said file.

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.