A Webpack 4 setup for writing Elm apps:
copy-webpack-plugin
package.json
)Clone this repo into a new project folder, e.g. my-elm-project
:
git clone https://github.com/romariolopezc/elm-webpack-4-starter my-elm-project
cd my-elm-project
Re-initialize the project folder as your own repo:
rm -rf .git
git init
git add .
git commit -m 'initial commit'
Install all dependencies using this commands:
yarn install
This does a clean install of all npm packages.
Elm packages are automatically installed by doing yarn dev
or yarn prod
yarn dev
http://localhost:8080/
src/elm/Main.elm
To analyse your elm code, look for deficiencies and apply best practices, use:
yarn elm-analyse
Access the web client at http://localhost:3000
For Path based routing look at this
There are presets related to production. Presets:
compress
: Use WebpackCompressionPluginanalyze
: Use WebpackBundleAnalyzeryarn prod
yarn prod:<preset> # <- This is the pattern for the presets, defined in package.json
yarn prod:compress
yarn prod:analyze
You can add your own presets to test functionality without breaking the working build.
/dist
folderdist/index.html
To deploy our app, we are going to use the free service (for personal use) Netlify
You can automatically deploy this template with this button
$ yarn global add netlify-cli
$ netlify login
and it will open the browser for you to authorize the CLI$ netlify deploy --prod
Create & configure new site
Live URL
from the command outputIf you want CD (Continuous Deployment), learn more on how to configure Netlify here
For CD:
$ netlify open
to go to your deployed site configurationLink site to Git
Basic build settings
as it is (we have the configuration in root netlify.toml
)Deploy site
PR's welcome :)
webpack.config.js
and also delete the file src/assets/js/vendor.js
.