Elm dev environment with hot-loading (i.e. state is retained as you edit your code - Hot Module Reloading, HMR)). I use this daily for my professional work. Like elm-community/elm-webpack-starter but using Webpack 3.
Clone this repo into a new project folder and run install script. (I ignore the errors about missing jquery as it is best not to use the Bootstrap jquery-based components with Elm)
With npm
$ git clone [email protected]:simonh1000/elm-webpack-starter.git new-project
$ cd new-project
<remove .git directory>
$ npm install
$ npm run dev
With yarn
$ git clone [email protected]:simonh1000/elm-webpack-starter.git new-project
$ cd new-project
<remove .git directory>
$ yarn install
$ yarn dev
Open http://localhost:3000 and start modifying the code in /src.
(An example using Routing is provided in the navigation
branch)
Build production assets with:
npm run prod
Just add to src/assets/
and the production build copies them to /dist
If you need to write some Javascript port code, you need to be aware that npm run prod
will fail as the uglifyjs plugin provided with Webpack 3 cannot handle ES6. There are a couple of ways forward
- add babel to transpile to es5 before passing to uglifyjs by modifying the common.module.rules to read:
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['latest']
}
}
}
You will also need to npm install babel.
- Use uglifyjs2/3 (untested) - see https://www.npmjs.com/package/uglifyjs-webpack-plugin
A long time ago this code was forked from https://github.com/fluxxu/elm-hot-loader