Learn How To Deploy Angular app on Github

mayurkadampro

Mayur Kadam

Posted on January 16, 2020

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

Alt Text

So we successfully did the application creation part πŸ˜ƒ

2) Create a Github Repository

Create a new repository on GitHub.

Alt Text

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.

Alt Text

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.

πŸ’– πŸ’ͺ πŸ™… 🚩
mayurkadampro
Mayur Kadam

Posted on January 16, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related