ProductPromotion
Logo

Elm

made by https://0x3d.site

GitHub - rlopzc/elm-webpack-starter: Elm 0.19 webpack 4 starter template to build SPA
Elm 0.19 webpack 4 starter template to build SPA. Contribute to rlopzc/elm-webpack-starter development by creating an account on GitHub.
Visit Site

GitHub - rlopzc/elm-webpack-starter: Elm 0.19 webpack 4 starter template to build SPA

GitHub - rlopzc/elm-webpack-starter: Elm 0.19 webpack 4 starter template to build SPA

elm-webpack-4-starter

Demo

Netlify Status

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

Deploy to Netlify

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.

More Resources
to explore the angular.

mail [email protected] to add your project or resources here ๐Ÿ”ฅ.

Related Articles
to learn about angular.

FAQ's
to learn more about Angular JS.

mail [email protected] to add more queries here ๐Ÿ”.

More Sites
to check out once you're finished browsing here.

0x3d
https://www.0x3d.site/
0x3d is designed for aggregating information.
NodeJS
https://nodejs.0x3d.site/
NodeJS Online Directory
Cross Platform
https://cross-platform.0x3d.site/
Cross Platform Online Directory
Open Source
https://open-source.0x3d.site/
Open Source Online Directory
Analytics
https://analytics.0x3d.site/
Analytics Online Directory
JavaScript
https://javascript.0x3d.site/
JavaScript Online Directory
GoLang
https://golang.0x3d.site/
GoLang Online Directory
Python
https://python.0x3d.site/
Python Online Directory
Swift
https://swift.0x3d.site/
Swift Online Directory
Rust
https://rust.0x3d.site/
Rust Online Directory
Scala
https://scala.0x3d.site/
Scala Online Directory
Ruby
https://ruby.0x3d.site/
Ruby Online Directory
Clojure
https://clojure.0x3d.site/
Clojure Online Directory
Elixir
https://elixir.0x3d.site/
Elixir Online Directory
Elm
https://elm.0x3d.site/
Elm Online Directory
Lua
https://lua.0x3d.site/
Lua Online Directory
C Programming
https://c-programming.0x3d.site/
C Programming Online Directory
C++ Programming
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
R Programming
https://r-programming.0x3d.site/
R Programming Online Directory
Perl
https://perl.0x3d.site/
Perl Online Directory
Java
https://java.0x3d.site/
Java Online Directory
Kotlin
https://kotlin.0x3d.site/
Kotlin Online Directory
PHP
https://php.0x3d.site/
PHP Online Directory
React JS
https://react.0x3d.site/
React JS Online Directory
Angular
https://angular.0x3d.site/
Angular JS Online Directory