DEV Community

Cover image for How to deploy your React website to Namecheap cPanel
Andreea Egli
Andreea Egli

Posted on • Updated on

How to deploy your React website to Namecheap cPanel

If you're a newbie web developer you probably never deployed a website to a web hosting provider before but I'm here to tell you that it is not that difficult and I will show you how to do it step-by-step.

The term deploy means, publishing your updated code from source control to a hosting platform

Let's start! I have chosen Namecheap because, well, the service they provide and good.

I assume that you have already purchased your domain name and hosting with Namecheap so, I will not cover that here.

Step 1 Generate your build folder in VS Code

First of all, open your project in VS Code and navigate to package.json file and add the URL to the project homepage. Make sure that you add your own URL and not mine 😄 Attention! This is a mandatory step and must not be skipped otherwise your deployment will not work.


Prepare your build folder - in VS Code terminal run the command npm run build and wait for the build process to be completed.

npm run build

creating build folder

build folder ready

Once the folder has been created, you will find it a the top of the folder tree in your project:

build folder location

Right-click on it and click on the 'Reveal in File Explorer' tab which will take you to the build file location on your local machine.

build on local

Right-click on the build folder (again) -> Send to -> Compressed (zipped) folder and you are good to go!

build zip

Your build folder is ready to be uploaded to Namecheap 🎉🥳

Step 2 Build folder setup for deployment in Namecheap

Now, let's log in to Namecheap. Once logged in, go to your Dashboard where you'll see all your domain names. Chose the one you want to deploy to and hover over the second icon under the Products column and click 'Go to cPanel':

namecheap dashboard

From here, find the 'FILES' section and click on 'File Manager'

cpanel file

You will be prompted to the cPanel File Manager screen.

file manager

Navigate to public_html on the left-hand side, click on it, and a new folder from the + Folder tab on the top navigation bar. Name the folder whatever you want, it is not important. This is where you'll be uploading and extracting your build folder.

create folder

Mine is named portfolio because it relates to my project which is my portfolio website.

file name

Ok, let's finally upload the build zip folder. Follow the steps shown in the next images:

Click on the folder you have created and hit the + Upload tab on the top navigation bar:

upload file

Drop or Select your build zip folder and wait for the upload process to be completed:

drop file

upload done

Once the process is completed, click on the bottom link to go back:

click link redirect

You will be redirected to the folder where your build file has been uploaded to

build file location

Click once on the and hit the Extract tab on the navigation bar. Click Extract File(s) button. You have unzipped your build folder!!!

build unzip

Bear with me, we're getting closer to the end...⏰


At this point, you can delete the folder and keep (of course 😅) the extracted version.

Double-click on the build folder to reveal the files (and sub-folders) and Select All

extract build

Once selected, hit the Move tab on the navbar.

move build files

Enter the file path where you want to move your files to and click Move File(s). My suggestion would be to move the files to
/public_html/. At least this is my personal standard practice and preference

move path

move path

Guess what?!?! We're done!!!!!


You did a great job and I truly hope my instructions were clear. I tried to be as detailed as possible because when I deployed my project for the first time, I had a few issues which I had to trial & error myself in order to make everything work properly.

Go check out your deployed website and let me know how it worked. If you need help, drop me a line.

Top comments (11)

babaneh1001 profile image
Oluwaseun Ogunkayode

Thank you, I actually did not use the whole instructions as I just was having an issue using my ts file on name cheap, when I built it got converted and I had to just copy the js file generated to the cpanel

armanhex profile image
Arman Hafizi

Hi! Thanks for the article.
Unfortunately, it does not work for me.
Your build message indicates that the homepage isn't actually set and I suspect that your compiled index.html file paths start with '/' rather than ''. I was wondering if that makes any difference or problem in my case.
I also don't know how it does not matter where to put my built files. In any case, pasting the files into root or different directories haven't solved my issue.

ukemike profile image

Thankn you so much

austinevick profile image
Augustine Victor

Thanks a lot. You saved my day!!!!!

stephengade profile image
Stephen Gbolagade

Hi, nice article.

What it the product has secret keys stored in env files, will namecheap pick it up or is there a way to add the secret keys to it?

saytzeffd profile image
David O. Atanda

Is the url you set as the value of homepage the same as the domain name?

saytzeffd profile image
David O. Atanda

This is urgent

stjamescodewarrior profile image

i followed these instructions to the tee. Im getting an error that says "Your connection is not private"

renatosalhuana_2 profile image

it worked for me when I did it on the root folder of my domain, thanks!

samterces profile image

I am unable to get the result with my URL

decafujita profile image
Deca Fujita

Awesome! Thanks a lot!