In this tutorial, I’m going to show you how to create a simple workflow that I use on my personal projects with React.
This workflow created on GitHub Actions will be responsible for automatically test the source code, generate a test coverage report and upload it on Codecov, build and deploy the project on GitHub Pages. All these jobs are activated by a push or pull request event on master branch.
First, on your React App GitHub repository, navigate to the main page of the repository, click Actions.
Then, you’ll see suggestions of CI templates that are the best fit for your project. You can use workflow templates as a starting place to build your custom workflow.
In this case, click Set up this workflow, under the name of the template Node.js.
Finally, you’ll see a default YAML file like this:
name: Node.js CI
Lets update workflow abit to add test coverage step in our workflow
First, go to the Codecov website and create an account, you can use your GitHub account to sign up.
Next, access your account on the website, click Repositories, after, click Add new repository and choose the repository you want to use. (we will setup secret in abit)
gh-pages and add
deploy to scripts in
$ npm install --save gh-pages
Add the following scripts in your package.json:
"predeploy": "npm run build",
Now we are going to create a new access token, in order to deploy our application through the workflow.
Go to the Personal access tokens area in the Developer settings of your GitHub profile and click Generate new token.
Copy the generated token.
On GitHub, navigate to the main page of the repository, under your repository name, click Settings. In the left sidebar, click Secrets. And finally, Click Add a new secret.
Type a name for your secret in the Name input box, like
Enter the value for your secret (which should be the personal access token we just created).
Click Add secret.
Your last step on your workflow should be some like this:
- name: Deploy
The name and email information need not necessarily be your real information. And you must replace ACTIONS_DEPLOY_ACCESS_TOKEN with the name of the secret you just created.
After adding the deploy command on your workflow, click Start commit, and click Commit new file.
Your final workflow file should be like this:
Now, in every push or pull request event on master branch, the CI/CD workflow will be activated. And you will be able to see if all steps have passed or not.