React Express developement & production on Plesk

In this tutorial we are going to use React Boilerplate to create the app.Also we are going to change some changes to core react boiler plate to fit the app into Plesk server.

react-boilerplate/react-boilerplate

Clone Repository

First You have to create a sub domain for developement for react app. Sub domain for developement should be random & hard to guess like password [dev_password].example.com

Create a directory named react and point that folder to sub domain [dev_password].example.com. Now clone React boiler plate repository https://github.com/react-boilerplate/react-boilerplate using git extension or Manually upload entire contents to subdomain.

clone git repository https://github.com/react-boilerplate/react-boilerplate

Now For plesk server, express server file need to be in root directory. So we have to move the index.js file in server folder to root folder of the domain (react folder).

Then update logger, argv , port, serup variables in index.js

const logger = require(‘./logger’);
const argv = require(‘./argv’);
const port = require(‘./port’);
const setup = require(‘./middlewares/frontendMiddleware’);

to below variables, so that it will get files correctly.

const logger = require('./server/logger');
const argv = require('./server/argv');
const port = parseInt(process.env.PORT || '3000', 10);
const setup = require('./server/middlewares/frontendMiddleware');

Now create file .npmrc in react folder. Now open that file and past below contents to that file

scripts-prepend-node-path=true

This .npmrc file is used to run scripts in package.json for plesk environment.

Now create a public folder in react folder. This public folder should not contain index.html file. This folder will serve the static files, but it is actully not used by react boilerplate.

All these changes to react boilerplate are made in github repository https://github.com/muthu32/react-boilerplate

Development Server

Now open nodejs extension page for domain. Now Change Document Root to folder react/public and Application Root to react. Also change Application Mode to developement and Application Startup File to index.js. Finally click on "Enable Node.js" button in Node.js extension for subdomain.

Plesk node.js extension for development server

Now press on "Run Script" button in Node.js extension for subdomain. Here you can run scripts defined in package.json file. This button is also used to build our app and setup the app. Enter setup in Script name and parameters field and press Run to set up our app. After running setup script, node_modules folder will be created in root folder of subdomain. Here all our npm dependencies will be stored for the app.

setup domain using Run Script

Now open Applicaiton URL [dev_password].example.com to view our Development app. Upon updating components in react/app/components, our app will automatically reload on [dev_password].example.com (Hot Reload)

Production Server

For production server, we will use main domain example.com to serve it to clients.Now open nodejs extension page for domain. Now press on “Run Script”button in Node.js extension for main domain.Enter build in Script name and parameters field and press Run to build our app. A build folder will be created in root folder of domain after running build script.

build app using Run Script

Finally Change Document Root to folder react/build and Application Root to react. Also change Application Mode to production.

Plesk node.js extension for production server

Now open Applicaiton URL example.com to view our production app. If you made any changes in Developement server, then you have to build your app using "Run script" in node.js extension to reflect changes to Production server.

For more about react boilerplate, Read documents https://github.com/react-boilerplate/react-boilerplate/tree/master/docs