Create React App
is a boilerplate tool used to create Single Page Applications with React.js without build configuration. Facebook created CRA and made it the official way to start a new React application.
In this page we're going to focus on how to deploy a Single Page Application made with Create React App to Now
. If you want to learn how to use this boilerplate tool we recommend you to read their repository's README
let us deploy a simple static site
without any configuration, and even if a Single Page Application could be considered a static site (since we don't need server side code) is not exactly one and has one special requirement, the routing is handled client side. That means every URL which doesn't resolve to a static file should return the
file so the application can decide if it's a handled URL or not.
Because of this special requirement we can't just do a static deployment
and we need to rely into the Node.js
deployment. In this case we're going to use a Node.js one.
We're going to need a HTTP server for our application, there are many possible ones including Apache, NGINX, express-static, etc. But in our case we're going to use serve
and install it as a dependency in our project.
Then we need to add a script to run this server, because Create React App use
start to run the development server we can decide between changing the default
start script to
dev and run serve using
start or we can define a new script called
This new script is going to be used by Now to run our Node.js application instead of the usual
start script, that way we can continue with the usual workflow of Create React App. And our
now-start script can run the following line.
--single (or just
-s) option is going to tell serve to run the HTTP server to support a Single Page Application, this means every request which can't be resolved to a static file is going to resolve with the
index.html so we can handle routing client side.
./build path is going to define which directory we want our HTTP server to actually serve.
After this the
package.json must looks like this (for a default Create React App project):
"start": "react-scripts start",
"now-start": "serve --single ./build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
Once we did that we can deploy our application with the following command:
Once Now has finished uploading the files, you'll see a URL that points to your freshly created Single Page Application then is going to run
npm run build to build our application code (we don't need to do build in our local machine) and after that start our HTTP server with
npm run now-start.
But in the case of a real application (not used for testing purposes), you would now have to assign an alias