How to Deploy & Host A React App

The first step in any aspiring developers journey is buying a domain name for a future project. If you are anything like me, this step is usually combined with delusions of grandeur involving what that project may amount too. Inevitably ending up as a list of parked domains and insurmountable guilt. Nonetheless it is a very exciting step.

With all these possibilities laid out in front of you it’s important to pick a hosting provider that not only provides speed, support, and security, but also access to admin tools so you can get your react code built and hosted on their servers in no time.

This post wont focus on the benefits of different providers but instead give you the tools necessary to deploy your react app using a host FTP. For the purposes of our example we will be using Namecheap.com due to their reasonably priced domains and hosting services.

Step 1 — Create a Production Ready Build For Your React App

There are many reasons why you shouldn’t use your local development build when hosting online. You open yourself up to malicious actors, slower loading time, and overall poor performance. It makes sense to have files separated out while we’re developing a new project for workflow, but when we’re ready to launch we want to have a fast website that’s optimized and has built in defenses for reverse engineering.

In order to do so in a React application simply enter “npm run build” into your terminal in whatever IDE you’re running and wait for the build to compile.

Make sure you have your scripts set up in your package.json file

Upon completion you should see a new folder in your directory with a similar structure as below depending on your application.

build/
  static/
    css/
      main.css
    js/
      main.js

From here we recommend zipping the “build” folder and keeping it in a safe directory until we finish setting up the following steps.

Step 2— Buy A Domain & Hosting

This process can be done through any provider but the main point of this is to get access to the control panel. If you go through Namecheap you should be able to go to your Dashboard -> Click on the CPanel icon that looks like a server image in the middle column. (Photo below)

Step 3— Access Your File Manager

In order for your react project to be viewable to the public you need to be able to get access to the file manager where your “React-Production-Build” will eventually be hosted. Here’s a photo of where you want to head to once you get your cPanel is open.

Alternatively you can access the FTP by checking this article out.

Step 4— Make Note Of Your Hierarchy/Directory

Upon opening file manager you should now have access to your hosting providers user interface for storing web facing files. For some projects this may be the only domain using the hosting plan in which case we can unzip our “build” folder and drop those files right into the public_html folder. Make sure to delete the build folder after it unzips.

If you are using a addon domain you can skip down below and come back up here after you’ve added the necessary directory.

At this point you should have at minimum and index.html in the main directory along with a folder named “static” which houses your JavaScript and CSS. The only thing missing is for the Apache Web Server Namecheap uses to understand how to read these files. We house these configuration files in .htaccess

All that is required is for you to create a file and label it .htaccess and paste the following code into it so that the software knows how to interpret the rest of the files. The following covers both Nginx and Apache servers respectively:

Nginx:
location / {
  try_files $uri /index.html;
}

Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

Addon Domains

If this is an addon domain and not the primary domain receiving the hosting then you need to go back to the cPanel and click addon domain and fill out the necessary information in order for the file manager to add a folder where you can then drop your files into. This new subfolder will act as the public_html for the project.

Fill in the proper domain name and click add domain. It’s not necessary to create a new FTP account unless you’re splitting roles for different clients. After you have successfully created your addon domain you should see a file in the file manager interface with the corresponding name. From their you can unzip your build file to your newly named root directory and add this .htaccess code for your subdirectory.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule ^.*$ /index.html [QSA,L]
</IfModule>

I hope this helped! Feel free to reach out with any questions or concerns.

I host my portfolio on Namecheap as well. You can view my work at seankrueger.io