Elm Calculator Part 11 - Netlify Deployment
Tags: elm, webdev, beginners, codenewbie
Published: 2020-06-22 15:39:25

---
title: Elm Calculator Part 11 - Netlify Deployment
published: true
date: 2020-05-22 00:00:00 UTC
tags: elm, webdev, beginners, codenewbie 
canonical_url: https://pianomanfrazier.com/post/elm-calculator-book/11-deployment/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/u26mai0h3j5xcrz6tbis.png
series: Elm Calculator
---

_This post is part of a series. To see all published posts in the series see the tag ["elm calculator book"](https://pianomanfrazier.com/tags/elm-calculator-book/).If you wish to support my work you can purchase the book on [gumroad](https://gum.co/NwMtt)._

**This project uses Elm version 0.19**

- Part 1 - Introduction 
- Part 2 - Project Setup 
- Part 3 - Add CSS 
- Part 4 - Basic Operations 
- Part 5 - Adding Decimal Support 
- Part 6 - Supporting Negative Numbers 
- Part 7 - Add Dirty State 
- Part 8 - Support Keypad Input 
- Part 9 - Combination Key Input 
- Part 10 - Testing 
- **_Part 11 - Netlify Deployment (this post)_**

* * *

- **_browse:_** [https://gitlab.com/pianomanfrazier/elm-calculator/-/tree/master](https://gitlab.com/pianomanfrazier/elm-calculator/-/tree/master)
- **_diff:_** [https://gitlab.com/pianomanfrazier/elm-calculator/-/commit/e2b92f39f910329dc7b882be9ac2b82b44a09f00](https://gitlab.com/pianomanfrazier/elm-calculator/-/commit/e2b92f39f910329dc7b882be9ac2b82b44a09f00)

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](https://pianomanfrazier.com/img/elm-calculator/netlify-dashboard.png)

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](https://pianomanfrazier.com/img/elm-calculator/netlify-choose-git-provider.png)

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](https://pianomanfrazier.com/img/elm-calculator/netlify-choose-repo.png)

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](https://pianomanfrazier.com/img/elm-calculator/netlify-define-build.png)

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](https://pianomanfrazier.com/img/elm-calculator/netlify-deployed.png)

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](https://elm-calculator.netlify.com).

![Change Netlify sub domain name](https://pianomanfrazier.com/img/elm-calculator/netlify-change-name.png)

## 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.