Learn How To Deploy Angular app on Github
Mayur Kadam
Posted on January 16, 2020
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.
Posted on January 16, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.