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.

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;
    }
}

If I don’t add this clause to the Nginx configuration for the application, when the client sends a request meant for the backend, it goes to React instead.

This configuration is telling Nginx that, when the client asks for an URL that begins with /backend, it has to forward it to Drupal.

Since the web server root is /srv/sites/rankit.emanuelesantanche.com/, the URL /backend will point to the folder /srv/sites/rankit.emanuelesantanche.com/backend.

This is the folder where Drupal will be installed.

Inside that folder there is a file called index.php which is the entry point for every Drupal processing. Nginx has to take the full URL the client asked for and pass it as a parameter to the php file index.php.

Actually Nginx has to strip the /backend part. If the client wants the URL /backend/user to access the user page in Drupal, the latter won’t understand.

When Nginx strips away the /backend part, Drupal gets /user and that’s something Drupal will understand.

There is more to configure than this. Nginx needs to know how to pass Drupal’s php files to the Php Application server for it to run them. I omit this additional configuration.

Check that composer is installed

To install Drupal 8, I’m going to use Composer. The latter is a dependency manager. It will take care to download and install all modules Drupal 8 needs to run.

On my server I already have Composer installed.

I got it from https://getcomposer.org/download/ under the section “Manual Download” where you can download the phar file.

I put it in a folder where it will always be found because the folder is included in the PATH environment variable.

Stop Web server, Php server and MySQL server

The installation was failing if these servers were running because it needed a lot of memory.

I stopped the servers with these commands:

  1. root@FREEDOMANDCOURAGE:/srv/scripts# service nginx stop
  2. root@FREEDOMANDCOURAGE:/srv/scripts# service php5-fpm stop
  3. root@FREEDOMANDCOURAGE:/srv/scripts# service mysql stop

Install Drush with Composer

Drush is a Drupal tool to use on the command line to perform installations and many other useful tasks.

I’ll use it to download Drupal itself.

With this command I install Drush:

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com# composer.phar global require drush/drush:~8

Use Drush to install Drupal

With Drush I install Drupal:

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com# composer.phar global update
  2. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com# drush dl drupal-8

The global update command run by Composer updates all packages Composer installed, just to have an up-to-date situation.

I restart the servers:

  1. root@FREEDOMANDCOURAGE:/srv/scripts# service mysql start
  2. root@FREEDOMANDCOURAGE:/srv/scripts# service php5-fpm start
  3. root@FREEDOMANDCOURAGE:/srv/scripts# service nginx start

The drush command that downloaded Drupal created the folder drupal-8.4.4 (/srv/sites/rankit.emanuelesantanche.com/drupal-8.4.4).

I need it renamed to backend because, as I said above, backend is the name of the folder that will contain my Drupal installation.

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com# mv drupal-8.4.4/ backend

Creating MySQL database

Drupal needs a MySQL database to run.

I log into my MySQL server using the command:

  1. root@FREEDOMANDCOURAGE:/srv/scripts# mysql -u root -p

I create the database for Drupal with these MySQL commands:

  1. CREATE DATABASE drupal4rankit
  2. CREATE USER 'drupal4rankit'@'localhost' IDENTIFIED BY 'passwordhere';
  3. GRANT ALL PRIVILEGES ON * . * TO 'drupal4rankit'@'localhost';

Making sure that the web server can access the backend folder

I make sure that the web server can access the backend folder and its subfolders:

  1. root@FREEDOMANDCOURAGE:/srv/sites/rankit.emanuelesantanche.com/backend# chown -R www-data:www-data .

Configuring Drupal

I point my browser to rankit.emanuelesantanche.com/backend/core/install.php to run Drupal scripts for installation. Drupal needs to create its tables in the MySQL database.

Drupal asks for some settings that are quite straightforward to enter.

The backend is ready

If, now, you browse to http://rankit.emanuelesantanche.com/backend/, you find the Drupal backend running.

 

Leave a comment

Your email address will not be published. Required fields are marked *