Deploying create-react-app on nginx with a separate backend

So... you've followed the instructions here and created your shiny new React app, with its own server-side element. Now you want to deploy it to your Production server, which runs nginx... how will you approach it?

The naïve way

Quick and simple - clone your project, start the server and client services, and point nginx at your client app, same as you did during development.  The "proxy" config in the client app then redirects requests to the backend server.

Does this seem right? I don't think so...


You're now going to be told off by React for using the Dev version in Production, and it kind of spoils the whole point of being able to compile it to a single JavaScript if you keep using the Dev server in Production!

The express way

All the documentation I initially read suggests to do this using Express.  Modify your Express configuration (for your back-end) so that it serves up the compiled React app from client/build
You'll then point nginx at your

It's a better idea - now at least you only have one express server runnning... but it still doesn't feel quite right.  The whole point of your initial setup was that you could separate client and server, but now your server app has to be changed so that it can host the client too?

The nginx way

This, to me, is the right way.  We build the React app and create compiled JavaScript with Production optimisations, and get nginx to serve those static files directly.  If the client requests a file that doesn't exist, it attempts to use the backend service instead.

This can be done as follows with a simple nginx configuation:

Here, we tell nginx to serve files on port 80 with the particular servername from the build directory of my deployed application.
Using the magic of try_files, anything that isn't found is instead fetched from the node_backend - here assumed to be running on the same server, on port 5000.

Simple, efficient, and no changes to code needed!