CI/CD or Continuous Integration/ Continuous Deployment is one of the developer keyword these days. In this article we will be automating the deployment of an Angular applications using GitHub Actions. Meanwhile that every time we hit git push origin master GitHub will automatically kick the build process and then deployed to the cloud platform.
Prerequisites :
- Angular Project
- GitHub Account
- Firebase Tools
- Firebase Account
- IDE (VS Code)
- Node Installed
What is Firebase Hosting ?
Firebase Hosting is a production-grade web content hosting for developers. Firebase gives you fast, secure and reliable way to host your app's static assets (HTML, CSS, Javascript & Media Files). The production-grade hosting is backed by a global content delivery network (CDN). Firebase Hosting serves your content over SSL, by default. Also you can use your own custom domain or your project's fee subdomain with firebaseapp.com
To learn more about Firebase Hosting : https://firebase.google.com/docs/hosting
What is GitHub Actions ?
GitHub was introduced a new feature called GitHub Actions back in 2018. GitHub Actions make it easy to automate all your software workflows. GitHub Actions let you build, test and deploy your code right from your GitHub repository. GitHub takes care of a number of process that can be triggered by a variety of events on the platform such as Pushing Code, Making a release & Pull requests.
Every GitHub Action required a .yml file. The file us used to describe actions, behaviour and other stuffs.
.yml stands for YAML, which is a human-readable data serialisation language. It's commonly used for configuration files and in applications where data is being stored.
To learn more about GitHub Actions : https://github.com/features/actions
Setting up Firebase Hosting Configurations
For this demo, I am going to use an Angular Application which developed to learn Angular. You can use your own Application too.
- Install Firebase tools via NPM : npm install -g firebase-tools
- Login to your firebase account: firebase-login
- Navigate to your project directory and setup firebase configs : firebase init
- Deploy the application to Firebase : firebase deploy
Now you might see a file called firebase.json generated into your project directory. The file simple specifies which files and settings from your project directory are deployed to your Firebase project.
Modify the firebase.json file as shown in the below image. Refer the angular.json file to get your project output folder. In my case it is "outputPath": "dist/Online-Store-Angular"
 |
| firebase.json file |
Setup Firebase Token in your GitHub Repository
Now we have done everything locally to get started with the CI/CD deployment from our GitHub Repo. GitHub need access to our firebase resource to deploy the Angular application to the Firebase hosting.
- Generate Access Token for Firebase CI : firebase login:ci
It will ask you to authenticate to your firebase account. Once it authenticated it will produce a Token key. Now go to your GitHub Repository Settings and create new Secret key and paste your token key to the value field as shown in the below image.
 |
| GitHub Repository Secret Key |
Setup GitHub Actions Workflow
In your repository click Actions to create your first workflow. There you can see plenty of Workflow templates available. We are going to make our own workflow. Click on Set up a workflow yourself.
 |
| Setup New GitHub Workflow |
GitHub gives us a chance to glance over it. Everything seems i order, and here i what is happening inside the file.
- Spin up an Ubuntu Server
- Install Node.js
- Install Node dependencies for the project
- Build the Application
- Deployment
Now modify your YAML file (.yml) as shown below.
Alright, let's commit the file to the project now. Now as per my workflow code, every time you push to the repository, the commands will fire off automatically and will deploy the application to the Firebase Hosting.
Now go ahead and make some changes in your project, then push it to GitHub and watch the workflow performs in the Actions tab.
 |
| GitHub Action Triggers |
Cheers..! That's it folks. Explore more about GitHub Actions and automate your deployment process.
DEMO App : https://online-store-9c599.web.app/
GitHub Repository : https://github.com/Safnaj/Online-Store-Angular
0 comments:
Post a Comment
Thank You