Ninja Space Content 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]

</IfModule>
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: 
https://stackoverflow.com/questions/40146067/i-have-godaddy-shared-web-hosting-i-need-to-host-node-js-website-can-host-site

https://medium.com/@pampas93/host-your-node-js-app-on-shared-hosting-go-beyond-localhost-73ab923e6691

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

In : Domain Management 


Tags: react app  godaddy  cpanel  instructions 

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 coding bootcamp and have just graduated in Dec 2020.
Note: links to resources and promoting special deals may allow me to earn a commission from each sale.