Deployment Of Angular Application Using GitHub Pages

In this article, you will learn how to deploy your Angular Application and host it on  GitHub pages. Are you guys exited to host your first Angular Application on a live Server?

There are certain ways to host your Angular Application but I am using an Angular-CLI to build an Angular application. To generate the build using an Angular-CLI is as easy as writing one command line statement.

ng build - -prod

Or

Creating a production build with Ahead-Of-Time compilation is also simple.

ng build - -prod - -aot

It will generate the compiled and bundled minified code in a dist/ subdirectory, which we deploy and host on GitHub Pages.

Isn’t it awesome, guys, that by simply writing one command line statement, it will generate a build for you? Cheers to Angular CLI Team. Believe me, hosting your Angular Application is also as easy as creating a build. Let’s see how.

GitHub pages

GitHub has the feature that the code hosted on GitHub will be automatically available to GitHub pages. Before starting with hosting on GitHub, you will need an account on GitHub and also install git command line (https://git-for-windows.github.io/ ). Now, you can host your Angular Application, using git command line. I will divide the hosting process in the steps given below.

1. Create build
   ng build - -prod or ng build - -prod - -aot

2. Remove Dist Directory from .gitignore
   By default, dist directory is in .gitignore file, so it will not upload it on GitHub Server. When we want dist directory to upload on GitHub Server, we must remove it from .gitignore file.
   
   
   
   
   

3. Create the Repository

• Go to github.com
• Create the new repository and name it, as shown below.
  
  
• GitHubusername.github.io
• Example : jinalshah999.github.io
  
  
  

4. Copy Remote Server URL
   It will be required, when we will upload the dist folder.
   
   
   

5. Now, open the command prompt, navigate to the source directory and follow the steps.

• git remote add origin CopiedURL
  
  
  
  
• git add .
  
  
  
  
• git commit –m “ready”
  
  
  
  
• git subtree push - - prefix dist origin master
  
  
  

Everything is done. Now, your Angular Application is live on the URL.

https://yourusername.github.io

Example

https://jinalshah999.github.io

Conclusion

CLI has changed everything. Now, we can upload the Application to live Server with single command line statement. Isn't it awesome?

I hope, this article will be helpful to you for hosting your Angular Application.