Deploying an Angular App to Netlify
Last updated
Last updated
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.
Netlify is great for deploying JavaScript applications like Angular, React, and Vue.
An angular app that will build when you run ng build --prod successfully.
That same angular app needs to be up on github to connect to Netlify
The next step after creating an account 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.
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.
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.
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: _redirects. In that file, we'll add the following:
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.
Success, your app is deployed on the internet for all to see!
