DEV Community

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

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

crishanks on August 09, 2019

Stay hydrated out there Diving Right In While working on a personal project called Punchstarter, a Kickstarter clone app, I struggled t...
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!

Collapse
 
alexmojnov74 profile image
Alex Mojnov

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

Collapse
 
amouratoglou profile image
Agustin Mouratoglou

where does your app fetch the data from?

Collapse
 
abelardoit profile image
abelardoit • Edited

Hi there,

The tutorial I searched for.

  1. My domain is "aaaaaaa.com".

  2. I modified the package.json by including the "homepage" line pointint out to "aaaaaaa.com"

  3. I run "npm run build". It created the build folder inside my React app.

  4. I connected to my cpanel user. I opened the File Manager. Under my "public_html" folder I created a folder called "chat".

  5. Inside this folder "chat" I uploaded the content of my build folder, including my static folder which contains both folder css and js (and their files).

6.a I modified the "public_html/.htaccess" file to add the content you shared with us.
6.b I modified the path to "index.html" to be pointed out to the "index.html" inside my chat folder:

RewriteEngine On
RewriteBase /
RewriteRule ^/chat/index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /chat/index.html [L]

  1. I went to the "aaaaaaa.com" webpage.

  2. I couldn't directly see the chat. Instead, at "localhost:3000" I can directly see the chat.

It's clear I made a mistake but I don't know where I made it.

Could you gently help me, please?

Best regards.

Collapse
 
abelardoit profile image
abelardoit

When I load "aaaaaaa.com/chat" this message is showed at the console tab:
Uncaught SyntaxError: Unexpected token '<'
Can this message explain us why my chat is not seeing?

Collapse
 
wialessg profile image
wialessg

Hi,

Found it very useful.

It helped me to upload my files.

Thanks!

Collapse
 
crishanks profile image
crishanks

Awesome, I appreciate it.

Collapse
 
monochromaticmau profile image
monochromaticmau

I don't think your article shows a server.js. I have something like:

-public
 --dist
  ---bundle.js
  ---styles.css
 --index.html
 --images
-server
 --server.js
-src
 --components
 --app.js
-.babelrc
-package.json
-webpack.config.js

I don't think that the Build covers the server.js so where does this live and get activated at? Does anyone know a full instructional on this type of deployment? I opened port 3001 in cPanel, but my requests aren't going through on port 3001.

Collapse
 
sudonitin profile image
Nitin Sahu

The .htacess was lifesaving!!!!!!!!!

Collapse
 
guptshruti2003 profile image
guptshruti2003

hi, I cant find where and how to create .htaccess file? I tried in public_html folder , it shows it has after creating but when I try to open it doesn't open.
I tried creating in my react app in public folder but it doesn't show on cpanel to upload.

Collapse
 
uwemisrael profile image
Uwem

Thank you for this awesome article. I have have issue with my react app after uploading it to C-panel, each page gives a 404 error when refreshed. Please ho can i solve this?

Collapse
 
musicdsign profile image
David Silberman

I am having the same issue. From what I can tell, it has to do with the server configuration. Somehow the server must be configured to redirect all page requests to index.html but I haven't figured out yet where to do that. Have you had any luck?

Collapse
 
tobianointing profile image
Oluwatobi Anointing

I'm having this same issue too please any luck with this?

Collapse
 
emma_watson profile image
Emma Watson

Great guide for deploying React apps with cPanel! While cPanel is widely used, have you considered trying CyberPanel? It’s a powerful alternative that offers features like OpenLiteSpeed integration for faster performance, built-in support for Docker, automatic SSL, and a much more user-friendly interface. Plus, CyberPanel has a free version, which is a great advantage over cPanel's pricing.

Collapse
 
zakero profile image
azakero

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?

Collapse
 
deejayross profile image
ジョン Wilson

Great article Cris. Keep at it.

Collapse
 
rowand72 profile image
David Rowan III

Many thanks for the information.

Collapse
 
maujor profile image
maujor

Hi there,
Can someone help me?
Suppose my React app is hosted at: http://pushstart/myapp
In order the routes works, how does would be my .htaccess file?
TIA

Collapse
 
doonsnboons profile image
doonsnboons

RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

into your .htaccess .
note: ./index.html when your index.html and .htaccess in same folder. if you have put your react app in some other folder then ./someotherfolder/index.html

Collapse
 
alsmith808 profile image
Alan Smith

Thanks Cris, worked nicely for me!

Al

Collapse
 
salmancreation profile image
Salman Ahmed

Thanks a lot again.

Collapse
 
nate93 profile image
Nate93

Thanks, this helps a lot!

Collapse
 
rossberto profile image
rossberto

I tried this with Godaddy and it worked great, but now in A2 Hosting is not working, have your tried it? Any advice?

Collapse
 
tibinjoseph30 profile image
tibin

thanks bro, very helpful

Collapse
 
deryakurin profile image
Derya O. Kurin

Thank you so much for adding this content. It was so helpful especially after dealing with this issue for 2 days!

Collapse
 
crishanks profile image
crishanks

Glad I could help!

Collapse
 
imadbenmadi profile image
imad benmadi

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

Collapse
 
khaled17 profile image
khaled-17

that post is very grat
thank you for help pro

Collapse
 
hfzrmd profile image
Hafiz Ramadhan

Thank you!

Collapse
 
johnnshaibu profile image
JOHN Shaibu

thank you very much you just saved me from lot of stress

Collapse
 
somtookaforr profile image
Somtochukwu Okafor

Thank you for this very useful article.

Collapse
 
ndotie profile image
ndotie

Thanks master, this is useful hundreds and millions times, thanks!!

Collapse
 
chinazamax profile image
chinaza-max

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"

Collapse
 
sudsin95 profile image
sudsin95

Page Reload is not working
when i reload same page 404 error showing

Collapse
 
tobianointing profile image
Oluwatobi Anointing

Same issue with me

Collapse
 
anshumeena1947 profile image
Anshu Meena

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

Collapse
 
eddievin profile image
Eddie Eddie

This is So great. Spot on. Thanks a lot 😄 😁 😄

Collapse
 
arif98741 profile image
Ariful Islam

Thanks a lot man.
I just run

  1. npm run build
  2. zip it and uploaded to server
  3. make .htaccess file
  4. finally boom
Collapse
 
dxrovang profile image
Alexander Rovang

Absolutely spot on, thanks SO much!

Collapse
 
davulurihemanthchowdary profile image
Davuluri Hemanth Chowdary

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

Collapse
 
sarthakforwet profile image
Sarthak khandelwal

Thank you soo much. Being not completely from the web dev domain, I was stuck on how would I deploy my changes to cpanel for React Website and your blog just acted as life savior.

Collapse
 
angeldelacruzdev profile image
Ángel De La Cruz

Thank you, work for me.

Collapse
 
lenniecottrell profile image
Lennie

Thank you Cris! Super helpful and straightforward.

Collapse
 
bhanuka94 profile image
Bhanuka94

It worked for me. Awesome guide. Thanks a lot.

Collapse
 
hosseinazimy profile image
حسین عظیمی بیرجندی • Edited

Hi it was great. Please learn how to build an api and how to connect it to the project.

Collapse
 
kpconway519 profile image
Kevin Conway

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.

Collapse
 
danyos profile image
Danyos

My site not working danisoft.am error api

Collapse
 
delanick profile image
delanick

Hi, I have my React app running in public_html/react_app on Namecheap. Regarding the .htaccess file, can I just place it in the react_app folder?

Collapse
 
rossberto profile image
rossberto

I tried this on Goddady and it worked great, thanks! But in A2 Hosting is not working, have you tried it? Any advice?

Collapse
 
vishalj20 profile image
vishalj20

Thank you so much for this.. Do we need to repeat this process for any new update ?

Collapse
 
rdnine profile image
Rafael Duarte

After a lot of search on this subject, a simple article like this, made my day 😆

Thanks a lot!

Collapse
 
jcpandi profile image
JCPandi

Hi Chrishanks.. I wonder if it is possible to upload the files in a subfolder(i.e domain.com/react)?

Collapse
 
yudazvi profile image
yudazvi

can you deploy the same way a react app that connected to mysql?

Collapse
 
salmancreation profile image
Salman Ahmed

Thank you so much.
Very helpful and I got it finally.

Collapse
 
sandyvb profile image
Sandy

Thank you so much for this post!
It solved my problem in a matter of minutes!

Collapse
 
urakymzhan profile image
Ulan Rakymzhanov

Thanks. Got it work out.

Collapse
 
lucafxg profile image
lucafxg

I need help, I can't get my application to work. I follow all the steps, but I keep getting the following error 503.