Deploying an Angular 6 Application to Netlify

| devops | web |

Netlify is an excellent platform for building, deploying, and managing web applications. It supports automated deployment using GitHub webhooks and also provides some advanced features such as custom domains and HTTPS all for free. Deploying a Static Site to Netlify is a breeze. Although it does support running Angular JS applications, there are a couple gotchas in the deployment process that I had to wrangle together from various blog posts in order to get things to work.

Enable Redirects

The first issue that I ran into was after I deployed my site to Netlify, whenever I would click on an Angular link, I would get a 404 page.

[caption id=“attachment_698” align=“alignnone” width=“640”]Netlify Page Not Found Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.[/caption]

Getting this to work is pretty simple. Ultimately you just need a file called _redirects in the root of your web project. In order to get angular to create this you need to do the following things. This file will send all URL’s to the root of your application which allows the Angular router to kick in and do its thing.

  1. Create a _redirects file in the src directory of your angular project.

    For most basic sites it should look something like this.

    # src/_redirects
    
    /*  /index.html 200
    
  2. Add this file to your angular.json file.

    Your angular.json file serves as a configuration for many different aspects of the angular CLI. In order to get this file into the root of your output directory you must define the file here. A snippet of my file is shown below. Update this configuration file and push all of your changes back up to GitHub.

    {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "flagviz": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
            "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
                "outputPath": "dist/flagviz",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [
                "src/favicon.ico",
                "src/assets",
                "src/_redirects"
    
    ... rest of file 
    

Configure your Netlify Project

Now that you have the redirects file in place. You can set up your project for automatic deployment with GitHub and Netlify.

Once you have logged into Netlify, click on New Site From Git and find the name of your project.

New Site from GitHub

Configure Build Settings

The last step is to configure your build settings.

For Build command you should enter ng build –prod.

For Publish directory you should enter dist/$NAME_OF_YOUR_PROJECT.

Netlify Build Settings

Be sure to replace $NAME_OF_YOUR_PROJECT with the actual name of your project.

Now you can click on Deploy site and once the initial deployment has completed you should see your new angular application running on Netflify with a working routing system.

Thank you for reading! Share your thoughts with me on bluesky, mastodon, or via email.

Check out some more stuff to read down below.

Most popular posts this month

Recent Favorite Blog Posts

This is a collection of the last 8 posts that I bookmarked.

Articles from blogs I follow around the net

MusicBrainz Picard identifies songs from *.mp3 files and automatically fixes metadata

In my first attempt to switch from streaming to move back to listening to *.mp3 files, one of the issues I encountered was organization: how to standardize the metadata of the songs? The solution I was familiar with at the time — manually editing each son…

via Manual do Usuário April 24, 2025

Google's control of the web could be coming to an end

It's been hard to avoid the US government's antitrust case against Meta lately, since CEO Mark Zuckerberg spent three days in front of the cameras in Congress, testifying about his company's alleged anti-competitive tactics. But another equall…

via The Torment Nexus April 24, 2025

$5 million in tokens stolen from ZKsync

An attacker compromised an admin account belonging to the ZKsync Ethereum layer-2 project, which is built by Matter Labs. By doing so, they were able to steal approximately $5 million worth of the ZK token, which the project said wer…

via Web3 is Going Just Great April 24, 2025

Generated by openring