How to deploy an Angular website on Netlify

https://javascript.plainenglish.io/connecting-netlify-forms-to-angular-template-driven-or-reactive-forms-b3f053c5cd56

Introduction

Hi folks!! Today I am going to guide you on how to deploy an Angular Website on Netlify. Netlify is a cloud computing company that offers hosting and serverless backend services for web applications and static websites. Netlify is definitely my favorite way to deploy React and Angular projects because of its ease of use and its free starter bandwidth plan. So, Let’s get started.

Prerequisites

• Angular CLI must be installed
• Git must be installed
• GitHub Account
• Netlify Account
• Optional : Visual Studio Code as IDE

I am going to continue this tutorial, assuming you already have the above-mentioned requirements. If not, please follow the given links and complete them before starting the tutorial.

Create a Angular Project

Open a Command Prompt or Terminal and run the following command to create a new Angular Application through Angular CLI.

ng new my-angular-app

After creating an angular application enter the below command to open the project with visual studio code.

code my-angular-app

Note : If you haven’t install visual studio code ,

cd my-angular-app

Then follow the rest of the commands in your terminal.

Now , in VS code , my project structure looks like below.

To test our application, we can open a terminal in VS code and run the below command.

ng serve

After that we can open the browser and go to http://localhost:4200/ to view our angular application.It must look like this now.

Create a GitHub Repository

Go to your GitHub account and hit the plus icon on the right-top corner. Then click on the New repository option.

Next , give a suitable Repository name and you can give a project description if you need.

I keep the rest as default and click the Create repository button. Note that, here I choose the repository to be public. If you need your repository to be private (which means it is only visible to you) you can proceed with choosing the private option.

Now you will be able to see the following Quick setup options.

Now we have to push our code into GitHub.

When we create an Angular Application using Angular CLI it turns our project directory into a git working directory. There is no need for initializing a git repository using the git init command. If you have any uncommitted changes enter the below commands in the terminal.

git add .
git commit -m '<Put Your Commit Message Here>'

Angular CLI does not create a remote repository for you, it only turns your project folder into a local working repository.

You’ll have to create a remote repository yourself, then, in your local, link it as remote:

git remote add origin <URL to your remote repository>

Then enter the below command to push the code into GitHub.

git push -u origin main

Now, you can see your project in the created GitHub repository.

Connecting GitHub Repository to Netlify

Login to https://app.netlify.com and select Sites option in the top navigation panel.Then select import from Git button.

From the given Git providers select GitHub.Note that we can also use GitLab or BitBucket.But for this tutorial I used GitHub.

If you have not signed into GitHub, it will pop up a sign-in option. After successful sign-in, it will ask for authorization. Click the authorize button to proceed.

After authorization, it will ask for installing Netlify in Github. Just click install and enter the GitHub password for confirmation. Next, we have to select the correct Github repository for connecting with Netlify.

Next we have to enter the site settings. For the Build command put ng build — prod and for the Publish directory put dist/<put your project name here> .Then click Deploy site button.

It will take several minutes to deploy the application.While deploying you will see the following message.

Now our website has deployed on Netlify.

Go to the website link shown in your browser. For me it’s https://determined-kare-ef305a.netlify.app/ .Then you can see the website that you deployed on Netlify.

How can I change the deployed website

If you change the code locally and push the code into your GitHub repository then Site will get redeployed and the change that you have done locally will appear on the deployed website. That’s the advantage of using this method to deploy angular websites on Netlify.

Let’s meet from another tutorial. Happy Coding !!!