How To Host Your Angular Projects On Github

Published in

Analytics Vidhya

6 min readSep 17, 2019

In this article,we will follow a step-by-step approach to deploy an Angular Basic Hello-World application to GitHub. We will create a project using Angular CLI and then deploy that to GitHub. Let us get started.

Prerequisites

Let’s get started with the prerequisites. You will need to have:

The knowledge of TypeScript, HTML, and CSS.
Node and NPM installed on your system.
Angular CLI 8 installed on your system.
Github Desktop application( https://desktop.github.com/)

Step 1: Creating a New Project

To create a project using Angular CLI, run the command:

ng new Hello-World

Step 2: Running Development server

Let’s run the development server by using the below command.

ng serve

Now open your browser and navigate to localhost:4200 to see your angular app.

Step-3: Add gh Pages to Host your project on Github

To add your project on github you need to add gh pages to your project

Step 3: Create Repository With Your Project Name

First of all download Github Desktop. Here I am showing a demo of my existing project.

Open Github Desktop, On the top left corner click->New Repository
Give Name to your repository as your project name (Hello-World).

After doing this, Go to->This PC->Documents->Github->Your repository Name

After doing so your folder structure should also look like this

Step 4 : Click on Publish Your Repository

Once you are done with above steps again go to Github Desktop app and click on publish your repository to Github

Step: 5 Check your Hosting options on the Github website

Open Github On top Right Corner ->Your repositories->Hello-World

Click on Settings navigate to bottom, There you will see 3 or 4 options

Github Master
Github master/docs
gh pages
None

Note that master branch/docs will be disabled initially and gh-pages is not available right now

We will look at each of this step by step

Step 6: Upload files to Your Repository

Next move to your project folder copy all the files and paste it inside your
Documents->Github->Project(Hello-World) folder
After doing this go to your Github Desktop, You will see various changes. You need to type your commit message in the bottom left corner and click on commit.
After doing this you need to click on push origin on your screen
After doing this if you will visit your Github repository on the website you will see your code is uploaded to your repository.

Step 7: Build Your Project and select an appropriate method to host your site

Before building your project add gh pages to your project to let your project work on GitHub
Type the following command to install the npm package globally.

npm i -g angular-cli-ghpages

To build your project command is

ng build
ng build --prod

But to build our project we won't use the above command.

Step 8: Select your choice on Github setting page to Host you app

We will see each of them one by one

Master Branch

Now make note of one thing that we will make one folder on our master branch because we already uploaded code of our project on the master branch. So to differentiate our deployment code and project code we will make a folder on our master branch and name it deployment

So go to Documents->github->project folder ->Create new Folder->deployement

Now run the code for deployment

ng build --prod --output-path docs --base-href /Hello-World/deployment/

So above code will generate a build file in

output-path docs: Specify that generate my build file in the docs folder
base-href : Specify the base URL to execute your code
So here /Hello-World/deployment specifies that go to Hello-World and inside hello-world find folder name deployment and start your execution from here
Above code will generate a list of files in your deployment folder
Copy those files from your deployment folder in your Documents->github->project folder ->deployement folder
Go to Github desktop and commit and then push

After doing this much make a copy of index.html and rename it 404.html

Copy it in your

Documents->github->project folder as well as

Documents->github->project folder ->deployement folder

After this run command from CLI

$ ngh

As we have mentioned master branch so it will search under the master branch for first time execution and then after it will return a base URL which is

Hello-World/deployement/ so after that it will search under this folder.

Now go to the link https://username.github.io/projectname/

or you can find URL under settings tab just above your choices.

2. Master branch/docs folder

So go to Documents->github->project folder ->new folder->docs

after publishing it to your repositories your this option will be enabled

Now run the code for deployment

ng build --prod --output-path docs --base-href /Hello-World/

So follow the same procedure as above mentioned in step instead of pasting code in deployment paste your code in docs and change your choice from master to master branch/docs folder and then launch your site

3. gh-pages branch

To do this we need to create a new branch named gh-pages

Open Github desktop click on current branch->new brach and give name gh-pages
Switch to gh-pages branch and publish it.
Go to your github website open your repository and switch to gh-pages from master pages