DEV Community

Cover image for Deploy / Host your React App with cPanel in Under 5 Minutes
crishanks
crishanks

Posted on • Updated on

Deploy / Host your React App with cPanel in Under 5 Minutes

Stay hydrated out there

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:

package.json

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.

build directory

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.

hosting manager

Your cPanel manager should look something like this:

cPanel manager

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.

public_html

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.

build directory

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>


Enter fullscreen mode Exit fullscreen mode

.htaccess

Save the file.

You're Super Done.

Stay hydrated out there

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:

  1. Download and run FileZilla
  2. Grab your domain's ip address -- or ask your hosting provider
  3. 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
  4. Click QuickConnect
  5. Once connected, navigate to, select, and copy the contents inside the build file (in the left-side pane showing your computer's directories)
  6. Navigate to the public_html directory in the cPanel pane on the right-hand side. Paste the contents of the build file into public_html
  7. Create the .htaccess file with the same information listed above

Top comments (86)

Collapse
 
yoann_buzenet profile image
Yoann Buzenet • Edited

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 :

  • You don't need Node on your remote server, you just need it when you build the React App (npm run build your-app)
  • You can run npm on your local computer (you must have Node to compile) and just send the "build" folder to your server
  • FTP is a way to upload, but you can also use SSH with the scp command

For the rest, everything is exact. Thanks again !

Collapse
 
yudazvi profile image
yudazvi

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.

Collapse
 
nerdbachu profile image
Waseem Aslam

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.

Collapse
 
godrickaluku profile image
Aluku Godrick

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

Collapse
 
adamnorton2024 profile image
Adam Norton

Not sure if you know this or not, but when people contact GoDaddy for help with deploying a React app to their system... they refer us to this article... and they have no information other than that... so thanks for writing this!

Collapse
 
crishanks profile image
crishanks

I didn't know that! That's good to know :)

Collapse
 
gotplitz profile image
Norman C. Pleitez

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.

Collapse
 
crishanks profile image
crishanks

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!

Collapse
 
alfanzain profile image
alfanzain

Have you looked into that?

Thread Thread
 
irfdev profile image
Irving Suárez

😱

Collapse
 
irfdev profile image
Irving Suárez

Brooooo, can you explain me how would you deploy Node.JS in C-Panel?

Collapse
 
merthod profile image
Merthod

It depends from hosting to hosting.

Collapse
 
alanee profile image
Adam L

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!

Collapse
 
crishanks profile image
crishanks

Really glad this could help!

Collapse
 
musicdsign profile image
David Silberman

This was a fantastic tutorial. It worked perfect, except for one caveat. In step 3. Create the build File, the command "npm build" didn't work. I got the following:
npm build called with no arguments. Did you mean to npm run-script build?
So I changed it to "npm run build" and it worked fine!

I also used Filezilla to transfer the contents of the build folder into a sub-folder of my public_html directory, because I have a number of sub-domain folders in my public_html directory. Once I refreshed my browser, the domain showed up perfectly with my React application all intact!

Collapse
 
ritviksharma3 profile image
ritviksharma3

try "npm run build"

Collapse
 
aidan_mcbride_eb5b5f4cad5 profile image
Aidan McBride

Great article, I found it super helpful.
I was wondering however, is there any way for cPanel to hide environment variables while hosting only a React site?
I have a React app I would like to be deployed, but I have environment variables that will be visible in my build, and this visible on the browser for anyone to access.

Collapse
 
emyboy profile image
Chukwuemeka Ifeora

Please how did you added the environment variables?

Collapse
 
collinsmarra profile image
CollinsAndrea

did you find a way to add environment variables?

Collapse
 
manas2297 profile image
MANAS YADAV

Did you find a way to implement this?

Collapse
 
aidan_mcbride_eb5b5f4cad5 profile image
Aidan McBride

Not strictly with React, I'm going to try to create a Node Express backend and hide the API keys there

Collapse
 
melissa24 profile image
Melissa Longenberger

This worked wonderfully. Thank you. I do have a question though. If I make updates to the app on my localhost....do I need to run npm install and build agian or can I just re upload the contents of the build folder

Collapse
 
nerdbachu profile image
Waseem Aslam

You need to build it again to generate build files for the updated content!

Collapse
 
javorsh profile image
Yavor • Edited

But build folder of react application is very small . Does it contain all my sources and required JS libraries ? I copied all this content to my hosting public_html folder . Created .htaccess file . But when open my site in browser it show empty screen and error in console -
2.b5ad5a0d.chunk.js:1 Uncaught SyntaxError: Unexpected token '<' " insidgenerated JS file in build files.
But all application run perfect in development mode .

Collapse
 
ssamkough profile image
Sammy Samkough

Thank you so much for this helpful post! I was able to get it up and running thanks to you.

Although I was wondering, are there any ideas as to how to automate this process? To manually have to get the build files every time seems like a pain. I assume there must be a way with GitHub actions/web hooks.

Collapse
 
eltel profile image
Terry Mitchell

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.

Collapse
 
crishanks profile image
crishanks

For sure, let me know!

Collapse
 
rhuwell profile image
Rhuwell Samano

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

Collapse
 
crishanks profile image
crishanks

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.

Collapse
 
rhuwell profile image
Rhuwell Samano

Awesome! Thanks again!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.