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
build
file (in the left-side pane showing your computer's directories) - Navigate to the
public_html
directory in the cPanel pane on the right-hand side. Paste the contents of thebuild
file intopublic_html
- Create the
.htaccess
file with the same information listed above
Latest comments (85)
bro how to create a new subdomain and put inside another react ap , I tried it , but when I access to the new page after refreshing the page I got 404
I need help, I can't get my application to work. I follow all the steps, but I keep getting the following error 503.
that post is very grat
thank you for help pro
Thank you!
thank you very much you just saved me from lot of stress
Thank you for this very useful article.
Thanks master, this is useful hundreds and millions times, thanks!!
thanks for the toturial . I have a react app running on cpanel with the routers working fine but any time i refresh i get the error "Sorry, this page does not exist"
hi,
thanks for this amazing article. but my question is how i create website using next.js(as frontend) and WordPress (as backend) and deploy this on cpanel
Page Reload is not working
when i reload same page 404 error showing
Same issue with me
This is So great. Spot on. Thanks a lot 😄 😁 😄
Thanks a lot man.
I just run
Absolutely spot on, thanks SO much!
React routers are not working even after adding htaccess file . any body help me.
Im hosting thee build files on a name cheap shared hosting server
Hey. Thanks for this tutorial. It has helped me immensely. However I had one question. With this tutorial I can now deploy a standalone React app in Cpanel. And Cpanel already supports standalone Nodejs app. But how can we deploy a MERN stack app in Cpanel? Any idea?
Some comments may only be visible to logged-in visitors. Sign in to view all comments.