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

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.

CPanel

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

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

Your Control Panel: https://gator###.hostgator.com:###

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

Build

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.

• 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=https://yourdomain.com/

• 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=https://yourdomain.com/ react-scripts build"

Phew!
Bare with me here! We are almost there!

THE BUILD.. FOR REAL.

• 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.
  

• 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.

• 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.
  

• 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!

References:
CPanel - Youtube