Deploy create-react-app on Google App Engine

Question

I'm trying to deploy my app created using create-react-app on Google App Engine.

My app works well on local (both npm start and npm run build & serve -s build). However, the deployed app on Google App Engine shows only the index.html, and does not call my react code.

The Chrome Developer Console is showing Uncaught SyntaxError: Unexpected token <.

Also, I found on console.cloud.google.com that the deployed app did not include the build folder. Is this correct?

Anyone can solve this problem?

Here is my package.json:

{
  "name": "XXXXX",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-ga": "^2.5.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Also, here is my app.yaml.

runtime: nodejs10

handlers:
- url: /.*
  static_files: build/index.html
  upload: build/index.html
- url: /
  static_dir: build

Solution 1

As a result of searching the web many times, I found that the routing system of my react app was the cause.

As this post states, we need to be careful about authoring app.yaml. If we write the following item first, GAE returns build/index.html for all queries, including access to /static/js and /static/css.

- url: /
  static_files: build/index.html
  upload: build/index.html

create-react-app creates a build folder and static subfolders for npm run build. Thus, I had to write my app.yaml more specific like this:

handlers:
  - url: /static/js/(.*)
    static_files: build/static/js/\1
    upload: build/static/js/(.*)
  - url: /static/css/(.*)
    static_files: build/static/css/\1
    upload: build/static/css/(.*)
  - url: /static/media/(.*)
    static_files: build/static/media/\1
    upload: build/static/media/(.*)
  - url: /(.*\.(json|ico))$
    static_files: build/\1
    upload: build/.*\.(json|ico)$
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /.*
    static_files: build/index.html
    upload: build/index.html

Solution 2

Can you check this document - https://medium.com/tech-tajawal/deploying-react-app-to-google-app-engine-a6ea0d5af132

This will help you. I have deployed my app using same steps.

sample yaml file

    runtime: python27
    api_version: 1
    threadsafe: true
    handlers:
    - url: /
      static_files: build/index.html
      upload: build/index.html
    - url: /
      static_dir: build

Reference link - https://medium.com/google-cloud/how-to-deploy-a-static-react-site-to-google-cloud-platform-55ff0bd0f509

Thank you!

Comments

[Harsh Makadia]

@Daisuke SHIBATO - Added .yaml file and reference link for making things clear.

[Daisuke SHIBATO]

Hi Harsh, thanks for your comment. I found that the cause of this problem was my routing of the react app on GAE.

[Harsh Makadia]

Glad your problem was solved. Please accept this answer if it helped you so that others having a similar issue can find this helpful too.

[fsbflavio]

Please edit the answer putting the complete app.yaml. what did you put in runtime?

[Oliver Dixon]

Tries to upload all the node_modules as well?

[Harsh Makadia]

No it shouldn't