Diving Right In
While working on a personal project called Punchstarter, a Kickstarter clone app, I struggled to find any good documentation on how to host a custom app on my own domain with cPanel. I hope this will serve useful to many.
1. Purchase a Domain and Hosting
To host a website, you'll need to purchase a registered domain name and a hosting plan from a hosting provider (both provided through numerous sources like Namecheap or Godaddy). If you buy them together, these providers will typically point the domain to your hosting server automatically. If not, this tutorial can help you out.
2. Add the Homepage to your package.json File
Next, open up your React App. Open up your package.json file and add a "homepage" attribute like so:
The format should be "homepage": "http://yourdomainname.whatever"
3. Create the build File
In your application's root directory, run yarn install to install the updated dependencies. Once this has finished, the next command you'll run is yarn build (npm install and npm build work, too).
You'll notice this creates a new directory in your project called build. The build folder is essentially a super-compressed version of your program that has everything your browser needs to identify and run your app.
4. Connect to cPanel
Let's head over to your hosting provider (Namecheap, Godaddy, Bluehost etc.). Once you've logged in, navigate to the cPanel manager for your domain. Typically there is a dropdown menu of some kind that says "Manage" which will direct you to cPanel.
Your cPanel manager should look something like this:
Navigate into the File Manager. There you'll find a dropdown list of directories. The one we're interested in is public_html. Open that up.
5. Add the Build File Contents to public_html
Navigate to the build file in your app's root directory. Open it up and select all the contents inside the build file. If you upload the entire build file itself, the process will not work.
Once you've copied all the contents inside the build file, upload them into public_html.
6. Create and Upload the .htaccess File
In order for the routes to work in your React app, you need to add a .htaccess file. In the public_html folder, at the same level as the build file contents, add a new file and name it .htaccess.
Edit the file and insert the following boilerplate information:
<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 the file.
You're Super Done.
That's it! Navigate to your domain address in the browser and you should see your fully functioning web app.
But you know what else is nice... A shiny new mechanical keyboard. Click that if you're interested in a good one. Or click this for another cool option.
Or perhaps you have a good one and you want to spruce it up a bit (you know I did).
A Note on FileZilla
I know a lot of folks like to use FileZilla to deploy and host their custom web apps. I found it to be unnecessary for my purposes, but should you choose, you can:
- Download and run FileZilla
- Grab your domain's ip address -- or ask your hosting provider
- Input the domain ip, cPanel login, cPanel username, and host port (i.e. 21. Your hosting provider should provide that info for you) into the top bar
- Click QuickConnect
- Once connected, navigate to, select, and copy the contents inside the
buildfile (in the left-side pane showing your computer's directories) - Navigate to the
public_htmldirectory in the cPanel pane on the right-hand side. Paste the contents of thebuildfile intopublic_html - Create the
.htaccessfile with the same information listed above
Oldest comments (85)
Thank you so much for adding this content. It was so helpful especially after dealing with this issue for 2 days!
Glad I could help!
Many thanks for the information.
Gonna test this out on Bluehost with Next.js - Heroku not hosting images is proving to be a pain. Thanks for the article - I'll let you know how it goes.
For sure, let me know!
Hey, thanks for this post, though I would like to know how to deploy having NodeJS server. I need to deploy in cpanel becaue I have already a Dedicated Server for all my clients, the most of them use WordPress and I'm trying to switch, but while that happen I don't want another expense.
This tutorial is good, but it really doesn't explain how to do it using Node. I have Node Running already, but I don't know the exact path and setting to upload the build and connect it with node in another folder in the same account.
I'm really new on this, maybe it's easy for you but I've tried everything, even read the documentation for deploy but still don't understand.
Brooooo, can you explain me how would you deploy Node.JS in C-Panel?
It depends from hosting to hosting.
Hi there, I know cPanel has an option to deploy Node, however I haven't looked into this just yet. I'll be sure to tag you when I look into it!
Have you looked into that?
😱
Hi,
Found it very useful.
It helped me to upload my files.
Thanks!
Awesome, I appreciate it.
I've asked some experienced developers how to do this and they weren't sure. Having my project run on my own site using cpanel is much more fulfilling than just sending it heroku, in my opinion, and the end product feels more authentic. Thanks for keeping it so concise also!
Really glad this could help!
Great article Cris. Keep at it.
This was extremely helpful to my project! Thank you for sharing!
I was wondering where did you find that tidbit about .htaccess ? I was hoping to dive more into that step
I looked all around, and can't remember all my resources, but at the time I remember this article being helpful: hostgator.com/help/article/how-to-...
That file essentially communicates with the server and makes sure all your routing works, especially if you're using react router for example.
Awesome! Thanks again!
Hello, thank you for your article. I was stuck all day long and it helped me. However, there are few things I would like to add, if I may, to complete the information :
For the rest, everything is exact. Thanks again !
can you explain more about "You don't need Node on your remote server"?
can i build an app with mySql + node + react - run build, and deploy the app on c-panel, or the c-panel deploy only react apps with static data, not apps that use database?
and i`m not talking about a vps hosting, but a regular shared hosting.
What he answered and you had asked are not the same.
He just pointed out that in a React App, we need to compile the files using node to generate build files inorder to work in production.
Generally in VPS or private cloud the build process is took place in server where we explicitly have node installed. He intends to tell that you can build your React App in your local machine and just copy the build files to the production.
Hope I cleared your first doubt.
Everything is working well except the nested route like hahahah/products/2836276 is not receiving response from backend. Am fetching data from SQL database using PHP as backend. But it's working in localhost. All the other routes like hahahah/products are able to fetch data though. Please help
thanks bro, very helpful
Thanks, this helps a lot!
can you deploy the same way a react app that connected to mysql?
Thanks so much for making this article. You saved me a ton of time, and I made an account here so I could say thanks. I wish all help articles could be this helpful, accurate, and concise.
After a lot of search on this subject, a simple article like this, made my day 😆
Thanks a lot!
Hey there, thank you very much for your article, I was following the steps you described on how to deploy React App on to the shared hosting I have with a2 Hosting, however the app is working but only the static content whatever is dynamic is not rendering throwing an error this.state.data.map is not a function. App is working flawlessly on heroku as well as on my local machine. But as soon as I put it on a2Hosting - it crashes. If I stop dynamic content and replace it with static it works fine. I opened several tickets with them but didn't get any logical answer on why this isn't working. They were giving me advances to put data into array (it is already an array) so I have no clue why this isn't working. May be you have a solution before I get rid of a2 hosting and move somewhere else? Thank you in advnace
where does your app fetch the data from?
Some comments may only be visible to logged-in visitors. Sign in to view all comments.