# Deploying an Angular App to Netlify

[Netlify](https://www.netlify.com/) is one of the best places to deploy an application or a website today. There is no need to manage a server, NGINX, certificates, or scaling due to high traffic. &#x20;

> Netlify is great for deploying JavaScript applications like Angular, React, and Vue.

![](https://scotch-res.cloudinary.com/image/upload/dpr_1,w_800,q_auto:good,f_auto/v1559841467/bf1wuugrkpk4pvae4ev4.png)



## Requirements

* An angular app that will build when you run `ng build --prod` successfully.
* That same angular app needs to be up on github to connect to Netlify
* [Create a Netlify Account](https://www.netlify.com/)

## Configure Netlify

The next step after creating an account is to setup Netlify to build and deploy our application. We'll first connect our new GitHub repository to Netlify and choose the build options. After we've done that, Netlify will build and deploy our application.

&#x20;Let's go to [app.netlify.com](https://app.netlify.com/) to get started.

> If you haven't signed up for Netlify yet, go through the steps to create an account. It's free, and you can sign up easily with your GitHub account.

### **Creating a New Netlify Site**

After logging in, we can click on the "New site from Git" button on the page. Clicking on that gives us the following screen:

![](https://scotch-res.cloudinary.com/image/upload/dpr_1,w_800,q_auto:good,f_auto/v1559841547/slmraswgvse4kzbykmvh.png)

Select GitHub, and then search for your new Angular repository.

### **Choosing the GitHub branch**

To deploy to Netlify, we can specify a couple things:

* The branch in GitHub to use for our site
* The commands to run to build our application

Select the project, my-ng-netlify-project, and we'll see this screen:

![](https://scotch-res.cloudinary.com/image/upload/dpr_1,w_800,q_auto:good,f_auto/v1559841553/eijpwhewl2sz0xs3rjvh.png)

Netlify lets you select the team (if you're part of more than one) and which branch should be used for the builds. Then we can enter the build command (`ng build —prod` in this case) and then give

Netlify the folder where the built project is located. By default in Angular 7+, the project is built into the `dist/project-name` folder; in our case it's `dist/my-ng-netlify-project`.

> We can double check where the project will be located by building it on our local machine using the ng build --prod command. Then we can open the folder in Finder or File Explorer and look in the dist folder.

Once we've filled out the form and clicked on Deploy site, we go to the project details page. At the top of the page, we'll see this title block:

![](https://scotch-res.cloudinary.com/image/upload/dpr_1,w_800,q_auto:good,f_auto/v1559841559/gw026w4tpow88ut3ow5i.png)

The "angry-stonebraker-390db1" is an automatically generated site ID. It can be changed, however, and we'll look at that later. When the build is done, we can view the site at [angry-stonebraker-390db1.netlify.com](http://angry-stonebraker-390db1.netlify.com/).

> Replace "angry-stonebraker-390db1" with whatever Netlify provided for you.

### **Routing Catchall**

Now that we're on the site, we can see that we start on the home page and click back and forth between the home link and the about link. Pretty great, huh? That was a relatively easy way to get our Angular application deployed.

We have one last thing to figure out though. Go to the about page and refresh the browser page. This is what you see:

![](https://scotch-res.cloudinary.com/image/upload/dpr_1,w_800,q_auto:good,f_auto/v1559841565/pbohntl6gg1mqusy5fmu.png)

We will need to use Netlify's redirect engine so that the `index.html` file is always returned. This is because the `/about` route is not on the server, it's a client side route. Luckily, Netlify has a way for us to do this.

Let's go back to our Angular project and add a new file to the `src` directory: `_redirects`. In that file, we'll add the following:

```
/*    /index.html    200
```

We also need to edit the `angular.json` file so that this `_redirects` file is included in the build. We can add it to the `assets` array next to the favicon and the `src/assets` folder. After making these two changes, we can commit our files and push them to the repo. When we do that, Netlify will build and deploy the changes automatically.

Now when we go back to our application and go to the /about route and refresh the browser tab, we don't get a page not found error but instead see our About page.

{% hint style="success" %}
Success, your app is deployed on the internet for all to see!
{% endhint %}
