Deploying an Angular 6 Application to Netlify
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”] 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.
- Create a
_redirects
file in thesrc
directory of your angular project.For most basic sites it should look something like this.
# src/_redirects /* /index.html 200
- 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.
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
.
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 mastodon or via email.
Check out some more stuff to read down below.
Most popular posts this month
- Dagger Feels Like Magic
- Setting up ANTLR4 on Windows
- SQLite DB Migrations with PRAGMA user_version
- 20 Years of Ubuntu
- видно по глазам - you can see it in the eyes
Recent Favorite Blog Posts
This is a collection of the last 8 posts that I bookmarked.
- Serendipity from Armin Ronacher's Thoughts and Writings
- Andrea Veri: GNOME Infrastructure migration to AWS from Planet GNOME
- A Whale of a Time from https://popagandhi.com/
- Pluralistic: You should be using an RSS reader (16 Oct 2024) from Pluralistic: Daily links from Cory Doctorow
- Sahil Dhiman: 25, A Quarter of a Century Later from Planet Debian
- Reflections on Palantir from Nabeel S. Qureshi
- Reading Old Posts from Kev Quirk
- Capture less than you create from David Heinemeier Hansson
Articles from blogs I follow around the net
Script Doctoring
I’ve been having a number of communications problems in my interactions with my doctors at Kaiser lately, and it’s becoming one of those things where the burden and onus entirely is placed upon me to sort out, and that’s exhausting for the actually autist…
via Bix Dot Blog October 22, 2024Blockchain company Forte acquires games studios, demands secrecy, shuts them down
Sometime in 2023, blockchain firm Forte acquired game studios Phoenix Labs and Rumble Games. However, it would be a year before this came to light, because according to a report from Game Developer, Forte demanded secrecy from employ…
via Web3 is Going Just Great October 22, 2024Initial explorations of Anthropic's new Computer Use capability
Two big announcements from Anthropic today: a new Claude 3.5 Sonnet model and a new API mode that they are calling computer use. (They also pre-announced Haiku 3.5, but that's not available yet so I'm ignoring it until I can try it out myself.) Comp…
via Simon Willison's Weblog: Entries October 22, 2024Generated by openring