How to deploy a React app to your hosting account.

When getting your project ready to deploy to your hosting account there are somethings you need to do.

First, you are going to want to find a good FTP program. There are quite a few out there. I currently use FileZilla, however you can do a google search of ftp client and find a bunch more.


In order to get your ftp program connected to your hosting account/website you need to create a user account from within your hosting account. Log into your account and find where you can setup your ftp connections.

Once you enter your credentials you will see something like this

At the top of the image above, you will see the connection to the hosting account.

Next is a split screen of your files. On the left side, where you see the folder Code, it's showing, the local files on my computer. On the right side, it shows the files on my hosting account.

For the project that I want to put on my site, I decided to make a subdomain.
It's called visionreact.jenniferpazos.com
You can choose anything you like though.

When you make the subdomain, it will allow you to specify where your files will go so they appear on that domain. In this case, I allowed it to auto create the folder. It's called visionreact.jenniferpazos.com. Super simple to find and I won't get confused later trying to figure out where I put everything, which is important as I add more and more projects.

Since I created this react application using the create-react-app command, I have to build it using the npm run build command.

When it's done building the app, it creates a build folder and the output from the terminal will look like this:

Next you will want to copy the contents of the build folder into your subdomain's folder.

Now if you go to visionreact.jenniferpazos.com you will be able to see my react project.

Notes: because I did a subdomain, I did not have to add a homepage key in the package.json.
I ran into an issue using dotenv to hide my api key and had to run npm uninstall dotenv