Installing Drupal 8 alongside React

Installing Drupal 8 alongside React

What do I want to achieve?

I want to install Drupal 8 alongside my existing installation of React Application Server.

What is Drupal 8 for?

Drupal 8 will work as backend for my React application.

What is my React application about?

It’s about demonstrating the use of React to fetch information about products from a Drupal backend and show it.

The React application will demonstrate the possibility to rank products by dragging and dropping their images.

You can see the application at work here: Rankit!

What is the architecture like?

There are many ways to describe it.

I’m going to focus on how the web server processes the requests coming from the browser.

Architecture Rankit Http Queries

As the application runs, there will be requests to the React Application Server meant to tell the browser what to display and how to interact with the user.

There will be requests to the same server to know how to fetch information about products from the Drupal backend.

When fulfilling these requests, the React Application Server will tell the browser that it has to send requests to the Drupal backend directly and will instruct the browser to do so.

The browser will send these requests to the Drupal backend following the instructions the React Application Server gave it.

From the image above you see that the web server forwards requests for the backend to the Php Application Server. This is due to Drupal being written in PHP. The Php Application Server runs every PHP file that needs to be executed.

The environment

Web server, Php Application Server and React Application Server run on a Debian 8 server. There is a MySQL server as well because Drupal needs it.

The web server root folder is /srv/sites/rankit.emanuelesantanche.com/.

The subfolder rankitapp contains everything the React Application Server needs to run.

The subfolder backend will contain the installation of Drupal 8 I’m going to perform.

Configure Nginx to run the Drupal backend

As I said above, the web server, in my case Nginx, will forward requests meant for Drupal to the Php Application server, which will run the php files containing Drupal’s logic.

I have to configure Nginx for it to do this.

The main part of the Nginx configuration I need is this one:

location /backend {
    if (!-e $request_filename) {
        # We need /backend here because the root is /srv/sites/rankit.emanuelesantanche.com/
        # The rewrite pattern strips "/backend" away because Drupal
        # wouldn't find a page like "/backend/user" in the database
        # The rewrite pattern will transform "/backend/user" into
        # "/user" and Drupal will find it
        rewrite ^/backend(.*)$ /backend/index.php?q=$1 last;
    }
}