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.
.svg)
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 is super easy, when done right. If you have node and npm installed, then follow the steps below or begin by installing node + npm.
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.
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.
.svg)
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.
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
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
To add GitHub Actions to your project, simply create a folder .github/workflows in your root directory and add a file firebase-deploy.yaml
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
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.
1. Once all the setup is done, push your code to GitHub
2. Create a new release, ideally named after the release version
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.
.png)
.png)
.svg)
.svg)
.svg)
.png)
.png)
.png)
%20(2).svg)
.svg)
.jpg)
.svg)
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: 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 is super easy, when done right. If you have node and npm installed, then follow the steps below or begin by installing node + npm.
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.
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.
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.
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
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
To add GitHub Actions to your project, simply create a folder .github/workflows in your root directory and add a file firebase-deploy.yaml
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
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.
1. Once all the setup is done, push your code to GitHub
2. Create a new release, ideally named after the release version
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.
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: 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 is super easy, when done right. If you have node and npm installed, then follow the steps below or begin by installing node + npm.
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.
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.
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.
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
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
To add GitHub Actions to your project, simply create a folder .github/workflows in your root directory and add a file firebase-deploy.yaml
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
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.
1. Once all the setup is done, push your code to GitHub
2. Create a new release, ideally named after the release version
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.
.svg)
.svg){kind=small}
.png){kind=small}
