How to Deploy a React App on Web Hosting

If you have built a React application and are ready to share it with the world, the next step is getting it live on the internet. React app hosting can seem daunting at first, particularly if you are more comfortable writing code than managing servers and deployment pipelines. However, with the right guidance, deploying your React app on web hosting is a straightforward process that even beginners can follow with confidence.

In this guide, we will walk you through everything you need to know about React app hosting, from building your project for production to uploading it to a web server and making it accessible online.

Understanding How React Apps Work in Production

Before diving into the deployment process, it is important to understand what happens when you prepare a React app for production. During development, you run your app using a local development server, typically started with npm start. This is not suitable for live hosting because it is resource-intensive and not optimised for performance.

When you build your React app for production, the build process compiles all your JavaScript, CSS, and assets into a set of static files. These static files — primarily HTML, CSS, and JavaScript — are what you actually upload to your web hosting provider. This means that React apps, once built, can be hosted on virtually any standard web hosting plan that supports static file serving.

Step One: Build Your React App for Production

The first step in React app hosting is creating a production build. Open your terminal, navigate to your project folder, and run the following command:

npm run build

This command triggers Create React App’s built-in build script, which compiles and optimises your application. Once the process is complete, you will find a new folder called build in your project directory. This folder contains all the static files you need to deploy.

What Is Inside the Build Folder?

The build folder typically contains:

• An index.html file, which is the entry point of your application
• A static folder containing minified JavaScript and CSS files
• Any images or other assets used in your project

These files are completely self-contained. Your web server simply needs to serve the index.html file, and the browser will handle loading the rest of the application.

Step Two: Choose the Right Web Hosting Plan

Choosing the right hosting provider is a crucial part of React app hosting. Since a built React app consists of static files, you have several options available to you:

Shared Hosting

Shared hosting is one of the most affordable and widely available options. Many providers offer cPanel-based hosting where you can upload files directly through a file manager or via FTP. This is an excellent choice for smaller React projects or personal portfolios. The key requirement is that the hosting plan supports serving static HTML files, which virtually all shared hosting plans do.

VPS Hosting

A Virtual Private Server (VPS) gives you more control over your server environment. You can install a web server such as Nginx or Apache and configure it precisely to your needs. VPS hosting is ideal if your React app is part of a larger project that also includes a back-end API or server-side logic.

Cloud and Static Hosting Platforms

Platforms such as Netlify, Vercel, and AWS S3 are purpose-built for hosting static sites and React applications. They offer features like continuous deployment, custom domains, and free SSL certificates. These platforms are particularly popular among developers because they integrate directly with Git repositories, allowing you to deploy automatically whenever you push new code.

For a broader look at web hosting options and management tools, take a look at the helpful resources available at da-manager.com/blog.

Step Three: Upload Your Build Files to Your Hosting Server

Once you have chosen your hosting provider, it is time to upload your files. The method you use will depend on your hosting setup.

Using FTP or SFTP

If you are using shared hosting or a VPS, you can upload your files using an FTP client such as FileZilla. Connect to your server using the credentials provided by your hosting provider, navigate to the public directory (often called public_html or www), and upload the entire contents of your build folder. Make sure you upload the contents of the folder, not the folder itself.

Using cPanel File Manager

Many shared hosting providers offer cPanel, which includes a built-in file manager. You can compress your build folder into a ZIP file, upload it via the file manager, and then extract it directly on the server. This is a quick and convenient method if you do not have an FTP client installed.

Step Four: Configure Your Web Server for React Routing

One of the most common issues developers encounter with React app hosting is broken routes. React applications typically use client-side routing via React Router. When a user navigates directly to a URL such as yourdomain.co.uk/about, the server looks for a physical file at that path. Since no such file exists — the routing is handled by JavaScript — the server returns a 404 error.

Configuring Apache with an .htaccess File

If your hosting server uses Apache, you can resolve this issue by creating an .htaccess file in your public directory with the following content:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

This configuration tells Apache to redirect all requests to index.html, allowing React Router to handle the routing on the client side.

Configuring Nginx

If you are using Nginx on a VPS, add the following to your server block configuration:

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

This achieves the same result, ensuring that all routes are handled by your React application rather than the server.

Step Five: Set Up a Custom Domain and SSL Certificate

With your files uploaded and your server configured, the final step is pointing your custom domain to your hosting server and enabling HTTPS. Most hosting providers allow you to manage DNS settings through their control panel. Update your domain’s A record to point to your server’s IP address.

For SSL, many providers offer free certificates through Let’s Encrypt. Enabling HTTPS is essential not only for security but also for search engine rankings, as Google prioritises secure websites.

Tips for Successful React App Hosting

• Always test your production build locally before uploading by running npx serve -s build
• Use environment variables for API keys and sensitive data, and ensure they are set correctly for production
• Enable GZIP compression on your server to reduce file sizes and improve load times
• Set appropriate cache headers for your static assets to improve performance for returning visitors
• Regularly update your dependencies to keep your application secure and performant

Final Thoughts

React app hosting does not have to be complicated. By building your project for production, choosing a suitable hosting plan, uploading your static files, and configuring your server correctly, you can have your React application live and accessible to users around the world in a matter of hours. Whether you opt for traditional shared hosting, a VPS, or a modern cloud platform, the fundamentals remain the same. Follow the steps outlined in this guide, and you will be well on your way to a successful deployment.