Question How to deploy React app?

[sernuxo]

Server operating system version

CentOS Linux 7.9.2009

Plesk version and microupdate number

18.0.61

Hello Plesk Support Community,

I am currently facing challenges in deploying a React project on Plesk. I have seen multiple methods mentioned for deploying React apps, such as copying build files to httpdocs or setting up a Node.js environment directly in Plesk, but I am unclear on the best practices for this environment and how to handle Node.js updates within Plesk.

Could anyone guide me on the following:

1. What is the recommended method for deploying a React application in Plesk? Should I place the build files in the httpdocs directory, or is there a preferred method involving Node.js setups?

2. How can I update Node.js in Plesk to version 18 or higher? I need guidance on updating Node.js on a Plesk server as the default version does not meet my project’s requirements.

3. Current Environment: I am hosting a PrestaShop on my main domain and now I am experimenting with the React project on a subdomain (test.example.com). The idea is to switch that prestashop for the new website done in react

Any step-by-step instructions, links to relevant guides, or personal insights would be greatly appreciated as I navigate these challenges.

Thank you very much for your assistance.

 

[Aleksei Fedorov]

Hello, do you have a backend for your React application?

 

[sernuxo]

Hi Aleksei!

No I don't have any backend, maybe in a future I try to add, but right now my current goal is to deploy the React project without any backend for the time being

 

[Aleksei Fedorov]

In this case, you can just put the content of the build folder inside the document root folder

 

[sernuxo]

Thank you for the guidance. I would like to ask if I can place the content of the build folder in a subdomain to test it first. Also, if I do this, would it interfere with or disrupt my current website, which is built with PrestaShop and hosted on the main domain?


Thank you for your assistance.

 

[Aleksei Fedorov]

When you add a subdomain it has its own document root folder so you can't break other sites

 

[sernuxo]

Thank you for your previous guidance. Just to confirm, I will place the content of the dist folder (which is the build folder for my React project) directly into the document root of my subdomain (httpdocs of test.joma-tools.com), without including the dist folder itself.

Is this the correct approach?

Thank you for your assistance.

 

[Aleksei Fedorov]

yes, you need to put your index.htm (and other files) directly into the document root folder

 

[sernuxo]

I have also configured the rewrite rules in the .htaccess file to handle client-side routing.

However, when I try to access the website at xxxxx.com, I receive the following error: ERR_ADDRESS_UNREACHABLE.

Is there something I might be missing in the configuration?

Thank you for your assistance.

 

[Kaspar@Plesk]

The ERR_ADDRESS_UNREACHABLE error usually indicates an browser cache issue. Have you tried an other browser?

 

[sernuxo]

Yes, just checked in Chrome and Firefox. Pretty sure I'm missing something...

 

[sernuxo]

Could you please confirm if there are any additional configurations needed once the files are in the httpdocs folder? For example:

1. Is there any specific setting in Plesk to point to these files or make sure they are served correctly?

2. Do I need to perform any installation steps or ensure a specific Node.js version is available on the server to run the project, even though it’s a static build?

3. Any other settings or steps that might be required to ensure the React app runs correctly?

Thank you for the assistance!

 

[Aleksei Fedorov]

1. Is there any specific setting in Plesk to point to these files or make sure they are served correctly?

no, any file inside of the document root can be served, for instance, you can put the test.txt file and it will be available on example.com/test.txt

2. Do I need to perform any installation steps or ensure a specific Node.js version is available on the server to run the project, even though it’s a static build?

node.js no need because you upload the compiled application with all prepared files (js, CSS, HTML)

3. Any other settings or steps that might be required to ensure the React app runs correctly?

no, a React app is just a bunch of HTML, JS and CSS files so it should just work

 

[sernuxo]

Hello!


I have decided to abandon the subdomain approach and created a new test domain .plesk. I followed the instructions provided, and it worked; I can now see the page correctly.

Now, if I want to move these files to the main domain, which currently has a PrestaShop website, what will happen to the PrestaShop content? Is there any guide or recommendation for this type of migration?

Thank you for your assistance.

 

[Aleksei Fedorov]

It's hard to say because I don't know how a PrestaShop website was implemented but I think you can rename the websites. In this case, you can always restore the old website.