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

Did you do npm run build before deploying ?

Help
– Help

2019-02-22 06:09:22 +00:00
Commented Feb 22, 2019 at 6:09 — Help
– Help, Commented Feb 22, 2019 at 6:09
I did, but not worked...

Daisuke SHIBATO
– Daisuke SHIBATO

2019-02-22 06:13:27 +00:00
Commented Feb 22, 2019 at 6:13 — Daisuke SHIBATO
– Daisuke SHIBATO, Commented Feb 22, 2019 at 6:13

Daisuke SHIBATO · Accepted Answer · 2019-02-22 10:55:12Z

25

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

answered Feb 22, 2019 at 10:55

Daisuke SHIBATO

1,0132 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fsbflavio Over a year ago

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

Harsh Makadia · Accepted Answer · 2019-02-22 06:53:33Z

7

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!

edited Feb 22, 2019 at 6:53

answered Feb 22, 2019 at 6:45

Harsh Makadia

3,4436 gold badges36 silver badges43 bronze badges

5 Comments

Harsh Makadia Over a year ago

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

Daisuke SHIBATO Over a year ago

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 Over a year ago

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.

Oliver Dixon Over a year ago

Tries to upload all the node_modules as well?

Harsh Makadia Over a year ago

No it shouldn't

Collectives™ on Stack Overflow

Deploy create-react-app on Google App Engine

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related