Angular 2 App Deployment In GitHub Pages

Hey guys, after a long time, I started again to write blog posts. Thanks to @CSharp-Corner for giving me a platform to share my knowledge.

In this post, we will see about deployment of Angular 2 Application in GitHub pages. It is really an easy way to do it. Let’s dive into this.

Before knowing about the deployment, let’s talk about the required things we need to have ready.

Prerequisites

The following need to be installed in PC.

Node.js.
Angular-CLI (npm install -g angular-cli@latest) – command line interface for generating Angular 2 app.
Typescript (if you want, it you can install it either globally or locally – npm install –g typescript).
Git

Some basic commands in Git

Once installation of the things listed above, we can create Angular 2 Application with the commands, mentioned below.

ng new ng2SampleApplication which generates Angular 2 Application
cd ng2SampleApplication entering into the folder, where our Angular 2 app is created.

Now you can open the command prompt from ‘ng2SampleApplication’ created folder. Subsequently, follow the commands, mentioned below to deploy our code in GitHub pages.

ng build --prod
It compiles our Application code in production mode.
Make sure that you have ‘.git’ folder in your Application folder.
git init which generates .git folder.
git add . - ‘.’ Represents every file and folder to be added in local git repository.
git commit –m “Initial Commit” - Committing our code to our local repository.
Before using the command, mentioned below, make sure we have created new repository in our github account already, if not then login to GitHub account and then create it. Once created, just grab the repository link either based on ssh/https…
git remote v - It helps to expose our remote GitHub repository address.
git push u origin master - It pushes our Application source code into our remote repository.
ng github-pages:deploy creates ‘gh-pages’ branch in our remote repository where pushes our Application production code.

That’s it… Now, you can access your project by using the url type, mentioned below.

I hope, this post will help you. If you have any queries, please post in the comments section and I will try to answer. If anything is found wrong in the step mentioned above, let me know and I will correct it, which will help other developers also.