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:
- 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 :
- Now run the Angular App locally using:
- After the App Compiles Successfully, go to Browser and Open http://localhost:4200/
- 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 https://github.com/<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>.github.io/<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:
- How to make “spoiler” text in github wiki pages?
- How to Build Portfolio Website And Host It on GitHub Pages?
- Adding Angular Material Component to Angular Application
- How to enable routing and navigation between component pages in Angular 8 ?
- Routing in Angular JS using Angular UI Router
- Angular 7 | Angular Data Services using Observable
- How to store deployment configuration files in Node.js ?
- Hot and Cold Deployment in Tomcat
- Angular CLI | Angular Project Setup
- Difference between Angular 4 and Angular 5
- How to get the number of pages in a PDF document using PHP ?
- How to Add Google Locations Autocomplete to your Angular Application ?
- How to auto-save data when application is offline in Angular 8?
- Save Pages as HTML in ElectronJS
- Using GitHub to host a free static website
- Using Bitbucket as an extension to GitHub capabilities
- How to get Trending GitHub Repositories Using Node.js ?
- GIT | An Introduction to Github
- Downloading gists from Github made simple
- Bitbucket vs GitHub vs GitLab
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.