Learn How To Deploy Angular app on Github

As you are reading this post then you might become exciting to know about how very easily you can deploy ur angular application over Github. so before you move forward I’m assuming that you might have Github account already and must have the basic knowledge of angular application at least you done the angular setup on your machine.

So we will go step by step by assuming you right now don’t have any kind of project ready yet so we will start from the beginning of project creation.

1) Create an Angular App

To create a new workspace and initial starter app:
Open cmd and Run the CLI command ng new and provide the name my-app, as shown here

ng new my-app

and it will open your browser directly with default template as shown below

So we successfully did the application creation part 😃

2) Create a Github Repository

Create a new repository on GitHub.

Once you click on create repository button you will see the command to push your local project into GitHub and To avoid errors, do not initialize the new repository with README, license, or gitignore files.

so we finally push our newly created project on Github 😃

3) Install GitHub page package

Add angular-cli-ghpages to your project by entering the following command on cmd.

npm i -g angular-cli-ghpages --save

once all installation is getting complete next you have to build the app by the following command.

ng build --prod --base-href "https://username.github.io/repository_name/"

In my case, it could be

ng build --prod --base-href "https://mayurkadampro.github.io/Angular_deploy_demo/"

lastly, enter the below commands which creates a new branch called gh-pages and pushes the compiled code to the branch.

ngh --dir=dist/[project-name]
OR
angular-cli-ghpages

so we also upload the build over a Github.
Once we did that thing also then you ready to see your beautiful website over Github now you navigate to the URL to see the project running, it might take a few minutes for the app to become live. 😇

Still, Confuse ?? Then Check out below video

Here is deployed angular project which is hosted to GitHub -https://mayurkadampro.github.io/Angular_deploy_demo/

also, you can check your gh-pages -https://github.com/mayurkadampro/Angular_deploy_demo/tree/gh-pages

That’s it 🙂
hope you get it how very easily you will deploy your project over Github. if you have any queries then you can comment out also I will happy to respond to your query.