Deploying an Angular app on Netlify

Phani-Devarapu — Fri, 29 Jan 2021 05:35:01 +0000

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

Create a file named _redirects in the src folder and insert the below line.

/*  /index.html 200

More about the _redirects

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

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

Click in the New site from Git. A new screen will pop-up asking you login through Github/Gitlab/Bitbucket.

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

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.

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

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.

DEV Community: Phani-Devarapu

Deploying an Angular app on Netlify