Deploying an Angular App to Netlify

Celý článek

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.

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

For more information on what you can do with Netlify, check out these other articles of ours.

• Get Started with Netlify

TLDR: 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:

<ul>
        <li><a [routerLink]="['/']">Home</a></li>
        <li><a [routerLink]="['/about']">About</a></li>
</ul>

<router-outlet></router-outlet>

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.

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 git@github.com:pjlamb12/my-ng-netlify-project.git
git push -u origin master

Don't forget to change the git@github.com: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:

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:

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:

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:

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. You can read more about Angular Universal here.

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.