Deploying and Hosting a React App

Deploying a React app has become quite an easy task these days. With modern build commands packaged with tools like create-react-app, and amazing hosting platforms like Netlify and Surge, you can quickly build and deploy your React app with a single command or push to Github.

Building a React app

First, we need to prepare our React app to run on production. When you’re working on the app locally on your machine, you’re working in development mode. This allows you to easily see your source code for debugging. We want our users to see the minified version of the app, which is smaller and faster. We can create this “production build” by running a build command.

If you’re using create-react-app, the build command is npm run build or yarn build. Your entire production app will then be built inside the build directory in your project. If you’re using gatsby, it will appear in the public directory. This directory is important because it’s what we need to tell our deployment tool where to host.

Deploying with Surge

After you’ve ran the build command, you can deploy the app in seconds using a deploy tool called Surge.sh.

• To install surge, just run npm install --global surge.
• Then simply run surge. If the command was installed, you should now receive some prompts:
• First, enter in [your-project-directory]/build.
• Then, type the name of your subdomain that you want to deploy on or leave the existing one as is.
• Confirm the prompt and that’s it! Your app is now deployed on [your-sub-domain].surge.sh

While Surge is great, it is limiting for serious projects. For one, it cannot build directly from your Github repository. They offer git hooks, but this is only to setup a pre-commit hook to run whenever you push from your local machine. Building locally isn’t always the most convenient option. That’s why we recommend a more robust tool that can build on with its own servers at high performance.

Deploying React apps on Netlify

Netlify offers the perfect platform for “continuous deployment”, a term used to describe the process of rapidly building and releasing code after a build has succeeded. Sure, you could build and deploy on your local machine, but then you may want to additionally push your code to Github. This process isn’t great because you don’t know what code is deployed vs what code is on Github.

Netlify allows you to quickly setup a build and deploy pipeline right from a Github repo. After pushing to Github, you’ll see a build appear in Netlify with the status and terminal output. If it fails, you’ll get notified why and see the errors right from the Netlify dashboard.

• First, login to Netlify and click create a new site from Git:
• Next, select Github:
• If you don't see your repository, follow this link:
• Choose your repository once authenticated in Github:
• Setup your build settings (this is assuming you're using create-react-app, if you're using Gatsby, it's the public directory):
• Click deploy site!
• You should now see your site URL:
• Now, whenever you push to the Github master branch, you'll see a build appear inside Netlify:

Netlify's starter plan is free for hosting your React projects (up to a certain build time and bandwith).

Hope this worked out! If you had issues, Netlify has a great community forum where you can search for issues.