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

By Arslan Ud Din Shafiq, Alibaba Cloud Tech Share Author. Tech Share is Alibaba Cloud’s incentive program to encourage the sharing of technical knowledge and best practices within the cloud community.

React is a JS library that is used to build user interfaces. It is mostly used in making single-page and mobile applications.

Webhook is a very friendly and helpful way to get notified when something happens. In a web application, when something happens or an event occurs a message is posted via URL. Sometimes you only need data when something happens, otherwise you don’t require any data. In conventional ways, a web application keeps fetching data from database rather waiting for any event which overwhelm the server by compromising more resources. Webhooks gives relaxation to server and notify when some event happens.

Nowadays, webhooks are very important because every application uses live notifications. Webhooks are very helpful in making real-time applications. It can receive real-time data and can do some meaningful working on that data. Webhooks allow you to provide API to others to extend your app.

When a developer makes changes in an application continuously, using webhooks can be very helpful, especially when a team of developers is working on a project. It can also be very helpful to integrate Slack notifications if the team is depending on backend software or API.

In this tutorial, I will be using an Alibaba Cloud Elastic Compute Service (ECS) instance with Ubuntu 16.04 installed on it. I will build a React app and add the code to GitHub repository. After this, I will configure Nginx server, GitHub and set-up webhook server so that whenever the code is modified, GitHub and webhook server can communicate. In the end, I will configure Slack server. When an app is deployed successfully, Slack will receive a notification.

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.

Install Nginx Server

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

Step 1:

To install execute the command.

Step 2:

Now you will need to start Nginx server by executing command below.

To check status of Nginx server, execute the command below.

To check installation, access IP address of your Alibaba Cloud ECS or your domain name that you have pointed to your IP address. In my case, I have accessed via domain name and the following screen loaded.

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.

Step 1:

To install Git execute the command.

Step 2 (Optional):

Now execute the commands below to configure Git by providing your name and valid email address so that commit messages may contain your correct information.

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.

Retrieve your preferred version’s script by running the command below.

Now run the script by command below.

To install execute the command.

Now Node.js has been installed successfully.

Install gcc and g++

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

Install Yarn

To install Yarn package manager, execute the commands below.

For working of npm, you will require to install build-essential. To do so, execute the command below.

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.

To add create-react-app node module to global repository, you will have to make it available in your shell by executing command below.

To create the project named aareez-project, execute the command below.

Navigate to created project directory by using the command below.

Now initialize repository with git in your aareez-project directory. To do so, execute the command below.

Now add remote origin along with your GitHub URL.

Now stage the files in project directory.

Commit them and push them to repository by executing the following commands.

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.

Navigate to root directory

Now clone files from Github.

You can use the above git link to clone the project.

Navigate to clone directory by command.

To create the folder which contains pages like index.html, JS files and CSS files, so that Nginx may serve, you will have to run build command of yarn.

Now you will have to create symlink for the files to make them publicly accessible via Nginx. Nginx will serve the application in directory /var/www. For creating symlink, execute the following command.

To grant permissions so that Nginx may serve symlink correctly, execute the following command.

Now ## configure the nginx server block in available sites directory. To do so, execute the following command and a file will be opened.

Copy the following text in opened file and change softpedia.xyz with your domain name or ECS IP address and save the file.

Now create symlink for react configuration in available sites directory to enabled sites directory.

To check whether the nginx syntax is correct or not, you can run the following command.

To load the configurations, restart your nginx server.

To confirm whether you have configured everything properly or not, you can access your IP address or domain in your browser, you will see the following screen.

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.

Navigate to home

Download webhook.

Extract downloaded folder.

Move the binary to /usr/local/bin to make it available in your environment.

Remove the downloaded folder.

Now create directories for scripts and hooks in opt folder where you mostly place third party applications.

Assign privileges for these directories to your username.

When GitHub sends HTTP request, webhook will be triggered on the basis of rules defined in JSON array file. Now you will have to create configuration file for webhooks. To do so, execute the command below.

Copy the following text in the opened file.

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.

Copy and paste the code below in opened file.

Now make the script executable by command below.

As Nginx is configured to serve react-example in /var/www folder, when the above script will be executed, the build directory will be updated and nginx will server new files.

If everything works properly, you will see the screen below.

For testing it, keep the webhook running, open a duplicate session and execute the commands below.

You should see the following screen.

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.

You will see Slack webhook settings. Note the Webhook URL. Open the redeploy.sh script using the command.

Remove the previous code and add the following code. Remember to replace slack_webhook_url with your Webhook URL.

For testing it, let the webhook running, open duplicate session and execute the commands below.

That’s it! In your Slack channel, you will receive notifications and messages regarding application build that has started and finished.

Reference:https://www.alibabacloud.com/blog/how-to-deploy-react-apps-using-webhooks-and-integrating-slack-on-ubuntu_594116?spm=a2c41.12228415.0.0

Follow me to keep abreast with the latest technology news, industry insights, and developer trends.

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