Development environment for writing Elm apps.
Based on the amazing work of javascript-development-environment.
- Development Server with hot reloading.
- Optimised bundling and minification for the production.
First let's install dependencies
- If you don't have install node.js.
- Also you will need yarn package manager.
- And of course elm environment.
After that
- Clone this repo in a new project:
git clone https://github.com/grrinchas/dg-elm-starter-kit my-elm-project
- Re-initialise as your own repo:
cd my-elm-project
rm -rf .git # on Windows: rmdir .git /s /q
git init
- Install all
JavaScript
dependencies:
yarn install
- Install all
Elm
dependencies:
elm-package install
Development
- Start development server:
yarn run start
- Then navigate to:
http://localhost:3000
Production
- To bundle files for deployment:
yarn run build
Here are folders and files for development environment.
-- build_scripts/ # Contains scripts related with server
-- build.js # Build files for production
-- devServer.js # Start development server
-- prodServer.js # Start production server
-- config/ # Contains scripts for Webpack configuration
-- webpack.common.js # Common configuration for production and development
-- webpack.dev.js # Development configuration
-- webpack.prod.js # Production configuration
+- docs/ # Output folder for production
+- elm-stuff/ # Elm dependencies
+- node_modules/ # JavaScript dependencies
-- src/ # Folder for source files
-- app/ # Elm application
| -- Main.elm # Entry point of the application
-- index.html # Index file where SPA file be inserted
-- main.js # Entry point for the application
-- main.scss # Entry point for the stylesheets
-- .babelrc # Babel configuration file
-- .editorconfig # Configuration for the editors
-- app.config.js # Mostly contains some paths used by Webpack
-- elm-package.json
-- LICENSE
-- package.json
-- README.md
-- yarn.lock
Here are all the dependencies for development and building. I strongly encourage to read official documentation for each of them.
Dependency | Use |
---|---|
babel-cli | Babel Command line interface |
babel-preset-env | Babel preset for running all the latest standardized JavaScript features |
chalk | For Colorful log messages |
clean-webpack-plugin | Cleans folders before building |
css-loader | Add CSS support to Webpack |
elm-format | Formats elm code |
elm-webpack-loader | Add Elm support to Webpack |
express | Server for development and production builds |
extract-text-webpack-plugin | Extracts CSS into separate file for production build |
file-loader | Adds file loading support to Webpack |
html-webpack-plugin | Inserts bundled files into index.html |
materialize-css | CSS framework based on Google Material Design. |
node-sass | For compiling SASS files |
npm-run-all | Display results of multiple commands on single command line |
opn | Open app in default browser |
sass-loader | Add SASS support for Webpack |
style-loader | Add Style support to Webpack |
uglifyjs-webpack-plugin | Plugin for minimising JavaScript files |
url-loader | Add url loading support to Webpack |
webpack | Bundler with plugin system and integrated development server |
webpack-dev-middleware | Add middleware support to webpack |
webpack-hot-middleware | Add hot reloading to webpack |
webpack-merge | Merge multiple Webpack configurations in one file |
Here are all the dependencies for Example application.
Dependency | Use |
---|---|
elm-lang/core | Core features for the Elm language |
elm-lang/html | Add html support |