How To Host Your Angular Projects On Github
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
- Select your choice as gh-pages in setting under Github Pages tab
Now follow all Steps of method 1. i.e master branch
Output
So this was all about github and angular.Quickly deploy Angular CLI project to GitHub Pages
Deploying angular project to GitHub pages is simple and easy.
I hope you will enjoy and feel free to contact in case of any queries.