Deploying Angular 6|7 Apps to Github Pages
Throughout this tutorial, you'll learn to deploy an Angular 6|7 application to GitHub Pages.
Github pages allows you to host static websites and web apps for free using the same workflow you use to host repositories, you just commit and push. You can even associate a custom top level domain name to your website or web app by adding a CNAME file.
In this tutorial we'll see how to host an Angular 6 web application using Github Pages. Let's get started.
You need to have Node.js, NPM and Angular CLI 6 installed, you also need to generate a new Angular 6 project using Angular CLI 6 or you can also apply this to an existing project that you want to deploy to Github Pages.
Next you also need to install a package which makes the process of deploying to Github pages easy.
$ npm install -g angular-cli-ghpages
Building the Angular 6 Application
The next step is to build your web application for production and with the base href location set to your Github Page URL.
$ ng build --prod --base-href "https://<YOUR_GITHUB_USER-NAME>.github.io/<YOUR_REPO_NAME>/"
Deploying to Github Pages
Now you are ready to deploy your web app to Github pages. Thanks to angular-cli-ghpages this is a one command process so just run:
You web app will be depoyed to
In this short tutorial, we've seen how we can quickly deploy Angular 6 applications to GitHub Pages.
RELATED TUTORIALSAngular Http — Angular 6|7 HttpClient Tutorial
Angular 7|6 Tutorial Course: Securing the UI with Router Guards and UrlTree Parsed Routes (for Login Redirects)
Angular 7|6 Authentication with Firebase (Google | Email & Password): Login, Register, Email Verification and Password Recovery
Building an Angular 6|7 Material Login Form and Modal Dialog UI
Angular 6|7 Material Form & Date Picker Example
Angular 7|6 Tutorial Course: Angular NgModules (Feature and Root Modules)
Angular 7|6 Tutorial Course: Nested Router-Outlet, Child Routes & forChild()