CI/CD for React.js
With Buddy, you can create a pipeline that builds, tests, and deploys React applications on a push to Git. The configuration is super simple and takes 10 to 15 minutes.
Image loading...
1. Select your Git repository
Buddy supports all popular Git hosting providers, including GitHub, Bitbucket, and GitLab. You can also use your own private Git server, or host code directly on Buddy.
Image loading...
2. Add a new delivery pipeline
Enter the pipeline's name, select the trigger mode, and define the branch from which Buddy will fetch your code:
Image loading...
Trigger modes
- Manually (on click) — recommended for Production
- On events (automatic) — recommended for Development
- On schedule (on time interval) — recommended for Staging/Testing
3. Add actions
Buddy lets you choose from dozens of predefined actions. In this example, we'll add 4 actions that will perform the following tasks:
- Build and test React app: download dependencies (npm, yarn, etc.), run tests, compile assets (npm tasks, webpack, etc.)
- Upload code to server together with compiled assets
- Restart application
- Send notification to Slack
3.1 Build your React application
Look up and click Node.js on the action list to add it to the pipeline:
Image loading...
The Run tab lets you determine the commands to execute. The default commands are:
bashnpm install npm test npm run build
$$$
Image loading...
3.1.2 Node version
You can change the version of Node and install missing packages & tools in the runtime environment tab:
Image loading...
3.2 Deploy application to server
The compiled application needs to be uploaded to the server. Head to the Transfer section and select your upload action (SFTP in our case):
Image loading...
When adding the action you can choose what and where should be uploaded:
Image loading...
3.3 Restart application
Once the app is deployed, you can run additional commands on your server with the SSH action:
Image loading...
Enter the commands to execute in Run CMDs and configure authentication details in the Target tab:
Image loading...
3.4 Send notification to Slack
You can configure Buddy to send your team a message after the deployment. In this example we'll use Slack:
Image loading...
4. Summary
Congratulations! You have just automated your entire delivery process. Make a push to the selected branch and watch Buddy fetch, build, and deploy your project. With Continuous Delivery applied, you can now focus on what's really important: developing awesome apps! 🔥
Last modified on Sep 23, 2024