Question How can I run ReactJS as the frontend and NodeJS as the backend?

[Percy]

Server operating system version

AlmaLinus 8.7

Plesk version and microupdate number

Plesk Obsidian Web Admin Edition Version 18.0.49 Update #2

I posted a reply to the thread How to run React JS frontend, Node JS backend in Plesk?. The thread title asks the exact question I need an answer to. Mine was the first reply and no one's responded. I see now that that thread is in the General Discussion forum, so I'm posting the question again in this more appropriate forum, Plesk Obsidian for Linux.

I'm trying to run nodejs as a backend and reactjs as a frontend. Setting up the nodejs portion was straightforward because Plesk supports nodejs. But I'm struggling with reactjs. What I did was this in the httpdocs directory:

yarn create react-app client
yarn start

This caused the default browser on the server to open with a window on the ReactJS app using localhost:3000, but I need ReactJS to be the frontend and nodejs the backend. I need it be able to open a ReactJS app using the domain name and port 443 (https). Is this possible?

 

[Percy]

I have a partial answer. I now know how to run ReactJS instead of NodeJS as the frontend for a Plesk domain. I followed these steps:

1. Go the the Websites & Domains page and click on Add Domain.
2. You'll be brought to the Adding New Domain page. Click on the appropriate box. I clicked on "Node.js application".
3. If you already have a registered domain name then enter that, otherwise select Temporary domain name. I did the latter.
4. Under webspace you can choose to work within an existing webspace, or create a new webspace. If you create a new webspace they you'll also have to create a new username and password for an account for that webspace. If you create a new username remember that Plesk creates new users with the home page set to /bin/false, which prevents you from logging into it. To be able to log into the account you'll have to use a privileged account to change it to an actual shell name like /bin/bash.
5. Click on Add Domain. It should complete in less than a minute.
6. If you're not already at the Node.js page for your domain, you can get there by looking under the Dashboard column and clicking on Node.js.
7. Leave the browser for a moment and log into your server using the proper account and connect to the httpdocs directory for your new domain.
8. Create a react app with the command "npx create-react-app client". This will take a couple minutes to create a react app in a subdirectory named "client", but choose any name you wish. I'll use the name "client" going forward. Note that it has created a git repo for you. Don't follow any of the instructions that appear at the completion of this script.
9. Return to the Plesk Node.js page for your domain. Click on Enable Node.js. The page should be updated to tell you that Node.js is now enabled for your domain.
10. Plesk will say that it can't find your startup file, but we'll fix that now. Change Documentation Root to "/httpdocs/client/src". Plesk will then automatically change Application Root to "/httpdocs/client".
11. Change Application Startup File to "src/index.js".
12. Click on the "Run script" button. Enter "build" in the box labeled "Script name and parameters" and click on the "Run" button.
13. Earlier we changed Document Root to "httpdocs/client/src" because we needed to refer to a directory that actually existed, but now we must change Document Root to point to the new build directory, "httpdocs/client/build".
14. Enter your domain name in your browser. You should see a ReactJS page.

I'll post again when I learn how to run NodeJS as the backend. I posted this answer to the other thread, too.

 

[Percy]

I was able to get a React frontend working with a NodeJs backend using Plesk. This takes a different and simpler approach than the one described above that is just for the React portion:

1. In a new domain create your React FE app and build it. Set the domain's Document Root to the React app's build directory.
2. Create a subdomain of your new domain and in its directory create your NodeJs BE app.
3. If there is no NodeJs link under the subdomain's Dashboard tab you can enable it by clicking on "Install application" and enabling NodeJs.
4. Click on the NodeJs link under the subdomain's Dashboard tab. Set the Application Root to the subdomain's directory, the Document Root to the NodeJs directory, and the Application Startup File to the NodeJs file. Click on Restart App.
5. The response variable of NodeJs endpoints should set 'Access-Control-Allow-Origin' to '*', otherwise CORS will prevent access.
6. To fetch data from the NodeJs BE app the React app should fetch from the subdomain, e.g., https://backend.mydomain.com/endpoint.

 

[Percy]

I've found an even simpler approach that just needs a little help:

1. Put your NodeJs directory in httpdocs.
2. Put your React app in the NodeJs directory.
3. Build the React app.
4. On the Plesk NodeJs page for the domain set Document Root to the React build directory, Application Root to the NodeJs directory, and Application Startup File to your NodeJs startup file.
5. Add a .htaccess file to the React public directory (or maybe build) with these rules:
   Options -MultiViews
   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^ index.html [QSA,L]
6. Click on Restart App on the Plesk NodeJs page.

This works except that React only responds to the "/" endpoint. NodeJs grabs all other endpoints. I'm seeking a way to forward all endpoints that don't being with "/api" back to React but haven't found one yet.

 

[Percy]

I now have a complete solution to serving a ReactJs front end and a NodeJs backend out of single Plesk domain. All that was required was a slight improvement to the .htaccess file described in the previous message:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_URI} !/abcd/.*
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]

All NodeJs endpoints should begin with "abcd" (or whatever you choose) so that a unique string appears in the URI and can be filtered out and not forwarded to the ReactJs build directory. For example:

app.get('/abcd/myendpoint', (req, res) => {...

Perhaps there are more elegant ways of doing this?

This thread has received little attention and I'm wondering if maybe what I'm doing is obvious to many, or if not many people want to do this.

 

[mykolas]

Hi Percy
Thanks for writing down your approach and struggles. I will be trying the same approach, but I've decided to run Node.js application on `api.*` subdomain, so I avoided the problem you are describing.
Best regards
Mykolas

 

[Percy]

I don't know what an "`api.*` subdomain" is, and I'm not sure which of my problems it avoids, wouldn't mind understanding this. I'm glad to hear you've had some success.

I'd been in the development stage and had started this thread in anticipation of eventual release to the server, which I successfully accomplished this week, just a minimal subset of the final product, still not ready for prime time.

 

[Dave W]

Mykolas means that hes put the Node.js application on a subdomain called api.domain.tld and calls this from his React install on the main domain.
Sounds like a cleaner solution?

 

[Percy]

The domain/subdomain approach is described in my May 3 message, but I was striving for a single top level domain only solution, which seems cleaner to me, but it might be a personal preference kind of thing.

I think the .htaccess file for the React front end is required for both the single domain and the domain/subdomain solutions because a request for, say, https://mydomain.com/endpoint will return a 404 error because no file named "endpoint" exists in the document root, "endpoint" being handled by the React app's router component. The single domain solution requires only one extra line in the .htaccess file compared to the domain/subdomain solution.

Is my understanding correct that Plesk treats a request for https://mydomain.com/endpoint as a request for the file "endpoint" in the document root, and that since no file named "endpoint" exists you get a 404 error? I ran these tests back in May when my understanding wasn't as good and I may have misinterpreted the results. I don't think non-Plesk ReactJs solutions (e.g., cPanel) have this problem.

Requests from the React front end to the NodeJs back end may, for some, be viewed as simpler when they're in the same domain. From the React front end you can direct fetches to /abcd/endpoint, while in the domain/subdomain approach they become https://mysubdomain.mydomain.com/endpoint. You have to know your subdomain and domain names, and this solution seems less portable.

In case it helps, my NodeJs page in Plesk is set up like this:

Document Root:            /httpdocs/server/client/build  # ReactJs index.html file served from here.
                                                         # All requests to domain are initially directed here.
Application Root:         /httpdocs/server               # NodeJs startup file placed here
Application Startup File: NodeApp.js

It's the things you think you understand that you don't that get you into trouble, so I'd appreciate corrections to any of this.