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

Introduction 

 

In the previous article, we discussed how to:

1. Create an Angular 8 Project
2. Change the Prefix of an Angular component
3. Angular 8 Routing and Visualization

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.

 

 

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').

 

 

Inside the build.yml file, just copy the below code:

on: push
name: Build Angular project
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@v1

      - name: Cache node modules
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Node ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install and npm run build:ci
        run: |
          npm i
          npm run build:ci
      - name: Push Build to Releases
        uses: ncipollo/release-action@v1
        with:
          artifacts: "dist/angular-githubaction/*"
          token: ${{ secrets.TOKEN_GITHUB_ACTION }}

Note

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 (https://github.com/settings/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). 

 

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.

 

Whenever you push your code, GitHub action workflow will always run.

 

 

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! :)