Deploy a React application with Now and Create React App

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 (CRA) and how to deploy it with ZEIT Now.

Step 1: Set Up Your React Project

If you want to set up a React project with configuration done and ready for you to skip straight to developing your app, you can use Now CLI to initialize a Now-ready Create React App project using the following command from your terminal:

Initializing a Now-ready Create React Project with Now CLI.

Alternatively, set up a React application using the Create React App (CRA) CLI tool. With this, you can generate a project to get up and running with React.

Using Yarn, you can setup a React app with CRA with the following command in your terminal:

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.

Step 2: Preparing for Development and Deployment

For your project to build and act as you would expect, with Now, 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.

Create a now.json file at the root of your project and place the following inside:

{
  "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 achieves the following:

• 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.
• 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.

Caching React with Now Routes

The routes option above also contains 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.

Step 3: Local Development

When you set up a React project with Create React App's CLI tool, you would have been presented with information telling you that you can now start your local development server. To replicate the Now environment locally, you should add the following script to your package.json file:

{
  "scripts": {
    ...
    "now-dev": "react-scripts start"
  }
}

The @now/static-build Builder supports a custom now-dev script that allows you to define custom development behavior while gaining extra features that mimic the Now platform locally.

Now, with just a single command, you can simulate the Now environment locally:

Running the Now environment locally with a single command.

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.

Step 4: Deploying

The next and final step is to deploy your application with a single command.

With Now, you can deploy your application to different environments, depending on what stage your application is at; either staging or production.

To deploy to a unique alias, use the following Now CLI command from your terminal:

Deploying with Now CLI in one command.

For production deployments, you can deploy to an alias of your choice. To do so, add an alias to your now.json file:

{
  ...
  "alias": "my-react-project"
  ...
}

Extending a now.json file with an alias property. Replace the value with your own.

Now, deploy your project to a production environment using the following command:

Deploying to production with Now.

When complete, Now CLI will provide you with the URL your project has been deployed and aliased to. In the case above, the alias was set to my-react-project.now.sh.

You can view the aliased deployment from this guide here: https://my-react-project.now.sh/

Resources

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: