Hosting a React App using cPanel

A Step-by-Step guide on how to host your Reactjs application using cPanel

Click here for a video of the steps

1. To host a website with cPanel you’ll need to purchase a registered domain name and hosting plan from a hosting provider like GoDaddy, Namecheap, Bluehost, etc. Upon purchase, most will automatically point the domain to your hosting server if purchased together. 

If -for some reason- your domain isn’t automatically pointed to the hosting server follow these steps.

2. Next, you’ll need to add the Homepage to your package.json File:

Open up your React App. Open up your package.json file and add a “homepage” attribute that should look something like this:

“homepage”: “http://yourdomainname.something”,

3. Create the build File:

Start a new terminal from your application’s root directory and run:

yarn upgrade(Mac/Linux) 

npm install(Windows)

This will install any/all dependency updates. 

Once this has finished, run:

yarn build(Mac/Linux)

npm build(Windows)

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.

cPanel Directory

4. Connect to cPanel:

Navigate to your cPanel & log in. 

Then navigate to the Files section of your cPanel manager for your domain. Typically there is a dropdown menu of some kind that says “Manage” which will direct you to cPanel. Your cPanel manager should look something like this: 

cPanel > Files > File Manager > public_html

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, it should look like the image on the left.  

5. Add the Build File Contents to public_html:

sample build folder contents

Navigate to the build file in your app’s root directory (on your computer). Open it up and select all the contents inside the build file.  

Once you’ve copied all the contents inside the build file, upload them into public_html.

** NOTE: You must individually select and upload the files within the build folder for this to work.

If you upload the entire build file itself, the process will NOT work. ** 

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:

RewriteEngine On 

RewriteCond %{HTTPS} off 

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Save the file and close the editor. 

AND VOILA, ALL DONE!

Now Navigate to your domain address in the browser and you should see your fully functioning web application.

If you found this content helpful please share with a friend. If you would like to leave feedback or have questions feel free to comments below.

Thanks for reading, Happy Coding 🙂 !

Leave a Reply

Your email address will not be published.