In this article i will explain How to deploy an Angular Application to GitHub Pages using GitHub Actions. GitHub Actions make it easy to automate all your software workflows, now with world-class CD/CD. Using GitHub Actions we can Build, test and deploy our code directly from GitHub.
GitHub Pages is a feature in GitHub that allows you to host a static website or web application for free. Most of the companies & organisations using GitHub Pages as their Documentation site.
If you are developing an Angular Application for GitHub Pages you need to build the Application for the production ready. Whenever we made some changes to the application we have to repeat the build process every time. By using GitHub Actions we can make the CI/CD process automated.
To learn more about GitHub Actions : https://github.com/features/actions
STEP 01 :
Code your Angular Application.STEP 02 :
In order to set up workflow, it is necessary to set up a secret key for the workflow. Its protect your workflow trigger accessing by outsiders. There for you need to create a GitHub Token.
1. First Login to https://github.com
2. Go to https://github.com/setting/profile
3. Now navigate to the Developer Settings
4. Click on the Personal Access Tokens.
5. Generate New Token.
Now you have got access token. Store it somewhere..
STEP 03 :
Now its time to create the Secret Key in your Repository.
1. Go to your repository Settings.
2. Click on Secrets
3. Click on Add New Secret
4. Put ACCESS_TOKEN as name and paste the GitHub Token that you got in the previous step.
5. Now Click Add Secret Button.
STEP 04 :
Now comes the main part. Go to your repository and navigate to Actions tab & Setup New Workflow. Now modify the workflow file as shown below.
Angular provides a CLI tool called gh-pages to deploy the angular application to GitHub Pages. Here i prefer an CI/CD Automation to build and deploy Angular Application to GitHub Pages. Check it Here https://github.com/JamesIves/github-pages-deploy-action
Here i selected development branch as Base Branch. Because for the Organisation GitHub pages we can not be able to choose which branch to deploy. By Default its on master branch. So here i do the developing process in the development branch. When i made any changes and pushed it will build the application to master branch and then deploys it to GitHub Pages.
BRANCH - Where is build and render the applications.
FOLDER - App compiled directory.
That's all.
Whenever you commit new changes to the development branch the build process will start automatically and deploys it to the GitHub pages. You can check the build process by navigating to the Actions tab. Changes will be live within a few seconds. You can check the below repo url where used Actions to build the Angular Application.
Keep Learning & Keep Building..!
0 comments:
Post a Comment
Thank You