Deployment Of Angular Apps To GitHub Pages

In this article, let us see how to deploy an Angular application to GitHub Pages. Here is the link to GitHub pages. And you can read everything about Github Pages and how it works. It is the simplest hosting you can get. Basically, your application is hosted directly from your GitHub Repository. And we already know that it only hosts the static content. So, we can only deploy our HTML, CSS, and JavaScript files. I’ve attached the source code of the application and you need to just run the command.

npm install

It is used to install all the required npm packages. And then, run the command -

ng serve --prod

This application is purely the front-end. It doesn’t have any back-end. More accurately, it does have a back-end but GitHub API.

 

Here is the list of followers coming from the GitHub. We have not built this back-end ourselves. So, let’s see how to deploy the application to GitHub pages.

Step 1

First of all, go to GitHub and sign in. And then, create a new repository.

 

And now, click on "Create repository".

Step 2

This is the next page. 

 

Here, we can see how to register this repository as the origin of the local git repository. So, I’m going to copy this red bordered line. Back in our project folder, we have already a git repository. So when you create the project with Angular CLI, it automatically initializes the git repository. 

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> git remote add origin https://github.com/techyguy786/github-followers.git

Now, with the help of this command, we set this GitHub repository as the origin of our local repository. And then, we pushed our changes to this remote repository.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> git push origin master

Here, "master" is the branch name. If you have no idea of version control and git, then you should educate yourself about these concepts.

 

So now, our source code is on GitHub. Back in the browser where we copy the link, if we refresh the page, we can see our code on the GitHub repository.

 

Step 3

Now, we need to install a node package for deploying our application to the GitHub pages. So, we’ll install this package globally.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> npm i -g angular-cli-ghpages

And now, to build the application, we run the following command.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> ng build --prod

But, here is one more important thing. We need to run our command as mentioned below.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> ng build --prod --base-href="https://techyguy786.github.io/github-followers/"

This new flag is really very important; otherwise, your deployment will not work. And we set this to the address of our website on the GitHub Pages.

https://username.github.io/repository/

Be sure that you have also placed the forward trailing slash at the end of the URL. Once again if you don’t set this <href> properly, your website is not going to work. And after running this above command, our application is built successfully.

Step 4

Now, back in the VS Code, inside the dist folder, look at the index.html.

 

Here, we have a base element with GitHub repository link. This is set to the value of the base href flag that we provided when building our application (Step 3). So, this determines the root of our website.

The first step was to build the application using Angular CLI. The second step is to deploy using GitHub Pages. Here we go.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> angular-cli-ghpages

Or we can use the shorthand.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> ngh

Here is the output from my machine.

 

But if you see any error like,

Error

Unspecified error (run without the silent option for detail)

In this scenario, we will run the following command -

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> ngh --no-silent

We can find the documentation of this package on npm.

Step 5

Now, let’s head over to our website on GitHub pages and provide the correct URL.

 

Look, here is the website on GitHub Pages. Navigation is working, we’re also consuming the back-end services which, in our case, are from GitHub API. So, you can see how easy it is to deploy the application on GitHub pages.

Shortcut

So every time you want to deploy your application, first, you need to build it in the production mode using Angular CLI with base-href flag and then, we need to run the GitHub Pages.

ng build --prod --base-href=”…”

ngh

Now, let’s see the shortcut because typing all these commands every time is time-consuming. Go to the package.json and on the top under scripts, we can define a new command that is going to be used iteratively.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "deploy:gh": "ng build --prod --base-href='https://techyguy786.github.io/github-followers/' && ngh"
}

In your case, you can change the name of your username and your repository in the URL.

Now, with this custom command, we can easily deploy our application to GitHub pages. Now, go to the terminal and run the command.