How to Continuously Deploy an Angular 7 App with GitHub and Netlify

Recently I embarked on a personal project.

I was reflecting on all the previous work I had done, and my then-current portfolio, and I wasn’t satisfied with it. This was predominantly because I had thrown it together quickly one weekend using Wix — and as an aspiring front-end developer I knew that as soon as a recruiter or potential employer saw the word Wix on my site, my chances would be scuppered faster than a new JavaScript framework is created (typically that’s around every 2 seconds*).

Anyway, I looked into what my options were when I eventually got around to redeveloping my portfolio. I knew I wanted it to be fast, feel like a single page and allow me to learn a new framework in the process. After looking around for a while, I decided I’d make it using Angular 7.

So, I began my development process in Angular, and I wanted to begin testing the site on different devices to see how it would appear to everyone when it eventually launched. For a period I actually used a service named 000webhost along with FileZilla to manually upload my built Angular site.

As you can imagine though — that became very tiresome very quickly. Every time I made a change, I had to manually rebuild, wait, copy the built files, paste them into FileZilla, and then wait for those files to update. It took an annoyingly long time.

Photo by Lukas Blazek on Unsplash

But one day, I was pointed in a better direction. My colleague Oli and I were having a code review at work, and he told me about a site named Netlify (we pronounce it net-liffy, however we both think that’s probably wrong, but we like it anyway). He said that if I had my code on GitHub I could let Netlify handle the hassle of rebuilding and deploying my code for me. Perfect!

So, I created myself a private repository, moved everything over to GitHub and created a Netlify account.

I clicked to create a new site from Git, and then selected GitHub as my Git Provider. Then, after you authorise Netlify to access your GitHub repos, you can select the repository you want it to continuously deploy.

After that, you can choose the branch you want it to deploy. By default it will be master, but you can choose whichever one you like.

Then you have to specify your build command and publish directory.

Everything was going smoothly up until now, when I ran into a problem with setting up how to actually let Netlify build my application for me. It needed two commands, and for the life of me I could not find those two correct commands on any Google, Stack Overflow or Medium page.

Eventually I tried enough combinations to hit the right couple.

First is the build command. This one is actually quite straightforward and is:

ng build --prod

The second command is for the publish directory. This is where Netlify will go to find the built files and show them to the world. For this command you need to know the name of your project, as shown in the image below:

Your built site will go in the dist folder, and then the name of your project will be there. In this case, my project was named ang-portfolio.

In this example, my publish directory was:

dist/ang-portfolio

So it is just dist/{your-project-name-here}

What your build settings should look like (swap ang-portfolio with your project name)

After that, save your build settings and your site should build successfully!

To be honest, this was super simple, but the actual process of finding the right commands — for whatever reason — took an annoyingly long time and I hope that this article speeds things up a little bit for anyone trying the same thing!

Now, all you have to do is make changes to your site, save, and commit and push using Git, and Netlify will handle all the other legwork for you.

Enjoy!

*at least, it seems like it

A software engineer and UX designer. www.michaeljfordham.com