Open In App
Related Articles

Deployment of Angular Application using Github Pages

Improve Article
Save Article
Like Article

There are various methods to deploy Angular Application such as Github Pages, Heroku, Firebase, etc. The Github provides the simplest way of all using the Github Pages.

Steps to Create and Deploy Sample Angular Application to Github Pages:

ng new gfg-example
  • The above command will ask various questions for routing and Styling, press Enter to go with Default Values:
  • After creation of project go to the project Directory using:
cd gfg-example
  • The structure of the Code will look like :
  • Go to src/app/app.component.html and Remove all the code and add the below code :

<h2 [ngStyle]="{'color':'#00FF00'}">
  Geeks For Geeks Example 
  Simple App Deployment using Github Pages

  • Now run the Angular App locally using:
npm start
  • Next, Stop the Angular App
  • Go to Github and create new Repository with the name according to your preference
  • After creation of Github Repo, Go to the project dir and open Command Line
  • Push the Code to Git using following commands:
git init
git add .
git commit -m "Initial Commit"
git remote add origin<username>/<reponame>.git
git push -u origin master
  • Now, go to github repo and your code should be uploaded to master branch on github
  • Next Install the angular-gh-pages using npm:
npm install -g angular-cli-ghpages
  • Now, Production Build the Application using:
ng build --prod --base-href "https://<username><reponame>/"
  • Atlast, create the gh-pages branch, also upload the build and bundled code to this branch using :
ngh --dir dist/gfg-example
  • Remember that the project name we are using from start is gfg-example, if you have different project-name then instead of the last command use:
ngh --dir dist/<project-name>
  • Now go to the Settings tab parallel to Code in Github Repo and under Github Pages you will find the Link for your deployed application:
  • Open the URL and You will get our Angular App Deployed:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 10 Sep, 2020
Like Article
Save Article
Similar Reads
Related Tutorials