How to deploy a React.js app using Node.js as a backend in Plesk?

Question

• How can I run a React app with Node server inside the react application?
• How would a ReactJS + NodeJS app be deployed on a Plesk server?
• How can a React.js + Node.js combination be deployed on a Plesk server?

Answer

A straightforward way to achieve this is to first create a Docker image for the React.js + Node.js app on a local machine (you would need to use Docker for Desktop in order to achieve this), push that ready image into the Docker hub and pull it from there by using the Docker extension for Plesk.

Alternatively, you may simply upload the ready Docker image directly into the Docker extension within Plesk. Once this is done, you can start a Docker container in Plesk by using the selected image easily and as a many times as necessary.

A breakdown of these steps is available below:

1. Install Docker Desktop on your local machine, by downloading it from this link:

Docker Desktop: The #1 Containerization Tool for Developers | Docker

2. Dockerize the ready React + Node app and upload the ready image to Docker Hub or simply save the image on your local machine.

Another helpful example is available on the following link:

Dockerizing React App With NodeJS Backend | by Bhargav Bachina | Bachina Labs | Medium

3. Install the Docker extension for Plesk
4. Open the Docker extension in Plesk and upload the image or pull it from the Docker Hub by following the steps in this article:

How to install or upload a Docker image?

5. Proxy the requests coming from a domain to the Docker image by following the steps in this article:
How to proxy requests from domains to Docker container in Plesk?

As an alternative and more complex solution that requires coding knowledge, you may attempt to follow the steps in these articles:

React + Node + Nginx with Plesk. Part 1 | by Dmitry Broshkov | Medium
React + Node + Nginx with Plesk. Part 2 | by Dmitry Broshkov | Medium
React + Node + Nginx with Plesk. Part 3 | by Dmitry Broshkov | Medium

Warning: These instructions have been provided by a third party source and have not been tested extensively by Plesk, due to which applying and troubleshooting cases tied to them should be done on your side.

Additional information:

Using Docker | Plesk Obsidian documentation
Using Node.js | Plesk Obsidian documentation