Building a Single Page Application with Create React App
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.
now 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 index.html 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 or Docker 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.
npm install --save serve
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 now-start.
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.
serve --single ./build
The --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.
The ./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):
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 to it.