How to upload a ReactJS application to my account in Plesk?
Last updated
Last updated
Add the Homepage to your package.json file
Open your React application. Then, open the package.json file and add a "homepage" attribute as follows:
The format should be "homepage": "https://yourdomain.com"
Create the build of your application
In the root directory of your application, run the command yarn install to install the updated dependencies.
Once this is completed, run the command yarn build (npm install and npm build also work).
You will notice that this creates a new directory in your project called build. The build directory is essentially a compressed version of your program that contains everything your browser needs to identify and run your application.
Upload the contents of the build directory to the main website directory on your hosting account.
The next step is to upload the contents of the build directory, which you created in the previous step, to the main directory of your website. You can do this using the File Manager in the control panel or by accessing via FTP. For a cPanel account, the directory would be public_html.
For a Plesk account, the directory would be httpdocs.
It's important to upload only the contents of the build directory and not the directory itself, or the website will not function properly.
Here is an example of the directory structure in a cPanel account, where you will see the public_html directory.
And this is an example of the directory structure in a Plesk account, where you will see the httpdocs directory.
This is an example of the typical files you will see in your build directory, which you should upload to public_html, httpdocs, or the main directory of your website.
Create the .htaccess file
To make the routes work in your React application, you will need to add an .htaccess file. You should create this file in the public_html, httpdocs, or the main directory of your website, at the same level as the contents of the build directory you uploaded earlier. Edit the file and insert the following basic information:
Then, save the changes to the file.
Now you should be able to use your domain in the browser and see your web application fully functional.
