App Engine app.yaml handlers for built React app

GAE will run npm start to run your react app. Therefore you need to configure your package.json to tell GAE serve your build folder:

  "scripts": {
    "start": "serve -s build",
    ...
  },

Also need to configure your .yaml file accordingly:

handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /(.*)$
    static_files: build/\1
    upload: build/(.*)

Modify the scripts in package.json to have GAE use serve to serve the build dir instead of the root directory.

Upon deployment, GAE will run npm start to begin serving your application. By changing what the start script maps to, you can have the build directory served as desired. You will have to use npm run local when doing local development with this setup, as you are changing what npm start is doing.

This process requires you to run npm run build before deploying to GAE. This will serve the build directory for you, but it does not automatically run the build process for you, so that must still be done to serve your latest code in /src.

Source: https://github.com/facebook/create-react-app/issues/2077

Code:

"scripts": {
  "start": "serve -s build",
  "prestart": "npm install -g serve",
  "local": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}