DEV Community

Cover image for HostGator web hosting with a React App!
Ellaine Tolentino
Ellaine Tolentino

Posted on

HostGator web hosting with a React App!

HostGator? Yes! Also my first time hearing about this and I'm very eager to share it with you guys!

I am currently working on a freelance project with a business owner and now we have come to the phase of deployment. My client have used a different service before and is now transferring over to HostGator. Their rates are great and I am happy with this opportunity to learn a new product in relation to software development.

In this blog, I am going to show you how I deployed the web app once you've made an account and got everything in line.

Getting Started

Welcome page
This is the landing page you'll see once you have finish setting up your HostGator account or when you type in your domain linked to your account.

Do not panic! That login page is for billing things! Next thing you do is to check the email they have sent you in regards to your account information. It should indicate a lot of information like your username, domain, 1st name server and etc.


What we want from that email is 'Your Control Panel'. The email should look like this;

Email from HostGator

Click the link that says Control Panel. Format is somewhat like this:

Your Control Panel:
Enter fullscreen mode Exit fullscreen mode

Log in and you'll be in a dashboard of all sort of things! We'll focus on the File Manager.


Once you browsed around your File Manager, open the folder where it says public_html. It should have a couple of files, you can delete the empty folders like the cgi_bin.

Now onto the code.

Back to your VSCode or text editor,

  • Test npm start and make sure everything is working.
  • Then if everything works out, open your package.json and add:
"homepage" : "<your domain here>"
//this keeps your public url be your domain.
//Some says you can also set it to "." so it will take any endpoint.
Enter fullscreen mode Exit fullscreen mode
  • Another way to do this (Which I found out after troubleshooting), is to run npm install dotenv, add a .env file on your root folder and then put this line of code:
export PUBLIC_URL=
Enter fullscreen mode Exit fullscreen mode
  • Third option if you looking into one (Which worked the best for me), is instead of adding "homepage" add "build-staging" in your package.json file, with the PUBLIC_URL variable.
"build_staging": "PUBLIC_URL= react-scripts build"
Enter fullscreen mode Exit fullscreen mode

Bare with me here! We are almost there!


  • Run npm run build - this will generate a build folder for your files. Just like a zip folder.

  • Verifying if you got the right build.
    It should say your domain on as the host site.
    Alt Text

  • Once the build folder is made, open your file manager on your local machine and go into that build folder and compress all the files inside.

Compressing files

  • You'll get back a zip file which then we'll upload to your HostGator account. When finished uploading, Extract the file inside the public_html folder.
    Extracted files

  • LASTLY, DELETE the file named default.html. (If you want to keep it for backup, download it and keep it handy. When you open it, you'll see that it is a familiar page.)

VIOLA!!! Check out your domain and it should work!!
Yay! Another challenge we've successfully conquered today!

Here's a low-key shameless plug of the website I redesigned: Sucia Charters - Seattle

Did you have any with HostGator? Any tricks you can share to make it easier for devs to utilize this? Let me know in the comments below!

Until the next!

CPanel - Youtube

Top comments (4)

mattheslington profile image
Matt Heslington • Edited

Hello Ellaine,

Serious question, why would you use HostGator?

tolentinoel profile image
Ellaine Tolentino

Good question! I didn't really have a say on the decision, my client preferred it over other options I suggested. I was using Netlify & Heroku beforehand. So, I just took it as another learning opportunity :)

mattheslington profile image
Matt Heslington

Ah, the old 'clients knows best' scenario. Have a great weekend.

lucy0112358 profile image
Lusine Sahakyan

Very useful article, thank you