In this blog post, we are going to discuss about “how we can deploy an angular app on GitHub Pages for free”
To discuss further, lets create a angular application using the Angular CLI. You can checkout one of our detailed post on how to create angular app using CLI here.
Create an angular application using angular CLI
The flow is we are going to generate an angular app using angular CLI. The CLI will generate us a sample application and we will push that boilerplate into GitHub with a new repo.
And then we will look into the steps to deploy that application in github pages.
Create GitHub Repository
I’m going to create an repository with a name “angular-hosting-demo”
Once I create repo, I’m going to push all codes here.
New application using Angular CLI
By generating following after installing all the necessary tools.
ng new <name> [options] ng new angular-hosting-demo
It will generate an application with following folder structure.
Verify whether application is building and showing output using following command
And it will show us the following output
Now into action
For this we are going to install an npm package.
Add angular-cli-ghpages to your project
Run the following command to add angular-cli-ghpages
ng add angular-cli-ghpages
You have run the above from the home directory or root directory of your project.
It will update the angular.json file in your repository.
Now commit all your changes to remote branch.
Deploy your project to GitHub pages
Deploy your project to GitHub pages with all default settings. Your project will be automatically built in production mode.
ng deploy --base-href=/<repositoryname>/
Please be aware of the –base-href option. It is necessary when your project will be deployed to a non-root folder.
In our case, we will run the following command to deploy the application with repo name as bas-href value
ng deploy --base-href=angular-hosting-demo
And this built code will uploaded into separate branch called gh-pages
And it will have runtime files as below
And base-href would have details of repository name
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>AngularHostingDemo</title> <base href="angular-hosting-demo"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="styles.09e2c710755c8867a460.css"></head> <body> <app-root></app-root> <script src="runtime-es2015.0dae8cbc97194c7caed4.js" type="module"></script><script src="runtime-es5.0dae8cbc97194c7caed4.js" nomodule defer></script><script src="polyfills-es5.177e85a9724683782539.js" nomodule defer></script><script src="polyfills-es2015.f332a089ad1600448873.js" type="module"></script><script src="main-es2015.48f00976eb36d615f1e8.js" type="module"></script><script src="main-es5.48f00976eb36d615f1e8.js" nomodule defer></script></body> </html>
Access deployed site
To get the URL, you can visit the settings page. It will provide the details of hosted application under github pages tab
Now, we can access the deployed site in the following URL
Give it a try, and leave your feedbacks in comment section below.