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.
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!
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:- 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.
- 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.
- Within the same level of your build files, you'll need to add an .htaccess file and edit it's content with the following:
Then, click "Save Changes".<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>
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