My setup for an Elm application from development to production


Install Elm

It is easy to install elm via this guide Install Elm

After installing elm, now create a folder for your application and run elm init

~/workspace > mkdir elm_project && cd elm_project
~/workspace > elm init

This command will create an elm.json file and an src/ directory:


All the Elm applications start from a single file called Main.elm. Let’s write one. You could try a simple example of a counter application here:


There are many ways to manage our El project. I prefer to use yarn for package manager and parcel for bundler. There is no reason behind that, you could choose another package manager and bundler.

Now, run:

~/workspace/elm_project > yarn init
~/workspace/elm_project > yarn add parcel

You need to add elm. You may also want to add:

~/workspace/elm_project > yarn add elm
~/workspace/elm_project > yarn add elm-hot
~/workspace/elm_project > yarn add elm-test


It is time to learn how to use parcel for hot-loading your development on local and build the Javascript files for production.

You should want to read this one:

In short, you will need to define an index.html file:

<!DOCTYPE html>
<div id="root"></div>
<script type="module" src="index.js"></script>

And an index.js file:

import { Elm } from "./Main.elm";
Elm.Main.init({ node: document.getElementById("root") });

You need this to add @parcel/transformer-elm to bundle the elm code.

Your package.json should look like the below. I changed the source and scripts properties.

  "name": "elm_project",
  "version": "1.0.0",
  "license": "MIT",
  "source": "src/index.html",
  "dependencies": {
    "@parcel/transformer-elm": "^2.4.1",
    "elm": "^0.19.1-5",
    "elm-hot": "^1.1.6",
    "parcel": "^2.4.1"
  "scripts": {
    "start": "parcel",
    "build": "parcel build"

Run yarn start and you could develop elm on http://localhost:1234/

Source control and deployment

You could use GitHub or whatever source control you love. If you use Github, you should add these files to the .gitignore file:


I am deploying my elm application to

I hope the guide could help you to set up your next Elm application smoothly.