How to deploy an Angular App to Netlify

How to deploy an Angular App to Netlify

In this tutorial, you'll learn how to deploy an Angular application to Netlify.

Netlify 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. While it is first thought of as a place to deploy your JAMstack site, it can also be used to deploy regular JavaScript applications.

Table of Contents

  • How do we deploy an Angular app to Netlify?
  • Create an Angular Project
  • Create the GitHub Repository
  • Configure Netlify to Build and Deploy Our App
  • Angular Universal
  • Conclusion

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

How to deploy an Angular App to Netlify

How do we deploy an Angular app to Netlify?

  • Create Angular project with Angular CLI
  • Create a GitHub repository
  • Push project to GitHub
  • Set up a Netlify project to point to your GitHub repo
  • Set up Netlify to build and deploy

Let’s take a deeper dive into how we can deploy Angular to Netlify.

Create an Angular Project

Let's start by creating our new Angular project with the Angular CLI. Run the following command in your terminal:

ng new my-ng-netlify-project --routing

After following the prompts, change into the new directory:

cd my-ng-netlify-project

We now have a new Angular project. Add replace the HTML in the app.component.html file with the following:

* Home
* About


We now have a starting page with a navigation list and links to a Home page and an About page as well as the router outlet. Now we'll create the Home component and About component. Run the following command to add the Home component:

ng g c home

In the home.component.html file, add the following HTML:

<h1>My Home Page</h1>

Now run the following command to create the About component:

ng g c about

In the about.component.html file, add the following HTML:

<h1>My About Page</h1>

Let's now register the routes in the app-routing.module.ts file:

const routes: Routes = [
  { path: '', component: HomeComponent }, 
  { path: 'about', component: AboutComponent }
];

We now have our Angular app to a point where we can push it to GitHub. Add and commit all your files. We'll push the project to GitHub in a minute.

git add .
git commit -m "My Netlify Angular project"

Create the GitHub Repository

Let's now go to GitHub and create a new repository.

How to deploy an Angular App to Netlify

Now we'll run the following commands back in our terminal, which will push our Angular project to our newly created GitHub repository:

git remote add origin [email protected]:pjlamb12/my-ng-netlify-project.git
git push -u origin master

Don't forget to change the [email protected]:pjlamb12/my-ng-netlify-project.git to the URL given to you by GitHub

Our project is now in our GitHub repository!

Configure Netlify to Build and Deploy Our App

The next step 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. Let's go to 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:

How to deploy an Angular App to Netlify

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

Choosing the GitHub branch to deploy and build commands

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:

How to deploy an Angular App to Netlify

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:

How to deploy an Angular App to Netlify

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.

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:

Deploying an Angular App to Netlify

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: src/_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.

Angular Universal

The application we built and deployed to Netlify today was not a fully server-side generated JAMstack site. Angular does have a server side rendering option to use, and it's called Angular Universal.

Conclusion

Netlify is a great platform that allows you to easily deploy web sites and web applications.

Because of powerful features like their redirect engine, functions, identity, forms, and other features, you can build an entire dynamic application without the need to develop and maintain a server or server-side application.

So the next time you have an idea for an Angular application, build it and deploy to Netlify. In no time at all you'll have your website live for the world to see.

angular

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica

Angular Workspace: No Application for You!

The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application A nice addition to Angular CLI 7.0.0 was the --create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries. NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see --create-application, you can also use --createApplication. For more detail

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App

Angular Platforms in depth. Part 1. What are Angular Platforms?

The Angular framework was designed to be a platform independent. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices. In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics. Articles: *