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 (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
now init create-react-app
to initialize your application, you can skip to the next step!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 thebuild
directory. Using thepackage.json
file as an entrypoint, more on that below. - Defines a
routes
property as an array that containsroute
objects to route all files to the right place whilst providing a fallback toindex.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/
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.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: