Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guzart/neutrino-preset-elm
Neutrino preset that support building Elm applications.
https://github.com/guzart/neutrino-preset-elm
elm neutrino
Last synced: about 2 months ago
JSON representation
Neutrino preset that support building Elm applications.
- Host: GitHub
- URL: https://github.com/guzart/neutrino-preset-elm
- Owner: guzart
- License: mit
- Created: 2017-03-25T22:42:10.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-10T00:59:55.000Z (over 6 years ago)
- Last Synced: 2024-10-25T14:47:45.914Z (2 months ago)
- Topics: elm, neutrino
- Language: JavaScript
- Size: 235 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Neutrino elm Preset
[](https://travis-ci.org/guzart/neutrino-preset-elm)
[](https://badge.fury.io/js/neutrino-preset-elm)
## 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
```bash
❯ yarn add --dev neutrino neutrino-preset-elm
```
#### npm
```bash
❯ npm install --save-dev neutrino neutrino-preset-elm
```
## Project Layout
`neutrino-preset-elm` follows the standard [project layout](https://neutrino.js.org/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.
```bash
❯ 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:
```javascript
// src/index.js
const Elm = require('./Main.elm');
const mountNode = document.getElementById('root');
const app = Elm.Main.embed(mountNode);
```
Install the elm html packages.
```bash
❯ 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.
```json
{
"source-directories": [
"src"
]
}
```
Add your elm application entry point to the `src` directory.
```bash
❯ touch src/Main.elm
```
```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:
```json
{
"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
```bash
❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed
```
#### npm
```bash
❯ npm start
✔ Development server running on: http://localhost:5000
✔ Build completed
```
## Configuration
Add a `.neutrinorc.js` file to the root of your project
```javascript
// .neutrinorc.js
module.exports = {
use: [
['neutrino-preset-elm', {
presetWeb: {},
debug: true,
}],
],
}
```
Update your package.json file
```json
{
"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.