Deploying an Angular app on Netlify
Tags: angular, netlify, firstpost, deployment
Published: 2021-01-29 05:35:01

Hello Guys, this is my first ever post in the DEV community. In this post I am going to explain how to deploy an angular application on Netlify.

**What is Netlify**

As per the docs

*Netlify is an all-in-one platform for automating modern web projects. Replace your hosting infrastructure, continuous integration, and deployment pipeline with a single workflow. Integrate dynamic functionality like serverless functions, user authentication, and form handling as your projects grow.*

But for me netlify is a platform, which can deploy and host web apps.

**Create an Angular app from the CLI**

Browse to your required directory and run the following commands to create an angular app
```
ng new angular-netlify
ng serve
```

The first command is to create an angular app in your directory and the second command will make sure your app is up and running in the localhost.

You can view your angular app in the browser at http://localhost/4200 address

**Changes to Angular app to deploy on Netlify**

1. Create a file named **_redirects** in the *src* folder and insert the below line. 
```
/*  /index.html 200
```

More about the [_redirects](https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/#:~:text=The%20_redirects%20file%20The%20most%20common%20strategy%20to,a%20folder%20called%20build/%20,%20or%20public/%20.)

2. In the **angular.json** file goto *projects.architect.build.options.assets* and add the following 
```
{
                "glob": "_redirects",
                "input": "src",
                "output": "/"
 }
```


**Deploy app into Netlify** 

First of all, you need an account with Netlify. If you don't have it please use this [Netlify Signup](https://app.netlify.com/)

We can deploy our app either by uploading the files or by connecting git repository to the Netlify account. I prefer connecting git repo with netlify, because it has certain advantages which, we will discuss in the later posts.

*Connecting git repo to netlify*

After successful signup and login to netlify account, you will see a dash board which looks similar to this
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5rozgftkpiduorrw4t9f.PNG)

Click in the *New site from Git*. A new screen will pop-up asking you login through Github/Gitlab/Bitbucket. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b332aviowthhbun01lzc.PNG)

After successful login you have to *Authorize* netlify on behalf of yourself to access the repo's. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nc9yu63bwqg0xk4vtyxj.PNG)

Next, select corresponding repo and proceed through next steps, where you will need to configure the build settings.

Make sure, you have selected proper branch, where the code is located.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jq8cnnmku234af1ix68a.PNG)

And also make sure, the publish directory to dist/[your app name], in my case it is as shown in the below pic.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5velxeyc1klcvmgkk52m.PNG)

Now, you are good to **HIT** the deploy site button. It will take a few minutes to deploy your app and it will give you an URL, from where you can access your deployed app.


**Next**
We will add Authentication using Firebase in the next post.