React.js to CPanel

Blessing — Thu, 29 Aug 2024 15:57:21 +0000

If you're anything like me, you're just blagging this whole coding thing, feeling a bit out of your depth each day.

So, when someone provides a detailed walkthrough, you thank God for their existence and keep it moving.

I'm hoping you'll send out a prayer for me regarding this article because it caused me unnecessary stress. I'll break this down into simple steps for people like me:

Step 1: Run "npm run build" in your terminal (ensure you're in the correct directory—use cd file_name).

Step 2: Open the folder and locate the "dist" folder.

Step 3: Navigate to cPanel and open "File Manager".

Step 4: Find "public_html" in File Manager.

Step 5: Create all the separate folders present in your dist folder within public_html. For example, I needed to create a folder named "assets".

NOTE: This step is crucial. Do not simply copy the zip file or drag and drop the whole folder. You must create individual folders.

Step 6: Enter the folders you've created and select "upload". Now, you can drag and drop the contents into the corresponding folder.

For instance, I dragged all contents from my local "assets" folder into the cPanel "assets" folder.

Step 7: Return to the main "public_html" folder, go to "upload", and drag and drop any other files that were not in a folder. In my case, this included my icon and index.html.

Step 8: Create a new file named ".htaccess".

Step 9: Go to settings, select "show hidden files", and save.

Step 10: Select ".htaccess", click on edit, and copy and paste the following code:


<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>

Save, and you're done!

DEV Community: Blessing

React.js to CPanel