HostGator web hosting with a React App!
Tags: hosting, hostgator, react
Published: 2021-06-09 02:01:43

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

![Email from HostGator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsighzqsr4syibdt2qru.png)

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

###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:

```JSON
"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.

```JSON
"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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95vkau3quj8m1xzq93rw.png)

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

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

* 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](http://suciacharters.com/)

####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](https://www.youtube.com/watch?v=aQhAmW_I4II)