CI/CD for React.js
React.js is a popular JavaScript library commonly used to build user interfaces.
Its key features include React Components for independent development of user interface elements; JSX, allowing you to write HTML within JS files, the React DOM, a virtual Document Object Model which improves performance, and Hooks which enable reusing functional logic across the components.
With Buddy, you can automate your entire React delivery process, including building and deploying the application. You can also configure dedicated React testing pipelines for different types of use cases, including unit testing, end-to-end tests, and integration testing.
Example React pipeline
1. Select your Git repository
The first step is hooking up the repo with your JavaScript code. 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 code:
Adding a new pipeline
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:
- React testing and building: download dependencies, run tests (unit test, yarn test, etc.), compile assets (npm build, webpack, etc.)
- Upload code to server together with compiled assets
- Restart application
- Send notification to Slack
3.1 Build your React application
Since React is Node-based, look up and click Node.js on the action list to add it to the pipeline:
Action list
The Run tab lets you determine the commands to execute. The default commands are:
npm install
npm test
npm run build
$$$
Default build commands
3.1.2 Node version
You can change the version of Node and install required packages (e.g React testing library) in the runtime environment tab:
Node action image
3.2 Deploy application to server
Once building and testing React has finished, the app needs to be uploaded to the selected staging or production environment. Head to the Transfer section and select your upload action (SFTP in our case):
Transfer action
When adding the action you can choose what and where should be uploaded:
SFTP action configuration
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 in Run CMDs and configure authentication details in the Target tab:
Restarting the application
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
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: providing the end user with awesome apps! 🔥
Additional resources
Last modified on February 26, 2024