Deployment of Angular Application using GitHub Pages

Hello Readers,

In this Article, You will learn how to deploy your Angular Application and Host it on GitHub Pages. So are guys exited to host your first Angular Application on live server!!!

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

ng build – -prod

Or creating a production build with Ahed-Of-Time compilation is also just as 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 by simply writing one command line statement will generate build for you? Cheers to Angular CLI Team!!! And Believe me hosting your Angular Applications is also as easy as creating the build. Let’s see how!!!

GitHub Pages:

GitHub has the feature that code hosted on GitHub will be automatically available to GitHub Pages. Before starting with hosting on GitHub You will required account on GitHub and also install the 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 following steps

Create the build

ng build – -prod                       or   ng build – -prod – -aot

Remove Dist Directory from .gitignore

By default  dist directory is in .gitignore file so it will not upload it on github server. So when we want dist directory to upload on github server we must remove it from .gitignore file.

Create the Repository

• Go to github.com
• Create the new repository and name it as shown below

GitHubusername.github.io

Example : jinalshah999.github.io

Copy Remote Server URL

It will be required when we will upload the dist folder.

Now Open the Command Prompt and navigate to source directory and follow the steps

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

All done now your Angular application is live on 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??

Hope this Article will be helpful to you for hosting your Angular application.