DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 is...cheap 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.

package.json

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 build.zip 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...⏰

build

At this point, you can delete the build.zip 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!!!!!
πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³πŸ₯³

Congrats

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 (2)

Collapse
 
ukemike profile image
ukemike

Thankn you so much

Collapse
 
decafujita profile image
Deca Fujita

Awesome! Thanks a lot!

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.