CI/CD for React.js
Buddy lets you create delivery pipelines that will build, test and deploy your React application on a single push to a branch. The pipelines consist of actions that you can configure depending on your needs.
Example React pipeline
The tool also features dedicated actions for JS bundlers, task runners, and testing tools, such as Gulp, Grunt, Webpack, ESLint, and Cypress.
Test tools available in Buddy
This guide is also available as a video tutorial here:
Configuration is very easy and takes only a couple of minutes.
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.
Supported Git providers
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:
Exemplary pipeline settings
Branch assignment — this is the branch from which Buddy will deploy. If you set the trigger mode to On push, Buddy will execute the pipeline upon every push to that branch.
Trigger modes
- Manual (on click) — recommended for Production
- On push (automatic) — recommended for Development
- Recurrently (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
React builds can be handled with the Node action. Here you can choose the details of the environment and determine the commands to execute. Make sure to add npm run build at the end of the command list:
npm install npm test npm run build$$$
Default build commands
If your tests require a database to run, you can attach it in the Services tab:
Services tab
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):
File transfer actions
When adding the action you can choose what and where should be uploaded. The Source path
Configuring SFTP action
Buddy's deployment is based on changesets. This means only changed files are deployed, which makes it lightning fast ⚡️.
3.3 Restart application
Once the app is deployed, you can run additional commands on your server with the SSH action:
Selecting SSH action
Enter the commands to execute and configure authentication details:
Restarting the applicatin
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:
Notification actions
If you add this action to Actions run on failure, Buddy will only send a message if something went wrong with your build or deployment.
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! 🔥
Bear in mind that this article is only a brief example of what Buddy can do. You can create additional pipelines for staging and production environments, integrate with your favorite services (AWS, Google, Azure), trigger tests on pull requests, build Docker images, and push them to the registry—the possibilities are unlimited.
If you want us to create a delivery pipeline for your project, drop a line to support@buddy.works – we'll be happy to help!
Last modified on July 13, 2022