Note: This documentation is for version 1 of the Now platform. For the latest features, please see the version 2 documentation. If you have yet to upgrade, see the upgrade guide.

Building and Deploying a Single Page Application with Create React App

Create React App (CRA) is a boilerplate tool used to create static single-page React applications without build configuration.

The focus of this page will be on how to deploy an application built with Create React app.

To get started, use npm's npx command to run the create-react-app module which will create a React app in a specified directory. For example, the following command, when entered in a terminal with npm installed, will create a React application within the my-app directory:

npx create-react-app my-app

Running `create-react-app` to build an application in the `my-app` directory with `npx`.

With an initialized application in the my-app directory, Create React App has provided a ready-made environment to pick up and go.

Built-in commands provide easy development and production tools, such as running yarn start for a local development server, yarn test for a test-runner, or yarn build to export the app statically.

For alternative methods of installing and a more in-depth guide for how Create React App can help to get started quickly with React, read the documentation for it.

With a freshly created React app, and any changes to is after, it is now time to deploy the app.

For production builds, Create React App provides a command build, within the package.json file, that exports the React application statically. Now supports static applications with no need for additional config. However, in the case of Create React App, it is possible to build the app on Now, as well as deploy it live.

There are a few things to configure to best deploy a React application built with Create React App.

Firstly, the app is a Single Page Application. This means that the entire application will run from a single page, in this case, index.html. To help with this, Now supports a rewrites configuration option, allowing a method of redirecting users from one path to another.

This configuration option will go in a now.json configuration file under the static property. We will also set the type of deployment to static to let Now know that we want a static deployment with a build step.

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

A now.json configuration setting deployment type as static and enabling the rewriting of all paths to point to index.html.

Setting the deployment type to static is essential due to the method of building the app on Now.

Using a Dockerfile that contains build instructions, Now will be able to build the app on deployment, as well as running any tests, stopping the build if they fail.

To build an application created with Create React App when deploying, create a Dockerfile containing the build instructions like the following:

# Use Node.js version 10
FROM mhart/alpine-node:10

# Set the working directory
WORKDIR /usr/src

# Copy package manager files to the working directory and run install
COPY package.json yarn.lock ./
RUN yarn install

# Copy all files to the working directory
COPY . .

# Run tests
RUN CI=true yarn test

# Build the app and move the resulting build to the `/public` directory
RUN yarn build
RUN mv ./build /public

A Dockerfile containing the build instructions for a React app created with Create React App.

Additionally, we can whitelist specific files or directories so that no unnecessary files are deployed with the build, using a .dockerignore file:

*
!src
!public
!package.json
!yarn.lock

A .dockerignore file that is whitelisting the src and public directories and package manager files.

With the configuration complete, when deploying, Now will recognize the options passed in and build the app as expected. All that is left to do is deploy:

now