Jamstack Explorers

Angular in the Jamstack with Tara Z. Manicsic

Connecting Angular to Netlify

It's time to make our site live! We'll walk through the steps to host our Angular site on Netlify so it can be served using a CDN (Content Delivery Network) and be a part of our git workflow.


Hey explorer, the time has come to make our site live by hosting it on Netlify and pushing it to the CDN. First, we'll go ahead and make a configuration file, Netlify.toml. Inside of this file, we're basically going to set up some basic commands so Netlify knows what to do with our project. First, we'll say, "Hey, this is what you're going to do on build." The published directory is where your project lives, for Angular that's the disc and then the project name. Next, we want to say how to build our project. Again for Angular, this would be NG build and we'll say dash dash prod for production and that's all we need in there right now. Now we can head back to the terminal and, following our Git workflow, add that new file we created and push it up to our repository.

The next step is to install the Netlify CLI globally. This way we can run the Netlify commands on any of our projects. We do this by NPM installing Netlify dash CLI dash G for global. Now we can use Netlify and knit to initialize our project with our Netlify account. We'll go ahead and configure a new site under my team. We'll give it a name, Angular explorer and now we have a site ready. We just need to confirm that build command of NG build dash dash prod and tell it where our project lives in disk and the project name Angular explorer.

Now we can actually use NTL the short one for Netlify and say, NTL open to open the dashboard on Netlify.com. You'll see here, we have our project dashboard. Under project deploys you can actually look at a deploy log to see everything that's coming out as your project builds on Netlify. Those build commands they put in, it's running through them, that NG build dash dash prod and you can see all of the output that's coming out here directly in your deploy logs. We have a live site, yay. Now we can go to the front page again and the dashboard and hit the link for a site and see that it's there. To follow our Git workflow, we had one small change. You see this dot Netlify folder is added. We'll add that, we'll push it up, commit it and now we have everything up to speed for our project. Congratulations, your project is now on a CDN, getting to users as fast as possible in the closest node as it can and we have a live Angular Jamstack site.


your progress