Deploy / Host your React App with cPanel in Under 5 Minutes
Tags: react, javascript, cpanel, hosting
Published: 2019-08-09 20:04:22

---
title: Deploy / Host your React App with cPanel in Under 5 Minutes
published: true
description: Follow these steps to host your custom app quickly and painlessly manually, or with FileZilla.
tags: React, JavaScript, cPanel, Hosting
cover_image: https://techstream.org/images/img/Final-steps-with-React-JS-App.jpg
---

[Stay hydrated out there](https://amzn.to/3S26cJa)

#Diving Right In

While working on a personal project called [Punchstarter](http://punchstart.me), 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](https://www.namecheap.com/hosting/shared/) or [Godaddy](https://www.godaddy.com/hosting/web-hosting)). If you buy them together, these providers will typically point the domain to your hosting server automatically. If not, [this tutorial](https://sitebeginner.com/domains/domaintosite/) 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](https://thepracticaldev.s3.amazonaws.com/i/4wqb71tznqilad5rnzma.png)

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](https://thepracticaldev.s3.amazonaws.com/i/5pbbk3zjvjyfftyappd8.png)

### 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](https://thepracticaldev.s3.amazonaws.com/i/b27bb6a500yctbxysc0n.png)

Your cPanel manager should look something like this:

![cPanel manager](https://thepracticaldev.s3.amazonaws.com/i/17kybzgd5q1h6y2jd74x.png)

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](https://thepracticaldev.s3.amazonaws.com/i/via84rrhvsi29924si8v.png)

## 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](https://thepracticaldev.s3.amazonaws.com/i/20rta7k83xvk4lqtv9xn.png)

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>
```

![.htaccess](https://thepracticaldev.s3.amazonaws.com/i/g8acjvap0l60rhztz9ho.png)

Save the file.

##You're Super Done.

[Stay hydrated out there](https://amzn.to/3S26cJa)

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](https://amzn.to/48GVlcT). Click that if you're interested in a good one. Or click this for [another cool option](https://amzn.to/48lQTRe).

Or perhaps you have a good one and you want to [spruce it up a bit](https://amzn.to/3RMztpK) (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](https://filezilla-project.org/)
2. [Grab your domain's ip address](https://ipinfo.info/html/ip_checker.php) -- 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