ZEMOSO ENGINEERING STUDIO
October 25, 2020
5 min read

Our favorite CI/CD DevOps Practice: Simplify with GitHub Actions

In product development, deploying applications fast is simultaneously essential and tedious. For many of our clients (startups and enterprise innovation hubs alike), growth is predicated on being able to launch new capabilities quickly, which is contingent on fast deployment. Continuous integration and continuous deployment (CI/CD) is non-negotiable table stakes in any product engineering effort.

Deploying applications includes integrating, merging, testing, and deploying the code to make sure it works well in production. CI/CD tools streamline this process.

There are several CI/CD tools available in the market like Jenkins. We, however, will begin with Github Actions. For a new product build, it gives us an incredible amount of control over what’s happening with the entire CI/CD pipeline.

In this article, we will discuss using Github Actions and Firebase Publish React to test, build, and deploy a React application. We will also create tags to make sure we have a record of the code that was deployed.

Continuous integration and continuous deployment

Continuous integration: It is a process of adding new code to a shared repository (like GitHub) by one or more developers, followed by a series of automated tests and checks to ensure that the new code doesn’t break the existing stable code. 

Continuous deployment or continuous delivery: It is a process of building and delivering the software with an automated build, test, and deploy process. Each build can be initiated based on an event or or a time trigger. This allows the developers to focus on the actual logic and the development process instead of on regression testing, building, and deploying the code. We will, therefore, share the merits of using GitHub Actions to automate the deployment process to Firebase Hosting.

Why GitHub Actions?

GitHub Actions is  ready to use, requires no extra setup, and the integration and deployment scripts are a part of the existing repository.

Why Firebase Publish React plugin?

Firebase Publish React is one of the many plugins available in the GitHub marketplace that further simplifies the CI/CD process. It supports building and deploying React applications to Firebase Hosting without requiring any major setup or fuss.

Setting up a React application

Setting up a React application is super easy, when done right. If you have node and npm installed, then follow the steps below or begin by installing node + npm.

Development mode and production mode

When building a React app, you can use features like hot deploy to see the changes instantly, or to debug certain errors in the browser. The best practice, however, is to minimize the code and optimize it for better performance during the production.

Pro Tip: Add React Developer Tools to Chrome to debug your React application.

Add tests to your code

It is always a good practice to add tests to your code. It ensures that your code is not broken by other developers, when collaborating on a project like we frequently do with the team at Zemoso Labs and the client. It also ensures that you don’t get surprises when code from other developers is merged into the codebase.

We will make a simple button component and write a Snapshot Test, which will fail if anyone accidentally modifies the appearance or functionality of the button.

1. Open the newly created project in any integrated development environment (IDE) that supports React. I will be using Visual Studio (VS) Code for the rest of this article.

2. Create a button function component and its test file. 

MyButton.js hosted with ❤ by GitHub. View raw code here.

MyButton.test.js hosted with ❤ by GitHub. View raw code here

3. Run the tests

     npm test

4. This will create a folder called __snapshots__; commit this folder with your code.

5. Try to change the values in style object and run the tests again. The snapshot matching will fail this time. This ensures that your components are not disturbed by other developers. If it is, snapshot tests will fail.

In order to make valid changes that will pass the snapshot test, refer updating snapshots.

Add Firebase to the application

1. Follow the steps as outlined in Get started with Firebase Hosting

2. Use the build directory where specified in the above steps

3. To generate the Firebase token for CI/CD tools, refer here 

4. Store the token securely in local or remote storage, because once viewed it cannot be viewed again on the Firebase console

firebase login:ci

Add this token to GitHub secrets

1. Open the project on GitHub website

2. Go to settings -> Secrets -> New Secret

3. Name: FIREBASE_TOKEN

4. Value: Paste the token from above step

Adding FIREBASE_TOKEN as secret to GitHub

Setting up GitHub Actions

To add GitHub Actions to your project, simply create a folder .github/workflows in your root directory and add a file firebase-deploy.yaml

Code: react-firebase-deploy.yaml hosted with ❤ by GitHub. View raw code here

Breakdown of the actions file 

Keywords: 

1. on: Event that triggers these actions. Here, we are using a release type as a trigger. This workflow will trigger every time a release is published

2. jobs: This is a list of jobs that are to be run

3. <job-id>: In this case, deploy. Any other name can also be used for <job-id>

4. runs-on: Machine on which this action has to be run

5. steps: Sequence of steps to be performed in the action

6. uses: Using an in-built library of actions to perform a task. List of libraries can be explored in GitHub Marketplace for Actions

7. with: Any arguments that are required by the Actions Library to run

8. name: Name of the step

9. run: Run a particular command

Explanation:

1. In the first step, check out the code to the current working directory of the remote machine.

2. Install the node dependencies. This step is required for projects that do not have node_modules committed (almost all of them).

3. Run the tests to make sure that the code remains intact. This step will make sure that the GitHub Action workflow will fail soon after the test fails, and faulty code will not be published to Firebase Hosting.

4. The running test step can be removed in case tests are not added to the project.

5. Build and deploy the application on Firebase.

Running the Action

1. Once all the setup is done, push your code to GitHub

2. Create a new release, ideally named after the release version

Creating a release on GitHub

3. Wait for the action to complete; sit back and relax

Find this full project on GitHub

A version of this blog was published earlier on Medium. 

ZEMOSO ENGINEERING STUDIO

Our favorite CI/CD DevOps Practice: Simplify with GitHub Actions

By Zemoso Engineering Studio
October 25, 2020
5 min read

In product development, deploying applications fast is simultaneously essential and tedious. For many of our clients (startups and enterprise innovation hubs alike), growth is predicated on being able to launch new capabilities quickly, which is contingent on fast deployment. Continuous integration and continuous deployment (CI/CD) is non-negotiable table stakes in any product engineering effort.

Deploying applications includes integrating, merging, testing, and deploying the code to make sure it works well in production. CI/CD tools streamline this process.

There are several CI/CD tools available in the market like Jenkins. We, however, will begin with Github Actions. For a new product build, it gives us an incredible amount of control over what’s happening with the entire CI/CD pipeline.

In this article, we will discuss using Github Actions and Firebase Publish React to test, build, and deploy a React application. We will also create tags to make sure we have a record of the code that was deployed.

Continuous integration and continuous deployment

Continuous integration: It is a process of adding new code to a shared repository (like GitHub) by one or more developers, followed by a series of automated tests and checks to ensure that the new code doesn’t break the existing stable code. 

Continuous deployment or continuous delivery: It is a process of building and delivering the software with an automated build, test, and deploy process. Each build can be initiated based on an event or or a time trigger. This allows the developers to focus on the actual logic and the development process instead of on regression testing, building, and deploying the code. We will, therefore, share the merits of using GitHub Actions to automate the deployment process to Firebase Hosting.

Why GitHub Actions?

GitHub Actions is  ready to use, requires no extra setup, and the integration and deployment scripts are a part of the existing repository.

Why Firebase Publish React plugin?

Firebase Publish React is one of the many plugins available in the GitHub marketplace that further simplifies the CI/CD process. It supports building and deploying React applications to Firebase Hosting without requiring any major setup or fuss.

Setting up a React application

Setting up a React application is super easy, when done right. If you have node and npm installed, then follow the steps below or begin by installing node + npm.

Development mode and production mode

When building a React app, you can use features like hot deploy to see the changes instantly, or to debug certain errors in the browser. The best practice, however, is to minimize the code and optimize it for better performance during the production.

Pro Tip: Add React Developer Tools to Chrome to debug your React application.

Add tests to your code

It is always a good practice to add tests to your code. It ensures that your code is not broken by other developers, when collaborating on a project like we frequently do with the team at Zemoso Labs and the client. It also ensures that you don’t get surprises when code from other developers is merged into the codebase.

We will make a simple button component and write a Snapshot Test, which will fail if anyone accidentally modifies the appearance or functionality of the button.

1. Open the newly created project in any integrated development environment (IDE) that supports React. I will be using Visual Studio (VS) Code for the rest of this article.

2. Create a button function component and its test file. 

MyButton.js hosted with ❤ by GitHub. View raw code here.

MyButton.test.js hosted with ❤ by GitHub. View raw code here

3. Run the tests

     npm test

4. This will create a folder called __snapshots__; commit this folder with your code.

5. Try to change the values in style object and run the tests again. The snapshot matching will fail this time. This ensures that your components are not disturbed by other developers. If it is, snapshot tests will fail.

In order to make valid changes that will pass the snapshot test, refer updating snapshots.

Add Firebase to the application

1. Follow the steps as outlined in Get started with Firebase Hosting

2. Use the build directory where specified in the above steps

3. To generate the Firebase token for CI/CD tools, refer here 

4. Store the token securely in local or remote storage, because once viewed it cannot be viewed again on the Firebase console

firebase login:ci

Add this token to GitHub secrets

1. Open the project on GitHub website

2. Go to settings -> Secrets -> New Secret

3. Name: FIREBASE_TOKEN

4. Value: Paste the token from above step

Adding FIREBASE_TOKEN as secret to GitHub

Setting up GitHub Actions

To add GitHub Actions to your project, simply create a folder .github/workflows in your root directory and add a file firebase-deploy.yaml

Code: react-firebase-deploy.yaml hosted with ❤ by GitHub. View raw code here

Breakdown of the actions file 

Keywords: 

1. on: Event that triggers these actions. Here, we are using a release type as a trigger. This workflow will trigger every time a release is published

2. jobs: This is a list of jobs that are to be run

3. <job-id>: In this case, deploy. Any other name can also be used for <job-id>

4. runs-on: Machine on which this action has to be run

5. steps: Sequence of steps to be performed in the action

6. uses: Using an in-built library of actions to perform a task. List of libraries can be explored in GitHub Marketplace for Actions

7. with: Any arguments that are required by the Actions Library to run

8. name: Name of the step

9. run: Run a particular command

Explanation:

1. In the first step, check out the code to the current working directory of the remote machine.

2. Install the node dependencies. This step is required for projects that do not have node_modules committed (almost all of them).

3. Run the tests to make sure that the code remains intact. This step will make sure that the GitHub Action workflow will fail soon after the test fails, and faulty code will not be published to Firebase Hosting.

4. The running test step can be removed in case tests are not added to the project.

5. Build and deploy the application on Firebase.

Running the Action

1. Once all the setup is done, push your code to GitHub

2. Create a new release, ideally named after the release version

Creating a release on GitHub

3. Wait for the action to complete; sit back and relax

Find this full project on GitHub

A version of this blog was published earlier on Medium. 

Recent Publications
Why Realm trumps SQLite as database of choice for complex mobile apps — Part 2
Why Realm trumps SQLite as database of choice for complex mobile apps — Part 2
October 13, 2022
Testing what doesn’t exist with a Wizard of Oz twist
Testing what doesn’t exist with a Wizard of Oz twist
October 12, 2022
Docs, Guides, Resources: Getting developer microsites right in a product-led world
Docs, Guides, Resources: Getting developer microsites right in a product-led world
September 20, 2022
Beyond methodologies: Five engineering do's for an agile product build
Beyond methodologies: Five engineering do's for an agile product build
September 5, 2022
Zemoso’s next big move: Entering Europe with new offices open in London
Zemoso’s next big move: Entering Europe with new offices open in London
August 29, 2022
Drone Technology: The upswing in its usage and value realization in EnergyTech
Drone Technology: The upswing in its usage and value realization in EnergyTech
August 10, 2022
Winning first place at O'Reilly Media’s Architectural Katas — Spring 2022
Winning first place at O'Reilly Media’s Architectural Katas — Spring 2022
July 13, 2022
How to remix Amazon’s Working Backwards with Google’s Venture’s User Journey: The Dr. Strange Way
How to remix Amazon’s Working Backwards with Google’s Venture’s User Journey: The Dr. Strange Way
June 14, 2022
Why Realm trumps SQLite as database of choice for complex mobile apps — Part 2
Why Realm trumps SQLite as database of choice for complex mobile apps — Part 2
October 13, 2022
Testing what doesn’t exist with a Wizard of Oz twist
Testing what doesn’t exist with a Wizard of Oz twist
October 12, 2022
Docs, Guides, Resources: Getting developer microsites right in a product-led world
Docs, Guides, Resources: Getting developer microsites right in a product-led world
September 20, 2022
Beyond methodologies: Five engineering do's for an agile product build
Beyond methodologies: Five engineering do's for an agile product build
September 5, 2022
Zemoso’s next big move: Entering Europe with new offices open in London
Zemoso’s next big move: Entering Europe with new offices open in London
August 29, 2022
ZEMOSO ENGINEERING STUDIO
October 25, 2020
5 min read

Our favorite CI/CD DevOps Practice: Simplify with GitHub Actions

In product development, deploying applications fast is simultaneously essential and tedious. For many of our clients (startups and enterprise innovation hubs alike), growth is predicated on being able to launch new capabilities quickly, which is contingent on fast deployment. Continuous integration and continuous deployment (CI/CD) is non-negotiable table stakes in any product engineering effort.

Deploying applications includes integrating, merging, testing, and deploying the code to make sure it works well in production. CI/CD tools streamline this process.

There are several CI/CD tools available in the market like Jenkins. We, however, will begin with Github Actions. For a new product build, it gives us an incredible amount of control over what’s happening with the entire CI/CD pipeline.

In this article, we will discuss using Github Actions and Firebase Publish React to test, build, and deploy a React application. We will also create tags to make sure we have a record of the code that was deployed.

Continuous integration and continuous deployment

Continuous integration: It is a process of adding new code to a shared repository (like GitHub) by one or more developers, followed by a series of automated tests and checks to ensure that the new code doesn’t break the existing stable code. 

Continuous deployment or continuous delivery: It is a process of building and delivering the software with an automated build, test, and deploy process. Each build can be initiated based on an event or or a time trigger. This allows the developers to focus on the actual logic and the development process instead of on regression testing, building, and deploying the code. We will, therefore, share the merits of using GitHub Actions to automate the deployment process to Firebase Hosting.

Why GitHub Actions?

GitHub Actions is  ready to use, requires no extra setup, and the integration and deployment scripts are a part of the existing repository.

Why Firebase Publish React plugin?

Firebase Publish React is one of the many plugins available in the GitHub marketplace that further simplifies the CI/CD process. It supports building and deploying React applications to Firebase Hosting without requiring any major setup or fuss.

Setting up a React application

Setting up a React application is super easy, when done right. If you have node and npm installed, then follow the steps below or begin by installing node + npm.

Development mode and production mode

When building a React app, you can use features like hot deploy to see the changes instantly, or to debug certain errors in the browser. The best practice, however, is to minimize the code and optimize it for better performance during the production.

Pro Tip: Add React Developer Tools to Chrome to debug your React application.

Add tests to your code

It is always a good practice to add tests to your code. It ensures that your code is not broken by other developers, when collaborating on a project like we frequently do with the team at Zemoso Labs and the client. It also ensures that you don’t get surprises when code from other developers is merged into the codebase.

We will make a simple button component and write a Snapshot Test, which will fail if anyone accidentally modifies the appearance or functionality of the button.

1. Open the newly created project in any integrated development environment (IDE) that supports React. I will be using Visual Studio (VS) Code for the rest of this article.

2. Create a button function component and its test file. 

MyButton.js hosted with ❤ by GitHub. View raw code here.

MyButton.test.js hosted with ❤ by GitHub. View raw code here

3. Run the tests

     npm test

4. This will create a folder called __snapshots__; commit this folder with your code.

5. Try to change the values in style object and run the tests again. The snapshot matching will fail this time. This ensures that your components are not disturbed by other developers. If it is, snapshot tests will fail.

In order to make valid changes that will pass the snapshot test, refer updating snapshots.

Add Firebase to the application

1. Follow the steps as outlined in Get started with Firebase Hosting

2. Use the build directory where specified in the above steps

3. To generate the Firebase token for CI/CD tools, refer here 

4. Store the token securely in local or remote storage, because once viewed it cannot be viewed again on the Firebase console

firebase login:ci

Add this token to GitHub secrets

1. Open the project on GitHub website

2. Go to settings -> Secrets -> New Secret

3. Name: FIREBASE_TOKEN

4. Value: Paste the token from above step

Adding FIREBASE_TOKEN as secret to GitHub

Setting up GitHub Actions

To add GitHub Actions to your project, simply create a folder .github/workflows in your root directory and add a file firebase-deploy.yaml

Code: react-firebase-deploy.yaml hosted with ❤ by GitHub. View raw code here

Breakdown of the actions file 

Keywords: 

1. on: Event that triggers these actions. Here, we are using a release type as a trigger. This workflow will trigger every time a release is published

2. jobs: This is a list of jobs that are to be run

3. <job-id>: In this case, deploy. Any other name can also be used for <job-id>

4. runs-on: Machine on which this action has to be run

5. steps: Sequence of steps to be performed in the action

6. uses: Using an in-built library of actions to perform a task. List of libraries can be explored in GitHub Marketplace for Actions

7. with: Any arguments that are required by the Actions Library to run

8. name: Name of the step

9. run: Run a particular command

Explanation:

1. In the first step, check out the code to the current working directory of the remote machine.

2. Install the node dependencies. This step is required for projects that do not have node_modules committed (almost all of them).

3. Run the tests to make sure that the code remains intact. This step will make sure that the GitHub Action workflow will fail soon after the test fails, and faulty code will not be published to Firebase Hosting.

4. The running test step can be removed in case tests are not added to the project.

5. Build and deploy the application on Firebase.

Running the Action

1. Once all the setup is done, push your code to GitHub

2. Create a new release, ideally named after the release version

Creating a release on GitHub

3. Wait for the action to complete; sit back and relax

Find this full project on GitHub

A version of this blog was published earlier on Medium. 

Recent Publications

ZEMOSO ENGINEERING STUDIO

Testing what doesn’t exist with a Wizard of Oz twist

October 12, 2022
7 min read
ZEMOSO ENGINEERING STUDIO

Beyond methodologies: Five engineering do's for an agile product build

September 5, 2022
6 min read
ZEMOSO ENGINEERING STUDIO

How we built a big data platform for a futuristic AgriTech product

June 3, 2022
8 min read
ZEMOSO NEWS

Zemoso Labs starts operations in Waterloo, Canada

May 25, 2022
5 min read
ZEMOSO ENGINEERING STUDIO

Honorable mention at O’Reilly’s Architectural Katas event

May 17, 2021
5 min read
ZEMOSO ENGINEERING STUDIO

Product dev with testable spring boot applications, from day one

May 4, 2021
5 min read
ZEMOSO ENGINEERING STUDIO

When not to @Autowire in Spring or Spring Boot applications

May 1, 2021
5 min read
ZEMOSO ENGINEERING STUDIO

Efficiently handle data and integrations in Spring Boot

January 24, 2021
5 min read
ZEMOSO ENGINEERING STUDIO

How to use BERT and DNN to build smarter NLP algorithms for products

February 14, 2020
12 min read
ZEMOSO ENGINEERING STUDIO

GraphQL — Why is it essential for agile product development?

April 30, 2019
12 min read
ZEMOSO ENGINEERING STUDIO

GraphQL with Java Spring Boot and Apollo Angular for Agile platforms

April 30, 2019
9 min read
ZEMOSO ENGINEERING STUDIO

Deploying Airflow on Kubernetes 

November 30, 2018
2 min read
ZEMOSO PRODUCT STUDIO

How to validate your Innovation: Mastering Experiment Design

November 22, 2018
8 min read
ZEMOSO PRODUCT STUDIO

Working Backwards: Amazon's Culture of Innovation: My notes

November 19, 2018
8 min read
ZEMOSO ENGINEERING STUDIO

Product developer POV: Caveats when building with Spark

November 5, 2018
2 min read

Want more best practices?

Access thought-leadership and best practice content across
the product development lifecycle

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

© 2021 Zemoso Technologies
Privacy Policy

Terms of Use
LinkedIn Page - Zemoso TechnologiesFacebook Page - Zemoso TechnologiesTwitter Account - Zemoso Technologies

© 2021 Zemoso Technologies
Privacy Policy

LinkedIn Page - Zemoso TechnologiesFacebook Page - Zemoso TechnologiesTwitter Account - Zemoso Technologies
October 14, 2022