How to Deploy React Apps Using Webhooks and Integrating Slack on Ubuntu

Prerequisites

  1. You must have Alibaba Cloud Elastic Compute Service (ECS) activated and verified your valid payment method. If you are a new user, you can get a free account in your Alibaba Cloud account. If you don’t know about how to setup your ECS instance, you can refer to this tutorial or quick-start guide. Your ECS instance must have at least 2GB RAM and 1 Core processor.
  2. A domain name registered from Alibaba Cloud. If you have already registered a domain from Alibaba Cloud or any other host, you can update its domain nameserver records.
  3. Domain name must be pointed to your Alibaba Cloud ECS’s IP address
  4. Access to VNC console in your Alibaba Cloud or SSH client installed in your PC
  5. Set up your server’s hostname and create user with root privileges.

Update Your Ubuntu System

Before proceeding with installation of any kind of package, use the following command to update your Ubuntu system. To execute this command, remember to login from non-root user with sudo privileges. After execution of this command, you will be prompted to Is this ok? Type ‘y’ and hit Enter.

# sudo apt update && sudo apt upgrade

Install Nginx Server

You will be required to install nginx server, for this purpose, you will need to follow the steps below.

# sudo apt-get install nginx
# sudo systemctl start nginx
# sudo systemctl status nginx

Install Git

You will need to install git on your server as well as local machine. To install and configure Git, follow the steps below.

# sudo apt-get install git
# git config --global user.name "Aareez"
# git config --global user.email "xyz@example.com"

Install Node.js

Node.js is a cross platform open source JS runtime environment that runs JS code outside the browser. A version of Node.js is available in Ubuntu’s default repository. To install Node.js using PPA follow the steps below.

# curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup.sh
# sudo bash nodesource_setup.sh
# sudo apt-get install -y nodejs

Install gcc and g++

We may also need development tools to build native addons. To install them, execute the command.

# sudo apt-get install gcc g++

Install Yarn

To install Yarn package manager, execute the commands below.

# curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
# echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
# sudo apt-get update && sudo apt-get install yarn
# sudo apt-get install build-essential

Create a React App Using create-react-app

First of all, you will build an application to test your webhooks with create-react-app. After this, you will have to create a GitHub repo and push the code of the project to that repo.

# sudo npm install -g create-react-app
# sudo create-react-app aareez-project
# cd aareez-project
# sudo git init
# sudo git remote add origin https://github.com/itsaareez1/react-example
# sudo git add
# sudo git commit -m "initial commit"
# sudo git push -f origin master

Set up Directory for React and Configure Nginx Server

In this part, you will need to fetch clone of react app from your Github repo.

# cd ~
# sudo git clone https://www.github.com/itsaareez1/react-example
# cd react-example
# sudo yarn && sudo yarn build
# sudo ln -s ~/react-example /var/www/react-example
# sudo chmod -R 755 /var/www
# sudo nano /etc/nginx/sites-available/react
server {
listen 80;
root /var/www/react-example/build;
index index.html index.htm index.nginx-debian.html;
server_name softpedia.xyz; location / {
try_files $uri /index.html;
}
}
# sudo ln -s /etc/nginx/sites-available/react /etc/nginx/sites-enabled/react
# sudo nginx -t
# sudo systemctl restart nginx

Install and Configure Webhooks

The HTTP servers with configurable endpoints are called hooks. Webhook server executes customizable code adhering to set of configurable rules when some HTTP requests are received.

# cd ~
# sudo wget https://github.com/adnanh/webhook/releases/download/2.6.6/webhook-linux-amd64.tar.gz
# sudo tar -xvf webhook-linux-amd64.tar.gz
# sudo mv webhook-linux-amd64/webhook /usr/local/bin
# sudo rm -rf webhook-linux-amd64*
# sudo mkdir /opt/scripts# sudo mkdir /opt/hooks
# sudo chown -R aareez:aareez /opt/scripts
# sudo chown -R aareez:aareez /opt/hooks
# sudo nano /opt/hooks/hooks.json
[
{
"id": "redeploy-app",
"execute-command": "/opt/scripts/redeploy.sh",
"command-working-directory": "/opt/scripts",
"pass-arguments-to-command":
[
{
"source": "payload",
"name": "head_commit.message"
},
{
"source": "payload",
"name": "pusher.name"
},
{
"source": "payload",
"name": "head_commit.id"
}
],
"trigger-rule":
{
"and":
[
{
"match":
{
"type": "payload-hash-sha1",
"secret": "654321Ab",
"parameter":
{
"source": "header",
"name": "X-Hub-Signature"
}
}
},
{
"match":
{
"type": "value",
"value": "refs/heads/master",
"parameter":
{
"source": "payload",
"name": "ref"
}
}
}
]
}
}
]

Configure GitHub Notifications

To configure your GitHub repo for HTTP requests on any commit to master happens, you will need to follow the steps below.

  1. Open your GitHub repository and click Settings as shown below.
  1. After this, go to Webhooks section.
  1. Click Add webhook button.
  1. For the Payload URL, type http://your_server_ip:9000/hooks/redeploy-app. Remember to replace softpedia.xyz with your ECS IP address or domain. For Content type, choose option application/json. In hooks.json file, I have used secret key 654321Ab, but you can use any of your choice. For secret key, I will use 654321Ab. After that select Just the push event option. Tick active checkbox and click Add webhook button.
  1. Now whenever you or someone makes a commit to your GitHub repository, GitHub will send a POST request with Payload which will contain the information regarding the commit event.

Write Redeploy Script

As you have pointed your webhook to redeploy.sh script, you will have to create script. Execute the command below to open file for writing script.

# sudo nano /opt/scripts/redeploy.sh
#!/bin/bash -efunction cleanup {
echo "Error occoured"
# !!Placeholder for Slack notification
}
trap cleanup ERR
commit_message=$1 # head_commit.message
pusher_name=$2 # pusher.name
commit_id=$3 # head_commit.id
# !!Placeholder for Slack notificationcd ~/react-example/
sudo git pull origin master
sudo yarn && yarn build
# !!Placeholder for Slack notification
# sudo chmod +x /opt/scripts/redeploy.sh
## run webhook server to test configuration. Execute the command below for it.
# webhook -hooks /opt/hooks/hooks.json -verbose
# sudo git commit --allow-empty -m "Trigger notification"
# sudo git push origin master

Integrate Slack Notifications

To add Slack notifications, modify redeploy.sh to send and receive notifications from Slack. To configure Slack, follow the steps below.

  1. Click dropdown menu on top left and select Customize Slack.
  2. Now to go to Configure Apps.
  3. In Manage panel, select Choose Integration.
  4. Search for Incoming Hooks integration.
  5. Click Add Configuration.
  6. Choose or create channel.
  7. Click Add Incoming Webhooks integration.
# sudo nano /opt/scripts/redeploy.sh
#!/bin/bash -efunction cleanup {
echo "Error occoured"
curl -X POST -H 'Content-type: application/json' --data "{
\"text\": \"Error occoured while building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
\"username\": \"buildbot\",
\"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
}" your_slack_webhook_url
}
trap cleanup ERR
commit_message=$1 # head_commit.message
pusher_name=$2 # pusher.name
commit_id=$3 # head_commit.id
curl -X POST -H 'Content-type: application/json' --data "{
\"text\": \"Started building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
\"username\": \"buildbot\",
\"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
}" your_slack_webhook_url
cd ~/react-example/
sudo git pull origin master
sudo yarn && sudo yarn build
curl -X POST -H 'Content-type: application/json' --data "{
\"text\": \"Build and deploy finished with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
\"username\": \"buildbot\",
\"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
}" your_slack_webhook_url
# sudo git commit --allow-empty -m "Trigger notification"
# sudo git push origin master

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com