A Webpack 4 setup for writing Elm apps:
- Webpack optimized Elm production code with TerserJS Here
- Webpack dev server with Elm Hot Loader.
- Webpack dashboard to have more info about the dev-server
- Elm Analyse. Tool to identify Elm code deficiencies and best practices
- Support assets
- Images
- Automatic Compression of images copied by
copy-webpack-plugin
- Automatic Compression of images copied by
- CSS/SCSS
- PostCSS with Autoprefixer with Autoprefixer support for the latest Browsers (defined in
package.json
) - PurifyCSS to remove unused CSS
- CSS minification
- PostCSS with Autoprefixer with Autoprefixer support for the latest Browsers (defined in
- Images
- Bootstrap 4 (Sass version)
- Bundling and minification for deployment with compressed version of assets (gzip)
- Examples (examples/)
- Hello world
- Counter
- App scaffold using Richard Feldman RealWorld example app
- Webpack bundle analyzer to visualize the outputted files
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
- Access app at
http://localhost:8080/
- Get coding! The entry point file is
src/elm/Main.elm
- Browser will refresh automatically on any file changes, including css
- Elm app is going to preserve the state on each refresh
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 WebpackBundleAnalyzer
yarn 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.
- Files are saved into the
/dist
folder - To check it, open
dist/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
- Automatic SSL Certificate
- Serves gzipped files from our build ;)
- Continuous deployment on selected Branches with preview
- Create an account here
- Download the CLI
$ yarn global add netlify-cli
- Login
$ netlify login
and it will open the browser for you to authorize the CLI - Deploy your site with
$ netlify deploy --prod
- Choose
Create & configure new site
- Choose a site name or leave it blank for random name
- Choose your account
- Choose
- Open the
Live URL
from the command output - Site live and ready.
If you want CD (Continuous Deployment), learn more on how to configure Netlify here
For CD:
- Run
$ netlify open
to go to your deployed site configuration - Go to Settings -> Build & deploy. Click
Link site to Git
- Link your github/gitlab account and choose your repo
- Choose your branch for CD
- Leave
Basic build settings
as it is (we have the configuration in rootnetlify.toml
) - Click
Deploy site
PR's welcome :)
- This webpack template was heavily inspired in the Elm Community elm-webpack-starter.
- The webpack build-utils and preset pattern was taken from the FrontendMasters course Webpack fundamentals.
- If Bootstrap JS not needed, delete it from the webpack entry in
webpack.config.js
and also delete the filesrc/assets/js/vendor.js
.