Ninja Space Content Tech Blog

Hosting React App on Godaddy Hosting via cpanel

Posted by Ninja Space Content on Sunday, January 24, 2021 Under: Domain Management
I looked under my GoDaddy account today and to my surprise, GoDaddy had given me a free shared hosting credit so I decided to use it for a React app that I recently built this month. 

Here are the steps I took to complete this. 
  1. Go to the cpanel File Manager part of Godaddy for your hosting account. Go to 'settings' to check the box next to "Show Hidden Files" or you won't be able to see the .htaccess file you're going to create for the build in step 3.
  2. After you've build out the "build" folder of the React app, you'll have to have those files and sub-folders under that build folder uploaded to the public_html folder of your File Manager. Remember to upload the individual items under the "build" folder and not just the entire build folder. One thing that I had to improvise from a lot of the instructions I've found on the web for this was I couldn't just simply copy and paste my static folder within the build folder over to the file manager (Note: I don't have FileZilla). After moving the other files, what I had to do was manually created a 'static folder' and two more sub-folders: 'css' and 'js'. Inside the css and js folders, I then copied the corresponding files to upload them there. 
  3. Within the same level of your build files, you'll need to add an .htaccess file and edit it's content with the following:
<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]

    Then, click "Save Changes".

    Note: Notice the text highlight in yellow. I originally encountered a problem where everything was not rendering so I had to do some manual folder creations and then dragged the corresponding files to upload in my file manager. 

I hope that will work for you too! My site successfully deployed on the Godaddy shared hosting account by utilizing these steps today. However, my Nodemailer contact us is not working and that's probably because I need to set up an extra measure for express relating to my port.

Some helpful resources on this:

My tech stack for the React app included node.js and express as well.

The files you will need to upload include everything in the build folder where you built your React app and then manually create the "static" folder, the two sub-folders and go into them individually and upload the files to all of the sub-folders. I hope that's helpful!

Updates to make in React App and what files to change in the Cpanel

When you make an update to your React code and run a build. You'll need to update a few files in the Public folder of the Godaddy Shared Hosting Cpanel. They include the asset-manifest.json, index.html and inside the static folder that's inside the public folder: everything in css folder and everything in js folder

In : Domain Management 

Tags: react app  godaddy  cpanel  instructions on how to add files from a react app to a godaddy shared hosting 

About Ninja Space Content

Ninja Space Content I have been building simple websites on my own since 2008 and currently run several websites at the moment, including this one. I used to be an account manager for an affiliate/e-commerce company, helping affiliates grow their sales so I have some knowledge on the business side and client side of affiliate marketing. Most recently, I decided to complete a JavaScript coding bootcamp and graduated in Dec 2020.
Note: links to resources and promoting special deals may allow me to earn a small commission from each sale.
Work Station Accessories