8 React Application Deployment and Hosting Options for 2019

1. Firebase Hosting

Firebase Hosting

Firebase Hosting is part of the many services Google’s firebase offers like authentication, storage, cloud functions and even database. This is basically a ststic site hosting that would be perfect for any frontend react application, it also supports SSL, CDN and custom domains.

To use firebase hosting:

• Ensure you have a google account
• Login to Firebase Console
• Create a project
• Navigate to the hosting tab and click get started.

After this, you proceed to install firebase cli on your terminal with this line of command:

npm install -g firebase-tools

This would install firebase tools globally and you can now deploy using these commands sequentially in your terminal:

// cd to your project folder
firebase init

firebase deploy

Firebase would deploy your application to yourProjectName.firebaseapp.com

2. Github Pages

Github Pages

React applications by default when you build out for production gives you github pages as a great deployment option. Github pages is a deployment service by github that builds and deploys your react application straight from the application repository with a smooth git integration, it is such a breeze to use. When you run:

yarn build

React builds out your application for production and afterward shows you a suggestion if you choose to use github pages. Copy the homepage description given, it would look like this:

“homepage” : “https://yourgithubname.github.io/yourreponame",

Add it to your package.json file, then re-run the build command:

yarn build

Go to the package.json and add a new line under scripts

“deploy”: “gh-pages -d build”

Then deploy with oneline of command:

npm run deploy

Open the homepage on your browser and see the react application is live.

3. Netlify

Netlify

Deploying with Netlify is one of the the trendiest ways to put your react application out in the universe. Netlify provides a very stress-free and easy-to-use interface where you literally just click and select options and configure deployments and build your app from a development environment from a repository like github, you can even test deploys and also get support for A/B testing from the same user interface.

To get started:

• create a netlify account
• login to the created account
• click new site from git on the top right corner.
• choose github (if that’s where your project is)
• follow the prompt to add navigation and test deploy
• hit deploy site button

This can be achieved manually too in your terminal with a few commands

npm install netlify-cli -g

netlify deploy

And you would have a netlify.com project deployed successfully.

4. Heroku

Heroku

Heroku, an industry leading cloud-platform-as-a-service that handles a number of cloud based operations which includes building, managing and deployment of applications is a great place to start deploying your react application. If you wish to use create-react-app to build out your react application, here is an easy way to deploy it on heroku:

• create a heroku account
• login to the created account

You can now open your terminal and run the following commands below:

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

After this, you have successfully deployed your react application, check your dashboard for the application link.

5. Now

Now

Ziet’s Now is a revolutionary serverless deployment service for various kinds of applications including react applications all the way to node applications. It provides a very robust support for the CLI also and it is smoothly integrated with github. To get started:

• install now desktop here (it ships with the cli tool)

alternatively use npm:

npm install -g now

• Create a new account on now
• Login with the newly created account.

To deploy a react application, navigate to the root folder of your built project and run the now command in the terminal:

now --name your-project-name

A now.json file should appear in the root folder looking like this:

{
  "version": 1,
  "type": "static",
  "static": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Follow the prompt and you will successfully deploy your application.

6. Surge

Surge

Surge is a very popular hosting service for static applications like react applications tastefully targeted at frontend web developers. The free plan supports custom domains, making it a really great option for deploying react applications. To get started:

• install surge using npm

npm install -g surge

• build out your react application

cd your-react-project

npm run build

• navigate to build folder

cd build

• run surge

surge

Follow the prompt and you will be given a surge url where your react application is live at.

7. AWS S3

Amazon S3

Amazon web services has a suite of cloud services to support every single part of software development cycle. They have a couple of services for deployment of web applications and S3 is one of the less complicated one to use. It is often said that a lot of amazon web services sacrificed simplicity of getting started for flexibility of usage. There is however a cli tool built by a community member for easily deploying your react application to the amazon s3 service called s3cmd. To get started:

• sign up to aws services
• login to the created account
• open an s3 bucket according to your preferable data point/center
• Download s3cmd here

Note: Amazon web services has an AWS CLI tool but we are using the s3cmd tool in this article

Alternatively, if you have homebrew, you can install with this line of command:

brew install s3cmd

We need the access keys of the bucket at this stage, so to get the keys lookup this guide

When you have gotten the keys, run this line of command to use them:

s3cmd --configure

when prompted, paste in the keys you already got. We go ahead to list all our buckets with this command:

s3cmd ls

Now let us build out ur react application

yarn build

To synchronise the build folder with our s3 bucket, we run this:

s3cmd sync LOCAL_DIR s3://BUCKET[/PREFIX]

And your react application would be automatically deployed to your s3 bucket successfully. After making any changes, just re-run the following commands:

yarn build

s3cmd sync build/* s3://reactApp

To make it even a little easier, you can add these commands to your package.json file so that you can run it all like a yarn command

"build-deploy":"yarn build && s3cmd sync build/* s3://reactApp && echo 'Deployed Successfully' "

8. Roast

Roast

Roast is a content delivery network static web host you can use to deploy your react applications. It is built with speed and simplicity in mind with provisions for https and full-page server-side render. To get started:

• Create an account on roast here
• login with your new account.
• Install the Roast CLI tool

npm install -g roast

Then build out your react application:

yarn build

Add a _redirects file. See a guide here . When that is done, you can deploy your react application by running a line of command:

roast deploy

You would see your react application live with a roast url.