1. Open your Project or Create one on your PC
If you have not done this, go to your project directory and create a react app using the Terminal/CMD. You can do this by running ‘npx create-react-app my-app’.
2. Add the Homepage to your package.json File
Open the React app. Then open the package.json file and add a “homepage” attribute with your domain name using this format:
“homepage” : “http://mydomainname.com”
3. Create and Upload the .htaccess File
In your project directory, go to the public folder and add a .htaccess file to the project you want to deploy.
Open the .htaccess file and insert the following configurations:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>Note: This is for if your index.html and .htaccess file are in the same directory. But if your react app is in a different folder, set the “RewriteRule” to ./folder/index.html
4. Create the build File
4. In the root directory of your react application, run the yarn install or npm install. After the installation, depending on your choice, run yarn build or npm build.
A new directory called build will be created in your project.
The build directory is a very compressed version of your react app, containing everything about your app. This is the folder that you will deploy in your cPanel.
5. Add the Build File Contents to public_html
Log into your Control Panel. Then under the Files section, select File Manager.
In the File Manager, go to the public_html folder, upload the contents of the build directory, and extract.
6. That's all!
And that is all! Also, ensure your SSL is installed and forced in your SSL page for extra security!
