This is an Elm application skeleton for Brunch. It comes setup with Babel, Sass and Bootstrap 4.
You can use it with Brunch to generate a new application or follow the instructions to do it manually.
Clone is repo manually or use brunch new dir -s mathieul/brunch-with-elm-bootstrap
- Install (if you don't have them):
- Run:
brunch watch --server— watches the project with continuous rebuild. This will also launch HTTP server with pushState.brunch build --production— builds minified project for production
- Learn:
- Place Elm files in
app/elm/and JavaScript files inapp/js/. public/dir is fully auto-generated and served by HTTP server. Write your code inapp/dir.- Place static files you want to be copied from
app/assets/topublic/. - Place Sass files in
app/scss/, they will compile topublic/css/. - Brunch site, Getting started guide
- Place Elm files in
You can also start from a brunch ES6 generated application and set it up manually to understand how each component work.
Follow the steps below:
$ brunch new my-app -s es6
$ cd my-app
$ echo "\n# Elm files\nelm-stuff/" >> .gitignore
Let's make sure it all works:
$ brunch watch --server
and open http://localhost:3333 in a new browser window. Open the developer tools
and make sure you see the Initialized app message in the web console.
Let's add Sass and Bootstrap (4.0.0-alpha.2 at the moment of this writing):
$ npm install bootstrap@4.0.0-alpha.2 --save-dev
$ npm install sass-brunch --save-dev
And setup Elm for our new app:
$ npm install elm-brunch --save-dev
$ elm package install elm-lang/html -y
We update the elm-package.json file to list the directory intended to contain our application Elm files as a dependency:
[...]
"source-directories": [
".",
"app/elm"
],
[...]
We replace the content of brunch-config.js to tell Brunch about Elm and Sass:
// brunch-config.js
module.exports = {
files: {
javascripts: {joinTo: 'js/app.js'},
stylesheets: {joinTo: 'css/app.css'}
},
plugins: {
babel: {
presets: ['es2015']
},
elmBrunch: {
mainModules: ['app/elm/Main.elm'],
outputFolder: 'public/js'
},
sass: {
options: {
includePaths: [
'node_modules/bootstrap/scss'
]
}
}
}
}
Now let's add a bit of structure to the project:
$ mkdir app/js app/scss app/elm
$ mv app/initialize.js app/js/
$ echo '@import "bootstrap";' > app/scss/application.scss
And edit index.html to change the files to include:
[...]
<title>Brunch with ES6</title>
<link rel="stylesheet" href="css/app.css" charset="utf-8">
</head>
<body>
<div id="elm-main"></div>
<script src="js/main.js"></script>
<script src="js/app.js"></script>
<script>require('js/initialize');</script>
</body>
</html>
Now we need to initialize our Elm application with:
// app/js/initialize.js
document.addEventListener('DOMContentLoaded', () => {
const elmNode = document.getElementById('elm-main')
Elm.Main.embed(elmNode)
})
and start with a basic Elm application:
-- app/elm/Main.elm
module Main exposing (main)
import Html exposing (div, h1, text)
import Html.Attributes exposing (class)
main =
div [ class "jumbotron" ]
[ h1 []
[ text "Hello Elm 0.18" ]
]
and finally we open http://localhost:3333 in a new browser window. We should see our message rendered by Main.elm.