How to run React JS frontend, Node JS backend in Plesk?

[ezchoe]

My Web app has the frontend (React JS), backend (Node JS). How to run my web app in Plesk? I tried to run my web app in Cpanel successfully. But in Plesk, I couldn't run it.
What is the solution in Plesk?

 

[Percy]

I have the same question. Getting nodejs going was straightforward, but I'm struggling with the reactjs portion. I was able to start reactjs like this:

yarn create react-app client
yarn start

A browser window opened. On a Plesk nodejs website it seems like nodejs has to take the lead fielding requests from browsers since it is a nodejs app that is the "Application Startup File". It must then somehow hand off requests to reactjs, but that seems backwards since reactjs is the frontend.

 

[angelmovers]

To run a React JS frontend and Node JS backend on Plesk, you will need to follow these steps:

1. Install Node.js on your server: You can install Node.js on your Plesk server by using the Node.js extension in Plesk or by installing it manually.
2. Set up a Node.js application: Create a Node.js application in Plesk by going to the "Node.js" tab and clicking "Add Application". Then, select the Node.js version you want to use and specify the application root directory.
3. Install and build your React JS application: Install the necessary dependencies for your React JS application by running "npm install" in your application root directory. Then, build your React JS application by running "npm run build".
4. Configure the Node.js application: Configure your Node.js application to serve the React JS files by adding the necessary routes to your server.js file.
5. Start the Node.js application: Start the Node.js application by running "node server.js" in your application root directory.
6. Set up domain in Plesk: Create a domain in Plesk and set up the necessary DNS records to point to your server's IP address.
7. Configure domain settings: In the "Hosting Settings" for your domain, select the Node.js application you created in step 2 as the document root.
8. Test your application: Visit your domain in a web browser to test your React JS frontend and Node JS backend.

It's important to note that Plesk may require additional configuration depending on your specific setup and requirements. Additionally, you may need to configure your server's firewall settings to allow traffic to and from the necessary ports for your application.

 

[Percy]

Thanks for the information. I had already set up a domain in Plesk. I installed NodeJs as a Plesk extension. Under the Dashboard column for the domain I can click on Node.js to bring me to a page to set up Node.js. Is your suggestion to set "Application Startup File" to be the React client application? I think I tried that already, but I can try it again.

I had a question about step 4. Since I want React to serve as the front end, shouldn't the routes be added to the React client frontend to request endpoints from the NodeJs server backend.

 

[Percy]

I just checked my NodeJs settings at Plesk and they are:

Document Root: /httpdocs/client/src
Application Mode: production
Application URL: http:// ...etc...
Application Root: /httpdocs/client
Application Startup File: src/App.js

ReactJs has been installed in /httpdocs/client.

The browser response is that there's an error. It provides an error ID for looking up details of the error, and when I do that I find that it crashed because the wrapper experienced an internal error trying to start up App.j when it encountered an import statement. The stack trace says that it is from Node.js 19.8.1. My settings must not be correct, or perhaps this isn't the way to run ReactJS as the frontend using Plesk.

 

[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.

 

[Percy]

A simpler and more complete answer has been posted to How can I run ReactJS as the frontend and NodeJS as the backend?