Deploying a create-react-app to Plesk Onyx

Question

This question is not going to be particularly loaded with detail, because the problem is very basic, and pertains to the limitations in how Plesk Onyx implements Node support.

I'm trying to deploy a react app created with create-react-app to a domain hosted on a server with Plesk Onyx installed. I obviously cannot mess around with the core server because I might break other domains. So I need to install this app in a manner that is handled properly by Plesk. The problem I'm having is that I'm not finding a guide for how to do this anywhere.

Plesk requires a project structure that is really quite inflexible, and it's nothing like the structure imposed by create-react-app. For instance, Plesk requires that the document root be a child of the application root, which is the complete inverse of the way create-react-app sets up a project.

I have not shown code here because it's a deployment issue, not a code issue, and involves the structure of projects and how to shove a round peg into a square hole.

score 4 · Answer 1 · answered Dec 10 '18 at 08:09

I've had a similar problem but I think I have some kind of a workaround. I haven't actually tried if this works or in Plesk Onyx or not.

Basically I wanted to put a create-react-app to a plesk onyx based hosting and run npm start which eventually leads to react-scripts start, and I realized that Plesk doesn't have the capability to do that. Plesk isn't a VPS...

Instead, Plesk runs a js script file to execute the server, like App.js or server.js and it can be set through the Plesk NodeJS control panel.

To do that, I installed express by running: npm install express --save and made a server.js file which contains this code:

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

I got the code from here: https://dev.to/loujaybee/using-create-react-app-with-express

Then I run npm run build to create a production build, and finally node server.js. My app (a simple tic-tac-toe game from the react tutorial) is available in localhost port 8080.

The root page

I'll give you an update if I did succeed.

score 3 · Answer 2 · edited Oct 26 '19 at 15:03

I found a really easy was to do this without adding express or using node. This will also make react-router work.

Add the following .htaccess file to your public folder in your create-react-app folder

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

Run npm run-script build
FRP the entire contents of the build directory to your Linux server on Plesk

score 2 · Answer 3 · answered Aug 03 '22 at 17:46

2

my work around for this issue is

upload your code .
run Npm install
run this from run-script option:

build
after that set your Document Root to http://your-URL.com/build like this

this worked for me .

answered Aug 03 '22 at 17:46

Ali Mhanna

401
3
14

score 1 · Answer 4 · edited Jul 04 '19 at 03:14

Valian's workaround does indeed work for SPAs. However if you are using react-router to create a multipage app, it is an easy fix.

You need to add an additional app.get() with a wildcard to cover all of your paths.

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

Deploying a create-react-app to Plesk Onyx

4 Answers4