This project was a personal idea to learn how to deploy a website from a GitHub repo to Vercel using GitHub Actions. I also used this project to test the website before deploying to Vercel as preview.
I know, it's a simple project, but it was very useful to learn how to deploy to Vercel using GitHub Actions.
First, you will need to have Node.JS minimum version 18.X installed on your computer. After that, you will need to follow the steps below:
- Clone the repo by using
git clone https://github.com/vboechat/react-pipeline.git - Install dependencies by using
npm install,yarn installorpnpm install - After that, you're ready to go, to start the project, you just need to run
npm run dev,yarn devorpnpm dev
To run tests, you just need to run npm run cypress:run, yarn cypress:run or pnpm cypress:run.
P.S.: If you want to open Cypress UI, just change from cypress:run to cypress:open.
In the workflow file, you can notice 4 secrets:
| Secret | How to get it |
|---|---|
| CYPRESS_RECORD_KEY | Create a project in Cypress Cloud and select "GitHub Action" |
| VERCEL_TOKEN | Create a token in Vercel in your account settings |
| VERCEL_ORG_ID | Read the P.S. 1 |
| VERCEL_PROJECT_ID | Read the P.S. 1 |
After obtaining these values, you can open your GitHub repository settings, go to "Secrets and variables", open "Actions" and click "New repository secret".
P.S. 1: To obtain this secret, open the project folder, install Vercel CLI and run "vercel link" in your console, a folder named .vercel will be created. A file will also be created with the org_id and project_id values. DON'T SHARE THESE VALUES
And others! :)