Hey everyone! This post is part of Introduction to StewardX series.
In this tutorial, I'll show you how can you build your own CI, super easy.
All you need is:
- StewardX
- A Linux server (preferably with sudo access)
- Docker
- NodeJS - for building React of course 😊
My server's OS is Debian flavored (Ubuntu) but you should be able to find the installation commands of the packages for your own distribution just by a quick search, if not please leave a comment so I can help you. Okay here we go!
Install Nginx
Pretty straightforward. Just run the command below if Nginx is not installed on your server:
$ sudo apt update
$ sudo apt install nginx
Now you should be able to access your server via http, just navigate to
http://yourserverip
And you'll be presented Nginx's default welcome page. If not, you please check if your ports are not blocked and nginx is installed correctly. You can follow the amazing tutorial by DigitalOcean to configure ports for nginx.
Note: I'm not affiliated with DO in any manners, I just like their tutorials.
Once you got Nginx working proceed to the next step:
Configuring Nginx to serve your React app
Now, for more detailed explanation you can follow this tutorial on DigitalOcean. But I'll be demonstrating how you can configure it here too.
To keep it simple and fast, I won't be demonstrating the server blocks but in production you should use them! For now, I'm just going to use the default one.
Open /etc/nginx/sites-enabled/default
with your favorite editor.
$ sudo nano /etc/nginx/sites-enabled/default
If you scroll down, you'll see this specific line:
root /var/www/html;
Okay this line means that Nginx will serve the files it found in that specific directory. So we'll move our built files there. If you want, you can change the directory I won't be changing it for this tutorial. Moving on!
Building our React app
I'll be using the documentation repository of StewardX for demonstration purposes. It's a React app too 😊
$ cd
$ git clone https://github.com/gokayokyay/stewardx-docs
$ cd stewardx-docs
$ npm install # or yarn
Okay now I can build my app
$ npm run build # or yarn build
You'll see a build
folder has been created. Great!
Installing and Running StewardX
Head over to releases page of StewardX and download the latest binary, it'll have a name like: stewardx_${version}_${os}_${arch}
. At the time of writing, the latest binary is named: stewardx_v0.1.2_linux_x64
. I suggest that you download it to a directory. I'll be creating a new one:
$ cd
$ mkdir stewardx
$ cd stewardx
$ wget https://github.com/gokayokyay/stewardx/releases/download/v0.1.2/stewardx_v0.1.2_linux_x64 -O stewardx
$ chmod +x stewardx
Since it's not even in beta, you might have to build it from source, to do it please follow this link: Building it from source.
Now, you'll need to have a PostgreSQL instance running to start StewardX. You can get a free one or start your own by running:
docker run --rm -P -p 127.0.0.1:5432:5432 -v "$HOME/postgres-data:/var/lib/postgresql/data" -e POSTGRES_PASSWORD="1234" --name pg postgres:alpine
NOTE: DON'T USE THIS COMMAND FOR PRODUCTION, PLEASE! IT'S PASSWORD IS 1234 😭
You'll need your database URL. If you run the command above, then it is:
postgresql://postgres:1234@localhost:5432/postgres
Now run this command while you're still at the same directory with stewardx
.
STEWARDX_DATABASE_URL=postgresql://postgres:1234@localhost:5432/postgres ./stewardx
If you see no output, then it means it's working! 😊
Creating the build script
I'll create a new a directory for the script
$ cd
$ mkdir ci-scripts
$ cd ci-scripts
$ touch react-ci.sh
$ chmod +x react-ci.sh
Now open the script with your favorite editor and paste the following:
#!/bin/bash
PROJECT_DIR_NAME=stewardx-docs
PROJECT_GIT_URL=https://github.com/gokayokyay/stewardx-docs
PROJECT_PARENT=$HOME/
DEPLOY_DIR=/var/www/html/
We've just defined the variables here, moving on:
...
cd $PROJECT_PARENT
if [ -d "$PROJECT_PARENT/$PROJECT_DIR_NAME" ]
then
echo "Directory ${PROJECT_DIR_NAME} exists. Skipping git clone..."
cd $PROJECT_DIR_NAME
git stash
git pull
else
echo "Directory ${PROJECT_DIR_NAME} doesn't exists, cloning it..."
git clone $PROJECT_GIT_URL
cd $PROJECT_DIR_NAME
fi
We pull the latest changes if available. Time to build it
...
echo "Cleaning node_modules for a fresh start!"
rm -rf node_modules
echo "Installing the modules..."
npm install
Documentation repository don't have any tests, so I'm skipping test command:
...
echo "Now building it, this can take a while"
npm run build
echo "Cleaning old files in serve directory"
rm -rf $DEPLOY_DIR/*
echo "Okay, now moving the artifacts into the serve directory."
mv build/* $DEPLOY_DIR
echo "Done."
And save it.
Issue this command:
$ pwd
and save it's output for the next step.
Now to test our script, just run
./react-ci.sh
Go check your website http://yourserverip
if it works, now it's time to
Create a webhook
Get the output of pwd
command from previous step. To add a webhook to StewardX we can either use it's panel (needs to be built) or just send a request to it by any web client, I'll be using curl:
curl --header "Content-Type: application/json" -X POST --data '{"task_name": "React app CI", "frequency": "Hook", "task_type": "CmdTask", "task_props": {"command":"/bin/bash #pwd_output#"}}' http://localhost:3000/tasks
Change #pwd_output# with the output you saved from previous step mine was: /root/ci-scripts/react-ci.sh
(yup used root, I like danger)
This command will output an id, save it for the last step:
Using the webhook from GitHub
Now, it is time to add the webhook to the GitHub. Navigate to your project's repository, and click settings.
Navigate to 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 http://mydomain.com:3000/execute/c99ff533-d3c2-4ee3-9b8f-a972a9db00db
.
And congratulations! You've created your own CI!
For more information and documentation of StewardX, please visit https://stewardx.dev.
I really appreciate if you leave a feedback 😊 Stay safe!
Top comments (0)