Create-react-app: Any guidance on deploying to GCP App Engine?

[JLaferri]

I notice a lot of deploy options are mentioned on the help guide but I can't help but notice GCP/GAE is missing. Is there any interest in possibly adding information about it or not?

So far what I've done is use react-create-app to make a very basic app structure. I then tried to deploy it via gcloud app deploy and it seems to run but then ends with the following output:

I understand when deploying to production I'm supposed to use npm run build but I'm not sure how to deploy that to GAE either. Any help is appreciated.

[tbillington]

You'd host the built output in build/ as a static directory is appengine. Look up app.yaml static directories.

[JLaferri]

Hey tbillington, thanks for the answer.

I set up my app.yaml to look something like

# [START runtime]
runtime: nodejs
env: flex
# [END runtime]

# [START handlers]
handlers:
- url: /asset-manifest.json
  static_files: build/asset-manifest.json
  upload: build/asset-manifest.json
- url: /favicon.ico
  static_files: build/favicon.ico
  upload: build/favicon.ico
- url: /index.html
  static_files: build/index.html
  upload: build/index.html
- url: /static/css/main.9a0fe4f1.css
  static_files: build/static/css/main.9a0fe4f1.css
  upload: build/static/css/main.9a0fe4f1.css
- url: /static/media/logo.5d5d9eef.svg
  static_files: build/static/media/logo.5d5d9eef.svg
  upload: build/static/media/logo.5d5d9eef.svg
- url: /static/css/main.9a0fe4f1.css.map
  static_files: build/static/css/main.9a0fe4f1.css.map
  upload: build/static/css/main.9a0fe4f1.css.map
- url: /static/js/main.310f254a.js
  static_files: build/static/js/main.310f254a.js
  upload: build/static/js/main.310f254a.js
- url: /static/js/main.310f254a.js.map
  static_files: build/static/js/main.310f254a.js.map
  upload: build/static/js/main.310f254a.js.map
# [END handlers]

I also tried:

# [START runtime]
runtime: nodejs
env: flex
# [END runtime]

# [START handlers]
handlers:
 - url: /
   static_files: build/index.html
   upload: build/index.html

 - url: /(.*)
   static_files: build/\1
   upload: build/(.*)
# [END handlers]

In both cases I ran gcloud app deploy from the root directory containing my app.yaml file but got the same output. Clearly I'm still missing something.

[JLaferri]

So I changed my package.json to read:

{
  "name": "fizzigg-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "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"
  }
}

My app.yaml reads:

# [START runtime]
runtime: nodejs
env: flex
# [END runtime]

# [START handlers]
handlers:
 - url: /
   static_files: build/index.html
   upload: build/index.html

 - url: /(.*)
   static_files: build/\1
   upload: build/(.*)
# [END handlers]

After that gcloud app deploy worked fine. Dunno if I did everything exactly correctly but the result appears successful. Thanks for guidance. Any other tips are appreciated.

[tbillington]

Yup, that's the right idea :) just host the whole build dir as a static directory. You should also add caching in the app.yaml too seeing as the js and css contain a cache busting hash in the name and all your assets are static.

[BrendanFDMoore]

Thanks @JLaferri - that worked nicely.

[jlcastrillon91]

Worked for me too, Thanks @JLaferri