Deploy your Angular Project to Github Pages

Do you want to deploy your angular app in GitHub Pages. Publish your app live in the internet and show your friends your live app for free lifetime? Please read this article to learn how you can deploy your angular app free to the internet.

First create repository on GitHub

Create your new GitHub repository where you will check-in your angular app. In my case it is called: /coding-examples-angular-workspace-sample. Here is my GitHub repo URL : https://github.com/rupeshtiwari/coding-examples-angular-workspace-sample/settings/pages

Second enable GitHub Pages on your Repo

Go to Pages tab and then select your desired branch (I selected main) then select the docs folder, and save. It will give you URL of your live app. In my case it is: https://www.rupeshtiwari.com/coding-examples-angular-workspace-sample

In Angular project do below:

Go to VSCode open your Angular app and do below changes.

Step 1: OutputPath of Angular.json to docs

First go to angular.json and put docs as output directory.

"architect":{
  "build":{
    "builder":"@angular-devkit/build-angular:browser",
     "options":{
       "outputPath":"docs",?? Here like this
      }
   }

}

Step 2: Add Build Prod script

Next add below script in package.json:

"build:prod":"ng build --prod --base-href=/coding-examples-angular-workspace-sample/"

Make sure you base-url must match with your GitHub Repo name. In my case it is /coding-examples-angular-workspace-sample/. Please put the / at start and end.

Step 3: Build and Push Angular App

Run "npm run build:prod" and push your repo to GitHub.

Step 4: Your App is Live ??

Wait for 2-3 minutes and navigate to GitHub Page URL. Enjoy your app is now live in GitHub Pages. Here is my live application URL https://www.rupeshtiwari.com/coding-examples-angular-workspace-sample

Become full stack developer ??

I teach at Fullstack Master. If you want to become Software Developer and grow your carrier as new Software Engineer or Lead Developer/Architect. Consider subscribing to our full stack development training programs. You will learn Angular, RxJS, JavaScript, System Architecture and much more with lots of hands on coding. We have All-Access Monthly membership plans and you will get unlimited access to all of our video courses, slides, download source code & Monthly video calls.

• Please subscribe to All-Access Membership PRO plan to access current and future angular, node.js and related courses.
• Please subscribe to All-Access Membership ELITE plan to get everything from PRO plan. Additionally, you will get access to a monthly live Q&A video call with Rupesh and you can ask doubts/questions and get more help, tips and tricks.

Your bright future is awaiting for you so visit today Fullstack Master and allow me to help you to board on your dream software company as a new Software Developer, Architect or Lead Engineer role.

?? Say ?? to me!

Rupesh Tiwari

Sr. Software Architect / Mentor

Founder of Fullstack Master

Email: [email protected]

Website: RupeshTiwari.com