Deploy an Angular 9|8|7 Application Using Github Actions


In the previous article, we discussed how to:
I am creating an Angular application and deploying it in a production environment. Everything is going well, but whenever I add/update some features in the application, then every single time, I need to redeploy the whole application to the Production environment manually. To get rid of manual deployment, CI/CD comes into picture. This way, a programmer can save time and use this timing for development.
There are many ways to configure the deployment, but I am going to use 'Github actions' which is an inbuilt feature of GitHub.

Github Actions

Github Actions is a new feature of GitHub which enables you to automate the software workflow. By using this, you can build, test, and publish your code to the production environment from the GitHub repository. For more information, you can visit this link here.
Let's set up the deployment one-by-one. But there are some prerequisites.
  1. GitHub account (to create click here)
  2. Create an Angular application (to learn how to create one, click here)
  3. Open a project in any code editor - I am using VS Code.

Creating a Public GitHub Repository

This is the initial step to create a project and connect your application with a repository.
Deploy An Angular 9|8|7 Application Using Github Actions

Add your Workflow File

The Github actions feature provides the predefined Continous integration workflows for many popular platforms, like Node.js, .NET Core, Laravel, PHP, and so on. However, if you want to customize or create new ones, then you can do so.
To create or customize your workflow, you need to use the 'YML' extension file with the workflow commands. 
Steps to Create a 'YML' file in your Project
Open your project in VS code and create a '.github' folder. Under that folder, create the 'workflows' folder and create the 'YML' extension file.
Structure of the Folder
'.github' folder --> 'workflow' folder --> 'build.yml' file (you can change the file name, but the extension should be 'yml').
Deploy An Angular 9|8|7 Application Using Github Actions
Inside the build.yml file, just copy the below code:
  1. on: push  
  2. name: Build Angular project  
  3. jobs:  
  4.   build:  
  5.     runs-on: ubuntu-latest  
  6.     strategy:  
  7.       matrix:  
  8.         node-version: [12.x]  
  10.     steps:  
  11.       - uses: actions/checkout@v1  
  13.       - name: Cache node modules  
  14.         uses: actions/cache@v1  
  15.         with:  
  16.           path: ~/.npm  
  17.           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}  
  18.           restore-keys: |  
  19.             ${{ runner.os }}-node-  
  20.       - name: Node ${{ matrix.node-version }}  
  21.         uses: actions/setup-node@v1  
  22.         with:  
  23.           node-version: ${{ matrix.node-version }}  
  24.       - name: npm install and npm run build:ci  
  25.         run: |  
  26.           npm i  
  27.           npm run build:ci  
  28.       - name: Push Build to Releases  
  29.         uses: ncipollo/release-action@v1  
  30.         with:  
  31.           artifacts: "dist/angular-githubaction/*"  
  32.           token: ${{ secrets.TOKEN_GITHUB_ACTION }}   
Be careful about the annotation of the 'YML' file. 
Line No: 27 - npm run build:ci means you are building your application with clean commands, which is mentioned in package.json. However, you can define a command that runs test cases first, then build the app. Then you can add before the build command. It depends on your project scope.
Line No 28-32 - Between these lines, you can write the commands to deploy the application on a production environment. Right now, I dont have an account on the cloud (Azure, AWS), but I am going to write commands to create a Release. For this, you must follow the below steps:

Creating a Secure Github Token and Pushing the Code

I think everyone has experience creating a Github token for repository access. If you have not yet created one, then there are few steps you should know:
  1. Go to GitHub -> settings -> Personal access tokens ( -> check the required checkobox(repo and workflow) and generate the token.
  2. Generate a new token and copy the token 
  3. Go to your repository -> settings -> secrets ->Give Name -> (Paste the token in Value Field)
  4. Use the same name in the YML file for the token key (line no 32). 
Deploy An Angular 9|8|7 Application Using Github Actions
Next, Push your code to GitHub with release tags.
Step to push the file:
  1. Commit all the files including 'build.yml'. 
  2. Add new tag ( git tag v1.0) then push code (git push orign v1.0) 
Once you pushed the code, then you can see the workflow in the Actions Tab. Please refer to the Snapshot.

Deploy An Angular 9|8|7 Application Using Github Actions
Whenever you push your code, GitHub action workflow will always run.
Deploy An Angular 9|8|7 Application Using Github Actions
After pushing your code, you can refer to the building workflow in the build tab under the actions tab.
The source code for this template is on Github. Please feel free to come up with proposals to improve it.
I hope this article was helpful to you. Thanks for reading!
Happy learning! :)

Similar Articles