Plesk Question posted in
The official documentation for Plesk Obsidian can be found here.

Deploying a create-react-app to Plesk Onyx

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.

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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);
    Login or Signup to reply.
  3. 0

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

    1. 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]
    1. Run npm run-script build
    2. FRP the entire contents of the build directory to your Linux server on Plesk
    Login or Signup to reply.
  4. 0

    my work around for this issue is

    1. upload your code .

    2. run Npm install

    3. run this from run-script option:

      build

    4. after that set your Document Root to http://your-URL.com/build like
      this enter image description here

    this worked for me .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search