DEV Community

Cover image for Deploying an Angular app on Netlify
Phani-Devarapu
Phani-Devarapu

Posted on

Deploying an Angular app on Netlify

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

More about the _redirects

  1. In the angular.json file goto projects.architect.build.options.assets and add the following
{
                "glob": "_redirects",
                "input": "src",
                "output": "/"
 }
Enter fullscreen mode Exit fullscreen mode

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
Alt Text

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

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

Alt Text

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

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

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.

Discussion (0)