How to deploy your React website to Namecheap cPanel
Tags: react, beginners, website, deployment
Published: 2021-11-02 08:14:30

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.

<br/>

*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 <a name="chapter-1">Generate your build folder in VS Code</a>

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6qsea49a32go559vx7g.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnz26zbulvrj6ujkynlx.PNG)

![creating build folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtxxpdsjayrcekarix1j.PNG)

![build folder ready](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlm1ay322po2ew0ogijk.PNG)

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

![build folder location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17cllyies1fr058eu8dp.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnjymoz4m8r6a0d1c05r.PNG)

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

![build zip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb75341et1ey36c69kel.png)


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


### Step 2 <a name="chapter-1">Build folder setup for deployment in Namecheap</a>


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08xqzg2z4ewtkemivgwy.png)

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

![cpanel file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5mgbbaesd3ssvazj727.png)

You will be prompted to the cPanel File Manager screen.

![file manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fint9n8eb0vjyhjnhy5d.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvhu5w5i6y15bt39tlb7.jpg)

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

![file name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5h2yazb0na0eefvwfbh.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fca5dfsibvw44zchcgx.jpg)

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

![drop file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehuh6xkrpi1n7vp16lo3.png)

![upload done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrl48qo5l8x20hlv9zjk.png)

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

![click link redirect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7mq56bic2eac9y60gf8.png)

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

![build file location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juemx58dr8wlacpdw8ug.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mnozd00inxiq91j93ki.png)

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

![build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhw6qgv6hf5wmzbbk3uc.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf9zblqg3pvjbv43rk4n.png)

Once selected, hit the Move tab on the navbar.

![move build files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9vqdwplrue6i9ylh9ta.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdo4yvbx02namrjw2ie7.png)

![move path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6cf7gcrnlwwdbav3zgm.png)

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

![Congrats](https://media.giphy.com/media/OcZp0maz6ALok/giphy.gif)


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.