I'm a creator, product manager and programmer based in London

Writing

Writings and musings about history, technology, development and anything else that seems interesting.

Creating and Hosting a Static Angular Site on Netlify

In recent posts I've been walking through the steps I've taken to convert some of my apps and websites to a serverless model to reduce hosting costs using Azure Blob Storage and Azure Functions. After reading about Netlify's recent funding round I decided to try hosting an Angular site using their service to see what the fuss was about; I wasn't disappointed.

Netlify are aiming to change the way developers build, deploy and host their sites and web applications by completely removing the need to think about, or deal with, servers. They began by focusing on hosting for static sites or Single Page Applications (SPAs) but have since expanded with built-in support for AWS Lambda functions and form submission for static sites (just through adding some tags in html - magic). The best part of all of this is that for sole developers it's a free service to use.

Below I've covered how to create an Angular project, build it, run the site on Netlify and set up continuous deployment. I’ve also included some Angular/Netlify gotcha's I had to work out how to solve. Given I've spent most of my time building for backend or mobile, web development has always been a bit of a blind spot for me so this was quite a learning experience:

Creating the Angular Project

Angular has been around a number of years now so there are some fantastic tutorials which can help you get going. I used this one: https://www.creativebloq.com/how-to/how-to-build-a-full-page-website-in-angular. It's rather lengthy and split over a couple of pages so I've distilled the key parts about creating, running and building the project below (all done through the command-line in VS Code):

1. Install Angular

npm install -g @angular/cli

2. Navigate to your desired directory and create an Angular site. Select if you want to use Angular routing and if you'll be using a CSS Framework like LESS or SASS.

ng new your-project-name

3. After your site has been created and all relevant packages have been installed you can run it with this command:

ng serve

Your site running on localhost

Your site running on localhost

4. To build, run the command below. Using the prod parameter will build the site in production mode and causes the environment.ts file to be swapped with an environment.prod.ts file (explained below):

ng build --prod

After this command has completed, you'll be able to see a dist (distribution) folder has been created in which you'll find another folder for your project; the files inside this are what we need to upload to Netlify.

Uploading to Netlify Manually

After preparing the files and creating a Netlify account getting the site online is wonderfully easy. Simply drag the distribution folder into the upload section marked on the home page.

Drag and drop your build files into the bottom section

Drag and drop your build files into the bottom section

In my case the site was live in under a minute!

Setting Up Build and Continuous Deployment in Netlify

Manually uploading the files using the web interface works seamlessly but having to perform this process every time you made a change would soon become tedious. Instead, Netlify can automatically connect to your GitHub repository, build the Angular project and deploy the site every time a new commit is added to a particular branch.

1. Create a new site or set up your existing one by selecting GitHub as the source and you'll be walked through the process of allowing access to your repository:

Create a new Netlify site.

2. Input the build command we used to build the project locally and the folder where the build is outputted (in this case dist/your-project-name) into the Netlify site:

Configuring the Netlify build settings

3. Trigger a deployment by pushing a new commit and you'll be able to watch your project build and go live automatically. You can even set up A/B testing by configuring two different branches which Netlify will deploy and split traffic between!

Netlify’s build page.

As mentioned, I encountered a few stumbling blocks getting my site working but these probably aren't uncommon scenarios so I’ve added them here:

Using Environment Variables

Netlify allows you to connect any number of sites to a repository. While you could connect them to the same branch (in the case of having multiple projects per repository) it's more likely you would want to connect them to two different branches so you can check changes before they go live. This is easy to do but if you'd like one of your sites to use a different API endpoint, for example, you'll need to configure the Angular project to replace these variables when presented with a particular build command.

When you created your Angular site you'll notice that an environment.ts file was created. In this file we can add settings which will be overridden and, in this example, will point the site to a different API endpoint, depending on if we build for dev or production:

environment.ts

export const environment = {
  production: false,
  api: 'https://dev.api.com/api/v1/'
};

environment.prod.ts

export const environment = {
  production: true,
  api: 'https://live.api.com/api/v1/'
};
VS Code showing Angular environment files.

1. To add a custom mode with different settings, for a staging environment for example, we need to a new file as above called environment.staging.ts and then add a new section to the angular.json file’s configurations section:

"configurations": {
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }

2. Whenever you want to use your variable, use it like this:

import { environment } from './../environments/environment';
var url = `${environment.api}`;

3. To build the site using a certain configuration it's just a case of providing a parameter with the build command:

ng build --configuration=staging

Building a Project that's not in the Repo Root

If the project you’d like Netlify to build isn't at the root level of the repository then you'll also need to add a netlify.toml file to point to the project location:

[build]
  # Directory to change to before starting a build. 
  # This is where we will look for package.json/.nvmrc/etc.
  base = "SubFolder/some-subfolder-containing-project/"

Preventing 404's whilst using your Single Page Application

If you implement multiple pages in your Angular application then you'll notice that some browsers will throw Not Found exceptions for pages despite them being served ok by your application. Luckily Netlify allows you to create a _redirects file which allows you to divert all traffic to your application root which removes the exceptions:

/*    /index.html   200

I'm really blown away by Netlify and still can't believe how easy it was compared to other continuous deployment tools I've configured to build and deploy Angular projects. With free SSL, custom domains and many more features I haven't even begun to look at yet, I think it might be the perfect tool for any indie developers wanting to reduce costs and spend their time focusing on building a great product. I'm excited to see what Netlify are going to come out with next!