For this tutorial, we'll create a CI/CD for a React application. In fact, this is how the CI of this documentation made. It's docusaurus, which is essentially a React application. Anyway let's begin!
- Up and running instance of StewardX that runs on a server
- Some way to deploy your React application.
For the sake of simplicity, let's assume that React application is server through Nginx.
To set up Nginx to serve a react app, you can follow the amazing tutorial on DigitalOcean.
Create a shell script in some directory.
Commands above do the following in order:
- Change current directory to $HOME directory
- Create a directory named
ci-scriptsthat'll hold the scripts
- Change current directory to
- Create a file named
- Add execute permission to the file
The script will do these things:
- Clone or pull the repository
- Install the dependencies
- Run tests (Skipping this step, since the project just has been created, assuming you've followed the nginx tutorial on digital ocean.)
- If successful issue the build command
- Then deploy the app - will demonstrate for nginx
Okay, first step is to clone or pull the repository. For tha sake of simplicity, the repository in this tutorial is the documentation repository of StewardX!
Starting with shebang, then define the variables which will be used.
Now, pulling or cloning the repository
Now, installing the dependencies removing the old ones
Since there are no tests, issuing the build command
After build is completed, now it's time to move the artifacts to the deploy directory.
After all, your script will look like this:
Go ahead and run your script
If it's successfully building and deploying the app, now it's time to create a hook.
Okay, by this time, you have a StewardX instance up and running, a bash script that builds and deploys your app.
Now, if you've built and used the panel, it's piece of cake for you to add the CmdTask to StewardX.
- Navigate to
Create a new taskpage from sidebar
- Give your task a name
- And for the command, enter
/bin/bash $HOME/ci-scripts/react-ci.shor point wherever your script is located at
If you do not want to use the panel you can run the following command:
http://localhost:3000/tasks according to your StewardX host and port. Save the ID in response to use it on GitHub.
Now, it is time to add the webhook to the GitHub. Navigate to your project's repository, and click settings.
Webhooks section from the left panel. Click
Add webhook button found on the top of the page. When the page opens up, you'll want to fill the
Payload URL with
yourserversurl:STEWARDX_PORT/execute/id_of_your_task, so it'll look something like
And congratulations! You've created your own CI!