Elm Factory

An all-in-one, zero-configuration CLI tool for developing, building, and deploying Elm applications. Don't worry about tooling and just code!

About

Elm is an awesome language. It has a lot of great individual tooling. However, using them all together in some type of workflow can be a bit tedious. On top of that, some of the tools (e.g. elm-reactor) lack some basic features that would make them into more full-fledged developer tools.

This is where Elm Factory comes in. One of the goals of this project was to not deviate too much from the existing elm tooling ecoystem. It is essentially a CLI tool that is a thin wrapper over a few core libraries while exposing additional functionality, and with only a few basic commands:

• init to scaffold new Elm projects
• dev to start up an express server to proxy elm-reactor
• build to create cache-busted and minified production builds

Features

• Custom html templates with elm-reactor
• Stylesheet management via elm-css
• CSS injection with livereload
• Define custom proxy endpoints
• Production mode builds with cache-busting

Getting Started

# Installation

yarn global add elm-factory
npm install -g elm-factory

# Create a new project

elm-factory init my-app && cd my-app

# Start the elm-factory dev server

elm-factory dev --port=3000 --template=index.dev.hbs

# Build the project for production

elm-factory build --output-path=dist --template=index.prod.hbs

Please see the cli usage for a full list of options

Configuration

Project configuration is available through an .elmfactoryrc or .elmfactoryrc.json file:

{
  "main": "src/MyApp.elm",
  "build": {
    "html": "index.prod.hbs"
  },
  "dev": {
    "port": 3000,
    "html": "index.dev.hbs"
  }
}

Please see the configuration page for a full list of options

Underlying Packages

• elm-reactor for on-the-fly compilation
• browser-sync for proxying and livereload
• find-elm-dependencies for dev mode watching
• node-elm-compiler for compiling production builds
• elm-css for managing stylesheets and extracting css assets
• gulp for orchestrating CLI tasks
• postcss for css processing and minification
• uglifyjs for js minification

Contributing

Ideas and code contributions are welcome! In lieu of a styleguide, this project uses prettier, husky, and lint-staged to maintain code style. If you have any questions, just ask.

Related projects

• elm-live
• elm-webpack-loader
• elm-webpack-starter