How to Deploy Angular 2+ Web Apps to Github -- Words (231)

Angular 2+ and 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 short guide we'll see how to host an Angular 2+ web application using Github pages. So lets get started.

Prequisites

You need to have Node.js, NPM and Angular CLI installed, you also need to generate a new Angular 2+ project using Angular CLI 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 2+ app

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:

ngh

You web app will be depoyed to: https://username.github.io/app-name/.


I'm a web developer and technical writer. Passionate about modern JavaScript technologies and currently trying to develop all kind of apps (Web, Mobile and Desktop) with JavaScript.