Deploy a React application with Now and Create React App

How to deploy your Create React App project with Now

React is a popular open-source JavaScript framework, maintained by Facebook, for easily creating interactive single-page applications (SPAs).

In this guide, we will cover how to set up a React application with Create React App and how to deploy it with ZEIT Now.

An easy way to set up a React application is to use Create React App (CRA). A CLI tool that helps generate a project for you to get up and go without any manual set up.

A fast method of setting up with CRA is to use Yarn in your terminal. The following command helps use CRA without installing it permanently on your system. The command will also move you into the directory:

yarn create react-app my-react-app && cd my-react-app

Bootstrapping a React application with Create React App through Yarn.

If you would prefer to use another method, see the Quick Start documentation for CRA.

Once you have set up a React project with Create React App, you will be presented with information, one piece of which will tell you that you can now start your local development server with the following command:

yarn start

Starting a local development server for React with generated scripts from Create React App.

You can now start developing your React application while testing it on your local server.

With your React project set up, you are ready to deploy your app with Now.

If you have not yet installed Now, you can do so by installing the Now Desktop app which installs Now CLI automatically, or by installing Now CLI directly.

For the deployment to build and act as you would expect, you will need to create a now.json configuration file to instruct Now on how to handle your application in the build phase and when being served to visitors.

{
  "version": 2,
  "name": "my-react-app",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": { "distDir": "build" }
    }
  ],
  "routes": [
    {
      "src": "^/static/(.*)",
      "headers": { "cache-control": "s-maxage=31536000,immutable" },
      "dest": "/static/$1"
    },
    { "src": "^/favicon.ico", "dest": "/favicon.ico" },
    { "src": "^/asset-manifest.json", "dest": "/asset-manifest.json" },
    { "src": "^/manifest.json", "dest": "/manifest.json" },
    { "src": "^/precache-manifest.(.*)", "dest": "/precache-manifest.$1" },
    {
      "src": "^/service-worker.js",
      "headers": { "cache-control": "s-maxage=0" },
      "dest": "/service-worker.js"
    },
    {
      "src": "^/(.*)",
      "headers": { "cache-control": "s-maxage=0" },
      "dest": "/index.html"
    }
  ]
}

A now.json configuration file that specifies a static-build Builder and routes for a React application.

The above now.json file may look daunting, but it achieves a lot in a very simple way:

  • Defines a version property to ensure you are using the latest Now 2.0 platform version.
  • Defines a project name that your deployments will be sorted under and known by under Now.
  • Defines a builds property as an array with one build step using @now/static-build to instruct Now to statically build the project and deploy the build directory. Using the package.json file as an entrypoint, more on that below.
  • Defines a routes property as an array that contains route objects to route all files to the right place whilst providing a fallback to index.html for all other routes so that React can handle routing and pages internally.

The routes option above also contain headers for caching. All files in the static directory are cached forever in a shared cache because they have a hash assigned to them on generation. Both service-worker.js and index.html are never cached since they must always serve fresh content.

For the build property that you configured, add a now-build script in the generated package.json file to specify what command Now will run to build the app in the cloud.

{
    ...
    "scripts": {
      ...
      "build": "react-scripts build",
      "now-build": "react-scripts build"
    }
}

A package.json file with scripts for CRA generated React.

The CRA generated build script creates a directory called build which Now identifies as the static folder through the distDir configuration option, which you provided to the builder in the now.json configuration, and will deploy that directory.

Note: Don't forget to exclude the node_modules folder from being uploaded to Now to enable faster deployment. To do that, add a .nowignore file to the root of the project directory and add node_modules to it.

You are now ready to deploy the app with Now:

now

Deploying your React app with Now CLI from a terminal.

Once the app is deployed, you will receive a deployment URL similar to the following: https://my-cra-project-4rx7b16z3.now.sh

For more information on working with React and Create React App, please refer to the React documentation and the Create React App documentation.

To configure Now further, please see these additional topics and guides:


How Was This Guide?

Written By
Written by timothytimothy
on February 6th 2019