Introduction: This guide walks you through the steps to deploy a React.js application on a server managed by Plesk. By the end of this article, you should have a live React application hosted on your Plesk account.
Prerequisites:
A React.js application.
An active Linux Plesk account.
Procedure:
1. Building the React Application for Deployment:
In your React project directory, execute:npm run build
A build directory will be generated, containing all the necessary static files.
2. Accessing Plesk:
Log into your Plesk Control Panel.
Head over to the "Websites & Domains" section.
3. Uploading Files:
Inside "Websites & Domains", click on "File Manager".
Navigate to httpdocs (or your chosen root directory).
Remove any existing files (after ensuring they're unnecessary).
Upload all contents from the build directory (from step 1).
4. Set the Domain Root (Optional):
If the app is inside a sub-directory and should be the primary access point:
Go to "Hosting Settings" of the domain in "Websites & Domains".
Modify the "Document root" to your React app's directory.
5. Configuring Server for Client-Side Routing:
If using React Router, redirect all requests to index.html to handle client-side routing.
In the root of the React app, create/modify .htaccess with:
RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
Note: Configuration may differ based on the server's architecture (Apache, Nginx, etc.).
6. Testing the Deployment:
Access your domain via a browser.
Check if the React app loads and routes correctly.
Ensure SSL (HTTPS) configurations are in place, if necessary.
7. Advanced Configurations (Optional):
Setting up custom domains/subdomains.
Implementing CI/CD for frequent updates.
Conclusion: You've now successfully deployed a React.js application to your Plesk-managed server. For any custom configurations or more advanced deployment strategies, consult the official Plesk documentation or seek expert assistance.
