How to Host React on SiteGround (or any other traditional hosting)

In this handy guide we’ll walk you through how to host your react app on a traditional hosting provider like SiteGround

React is one of, if not the most popular UI libraries in the United States. But hosting your create-react-app on traditional hosting providers can be confusing considering most of them don’t even provide any documentation on how to do it. Have no fear because we’re going to give you the lowdown on how to host your react app on a traditional hosting provider and in this example we’ll be using Siteground. (FYI we are not affiliated with them in any way)

Step One – Build your React App

This one may be obvious. You’ll have to build your React app, and if you’re using the create-react-app starter then this is perhaps the easy part. Simply run npm build or it could be different depending on the version of React you’re using. React should output the result into your “build” folder. Don’t worry, React creates this directory when you run the build. If you’re using webpack without create-react-app, you’ll have to consult your own build process for running a build.

to show the build folder out of multiple folders.
The blessed build folder

Step Two – Time to FTP (or something like that)

We need to create a directory for your React application on your server and in order to do this, simply connect via an FTP client or use your hosting providers server directory UI. This is where we’ll point the domain to at the next step. All your react app files and assets will be located here.

Important: Be sure to create the new directory INSIDE and at the root of your public_html directory. Name it your application name “todoapp” or something along those lines, we’ll need that for later.

highlights the public_html folder that hosts your react app

Now copy all the contents inside of your build folder and paste it into the new directory we created. Again, it should look like this /public_html/todoapp

Now we’re ready to point the domain…

Step Three – Point your domain

Whether you have your domain managed by your hosting provider or on another registrar, be sure to either have the A record pointing to the IP address of your hosting server -OR- have the domain name servers set to the hosting providers name servers for your server. In my case I just have my domain’s A record pointing to my server’s IP address.

There are some pros and cons for just pointing an A record versus using your hosting provider’s name servers but that’s for another article.

Once you have that in place we can proceed to tell Siteground what directory that the domain should be pointed to.

If you’re using cPanel:


1. Go to “Add-On Domains”

arrow pointing to the addon domains icon for react app

2. Enter domain & select the directory

example form for adding an add-on domain for react app

What’s important here is that you enter the domain and name the document root exactly as the directory you created in step two.

DONE.

If you’re using SiteGround Tools Menu:

  1. Navigate to “Domain” on the left menu and click on the “Parked Domains” sub menu item.
siteground side nav panel example to host react app

2. Add your domain as a “New Parked Domain”

parked domain menu example to host react app

When you add the new parked domain you will be provided an option to set the document root of the domain. You’ll want to set this to the directory you created in step two. (e.x. /public_html/mytodoapp)

DONE.

That’s it. You’re all done. Take note if you recently pointed your domain to your server, it may take some time to propagate. If you run into any issues however, check out your .htaccess file for potential hangups which is out of the scope of this article.

Some caveats to know: some hosting providers provide a build pipeline so that way you don’t have to repeat the build > transfer files process but if your hosting provider happens to not have this feature then you’ll have to devise a method (like a third party service) to build and deploy via ftp to your server.