This content originally appeared on DEV Community and was authored by Eshank Vaish
As the complexity and team size of a project grows, it becomes increasingly important to ensure the code being developed doesn’t break the existing code. Along with that, it’s also important to ensure that the code follows the coding standards defined for the project along with automatic deployment to the development/staging environments as soon as the code is merged on the default branch. And if the project follows Trunk-Based Development, it becomes even more important to ensure everyone follows the defined processes. This is the exact problem that can be solved using Github Actions.
What is CI/CD?
CI stands for Continuous Integration wherein incremental code changes are done frequently and reliably while CD stands for Continuous Delivery / Continuous Deployment wherein the code changes are delivered or deployed to development or staging environments as soon as they are merged.
What are Github Actions?
Github Actions is a CI/CD platform that allows us to build automated pipelines for code testing, building, deployments, and many more. Github Actions are not limited to React apps and can be used for applications based on other frameworks as well. Jenkins is one of the alternatives to Github Actions that can be used for setting up the CI/CD pipeline.
Using Github Actions for CI/CD
Github Actions can be set up by adding the yml files for the workflows in the .github/workflows directory at the root of the project. For the course of this article, we would be using CI.yml for the Continuous Integration workflow and CD.yml for the Continuous Deployment workflow.
Setting up the CI Workflow
The CI.yml would be responsible for executing the workflow whenever a pull request or a push event is registered against the main (default) branch. The CI workflow would consist of executing the test cases, checking the linting and testing the build. If you want to setup ESLint and Prettier for lint do checkout:
Set Up ESLint and Prettier in a React App with Absolute Imports (2022)
As an add-on for increased efficiency, the given workflow file also implements caching of dependencies to make the workflow more efficient (Caching Dependencies in Github Actions) because by default Github actions use a fresh virtual environment that downloads and reinstalls all the dependencies each time the actions are executed.
Setting up the CD Workflow
The CD.ymlwould be responsible for the deployment workflows like deploying the code in development or staging environments along with executing the CI workflow as well. The deployment script might require some secret environment variables that can be added via Github Encrypted Secrets under the Settings > Secrets > Actions.
Here is the configuration for the CD pipeline that executes once the CI workflow has been completed on the main branch.
One thing worth mentioning here is that if the push to the defined branches is restricted via a pull request only (Github: Require pull request before merging) then we won’t require to execute the CI workflow again and just install the dependencies and proceed with the build and deployment but since the majority of us don’t use that in general so the CI workflow would get executed before the deployment step.
Adding Workflow Status Badges
How about displaying the workflow status badges in the Readme itself? It can be done by adding the URL given below to the Readme and replacing the placeholder values with the required values.
// Example Workflow Badge Url:
)
Once added, the badges would display the Pass/Fail status of the workflows in the Readme itself along with the name of the workflow as shown in the attached image.
Conclusion
Once set up, the CI workflow would be executed when a pull request is raised against the listed branches or a push event is received; the CD workflow would be executed when the CI workflow is completed on the listed branches and the same can be monitored using the Actions tab on the repository homepage as shown in the image given below.
As always, here is a link to the complete setup code on Github.
Thanks for reading. Do share your thoughts on using Github Actions for setting up automated pipelines for CI/CD.
Want to connect? React out on Twitter, LinkedIn or in the comments below!
This content originally appeared on DEV Community and was authored by Eshank Vaish
Eshank Vaish | Sciencx (2022-07-21T18:48:00+00:00) How to Set up Github Actions for CI/CD in React Apps. Retrieved from https://www.scien.cx/2022/07/21/how-to-set-up-github-actions-for-ci-cd-in-react-apps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.