guzart / neutrino-preset-elm

Neutrino preset that support building Elm applications.

Neutrino elm Preset

Requirements

• Node.js v6.9+
• Yarn or npm client
• Neutrino v6

Installation

neutrino-preset-elm can be installed via the Yarn or npm clients. Inside your project, make sure neutrino and neutrino-preset-elm are development dependencies.

Yarn

❯ yarn add --dev neutrino neutrino-preset-elm

npm

❯ npm install --save-dev neutrino neutrino-preset-elm

Project Layout

neutrino-preset-elm follows the standard project layout specified by Neutrino. This means that by default all project source code should live in a directory named src in the root of the project. This includes JavaScript files, CSS stylesheets, images, and any other assets that would be available to your compiled project.

Quickstart

After installing Neutrino and the elm preset, add a new directory named src in the root of the project, with a single JS file named index.js in it.

❯ mkdir src && touch src/index.js

This elm preset exposes an element in the page with an ID of root to which you can mount your application. Edit your src/index.js file with the following:

// src/index.js
const Elm = require('./Main.elm');
const mountNode = document.getElementById('root');
const app = Elm.Main.embed(mountNode);

Install the elm html packages.

❯ elm package install elm-lang/html

After doing this there should be a file called elm-package.json in the root of your project. Update the elm-package.json to tell elm to search for dependencies in the src directory.

{
  "source-directories": [
    "src"
  ]
}

Add your elm application entry point to the src directory.

❯ touch  src/Main.elm

-- src/Main.elm
module Main exposing (..)

import Html exposing (Html, div, text, program)

type alias Model =
    String

init : ( Model, Cmd Msg )
init =
    ( "Hello", Cmd.none )

type Msg
    = NoOp

view : Model -> Html Msg
view model =
    div []
        [ text model ]

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

main : Program Never Model Msg
main =
    program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

Now edit your project's package.json to add commands for starting and building the application:

{
  "scripts": {
    "start": "neutrino start --use neutrino-preset-elm",
    "build": "neutrino build --use neutrino-preset-elm"
  }
}

Start the app, then open a browser to the address in the console:

Yarn

❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed

npm

❯ npm start
✔ Development server running on: http://localhost:5000
✔ Build completed

Configuration

Add a .neutrinorc.js file to the root of your project

// .neutrinorc.js
module.exports = {
  use: [
    ['neutrino-preset-elm', {
      presetWeb: {},
      debug: true,
    }],
  ],
}

Update your package.json file

{
  "scripts": {
    "start": "neutrino start",
    "build": "neutrino build"
  }
}

presetWeb

Passes options to neutrino-preset-web. See https://neutrino.js.org/presets/neutrino-preset-web/#preset-options.

debug

Turn on elm debugger during development.