Ninja Space Content Tech Blog

Hosting React App on Godaddy Hosting via cpanel

Posted by Ninja Space Content on Sunday, January 24, 2021 Under: hosting
Through GoDaddy, I pay shared hosting for one of my React apps. It was quite easy. After I run a build, I just drag over some files and then it was done.

Steps to use Cpanel from Godaddy's Shared Hosting to host a React App

Here are the steps I took to complete the entire hosting process:
  1. After you've logged into Godaddy with your account information, 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 on your IDE, you'll have to have those files and sub-folders under that build folder uploaded to the public_html folder of your File Manager in Godaddy. 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".

My site successfully deployed on the Godaddy shared hosting account by utilizing these 3 main steps listed above.

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.

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 for hosting, of course. This changes are 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 : hosting 


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.