Elm Calculator Part 11 - Netlify Deployment

May 22, 2020 ยท 3 minute read

This post is part of a series. To see all published posts in the series see the tag "elm calculator book". If you wish to support my work you can purchase the book on gumroad.

This project uses Elm version 0.19


Netlify makes deploying web apps super easy. You point Netlify to a git repository hosted with GitHub, GitLab, or Bitbucket and netlify will build and deploy your project. We will need to add some things to our project so that Netlify will know how to build and deploy our project.

Add deploy script

The only change we need to add to our project for Netlify is to add a build script. We will add that to the package.json. Anything added to the scripts section in a package.json can be run with npm run <script name>. So in our case we can run npm run build and npm will build our project to a dist folder.

{
    "name": "elm-calculator",
    ...
    "scripts": {
        "build": "<do build stuff here>"
    },
    ...
}

Here is what we need to do to make a build.

mkdir -p dist # make a dist folder if not already there
elm make src/Main.elm --optimize --output=dist/elm.js # make optimized build and output to dist/elm.js
cp index.html dist # copy index.html to build directory
cp style.css dist # copy style.css to build directory

And then we add it to our package.json so we can run it with npm run build.

{
    "name": "elm-calculator",
    ...
    "scripts": {
        "build": "mkdir -p dist && elm make src/Main.elm --optimize --output=dist/elm.js && cp index.html dist && cp style.css dist"
    },
    ...
}

Configure Netlify

Now we need to point Netlify to our git repository.

First you need to register for an account on Netlify. After you can log in to your netlify account you need to go to the dashboard at https//app.netlify.com.

Netlify dashboard

After you click on "New site from Git" you will need to choose you git hosting service. I am hosting this project on GitLab so I will choose that one.

Choose git provider for Netlify

Netlify will ask you to allow permission to access you repositories on the chosen git provider. After you login and give permission you will choose a repository.

Choose git repository for Netlify

Next is the most important step. We tell Netlify what command to run to build our project and with directory to deploy from. The build command needs to be set to npm run build and the publish directory needs to be set to dist. See

Define Netlify build

Click on "deploy site". If all goes well you should see that your build is in queue waiting to be built.

When it is ready you can click on the link provided and see you app live on the internet to share with the world.

App deployed on Netlify

If you want a custom Netlify sub-domain name click on "Site settings". Then click on "Change site name". You can then change the name to something like "elm-calculator". Your project would then be made available at https://elm-calculator.netlify.com.

Change Netlify sub domain name

We're done

Congratulations for making it to the end of this project. I learned a lot putting this together and I hope you learned a lot as well.

Together we build an Elm application from the ground up and deployed it to netlify for all the world to see.