elm-webpack-4-starter

Demo

About

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
  • CSS/SCSS
    • PostCSS with Autoprefixer with Autoprefixer support for the latest Browsers (defined in package.json)
    • PurifyCSS to remove unused CSS
    • CSS minification
• 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

Requirements

• Yarn
• Node >= v10.19.0
• Webpack >= 4.0.0
• Elm

Install

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

Serve locally

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

Path based routing

For Path based routing look at this

Build & bundle for production

There are presets related to production. Presets:

• compress: Use WebpackCompressionPlugin
• analyze: 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

Deploying the App

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

Features on Netlify

• Automatic SSL Certificate
• Serves gzipped files from our build ;)
• Continuous deployment on selected Branches with preview

Steps

1. Create an account here
2. Download the CLI $ yarn global add netlify-cli
3. Login $ netlify login and it will open the browser for you to authorize the CLI
4. 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
5. Open the Live URL from the command output
6. Site live and ready.

Continuous Deployment

If you want CD (Continuous Deployment), learn more on how to configure Netlify here

For CD:

1. Run $ netlify open to go to your deployed site configuration
2. Go to Settings -> Build & deploy. Click Link site to Git
3. Link your github/gitlab account and choose your repo
4. Choose your branch for CD
5. Leave Basic build settings as it is (we have the configuration in root netlify.toml)
6. Click Deploy site

Contributing

PR's welcome :)

Notes

• 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 file src/assets/js/vendor.js.