How to deploy a react.js app using Plesk

This guide will show you how to deploy a React.js application on a server that’s powered by Plesk Control Panel, like our shared servers or if you have a Plesk license/install on your own VPS. To proceed you will need to have:

• A React.js app
• An active account that uses Plesk

Let’s get on with it!

Build the React Application for Deployment

In your React project / dev environment (likely on your computer), execute: npm run build

A directory will be created called build that contains all the static files necessary to run the site that the react app created.

Upload the contents of the build directory

1. Log into Plesk Control Panel and head over to the “Websites & Domains” section.
2. In “Websites & Domains”, click on “File Manager”.
3. Navigate to httpdocs (your domain’s web root folder/path). Tip: if not using the primary domain, you’ll need to use the correct web root path folder for your domain. The same is true you’ve changed the primary domain’s web root path.
4. Existing site? if you have an existing site for this domain, before proceeding, you should create a backup and then remove the existing site. If that site is tracked within 1-click web apps, then do this in 1-click web apps. If it is not tracked within 1-click web apps, you can use the File Manager to create an archive/zip of the site files, download it, then remove the files.
5. Upload all contents from the build directory on your computer to the web root path.

Update Web/Document Root Folder

Often with react.js apps, the actual static site files you want showing for your website are in a sub-directory, like static or public/static. You’ll now need to tell Plesk that the web root folder should change to be that path. Here’s how:

• Go to “Hosting Settings” of the domain in “Websites & Domains”.
• Modify the “Document root” to your React app’s static files path – the one where the index for your site is located — typically index.html.

Enable client path routing via .htaccess

If using React Router you’ll want to redirect all requests to index.html to handle client-side routing. This ensures that requests for pages other than your homepage will also be served by the react app.
Look for the .htaccess file within the new web root and edit it to ensure it has this in it:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Tip: if you have a VPS with us, you can instead implement those redirects with nginx rules for optimal performance. Doing it this way means apache isn’t even needed to load the site.

Test the Deployment

Should be all set now! Access your domain via a browser and check if the React app loads and routes correctly.

Using node.js backend?

If you use a node.js backend try Plesk’s built in node.js integration to run it.