Search code examples
reactjsgoogle-app-enginegoogle-cloud-platformsubdomain

React app not locating .js files when deployed to custom domain with Google Cloud (GAE)

I have a React app that I am trying to get running on a custom domain app.[customDomain].com with GCP. It can't locate the static files and I'm not sure why.

The react app is deployed as a service on Google cloud (not default, is second service in project). It functions perfectly with on the Google assigned URL (https://[Service_ID]-dot-[Project_ID].ue.r.appspot.com/). When running through a custom domain, index.html loads but none of the .js files are found (so result is blank screen) and give this error:

.js files error with 404

enter image description here

The other service in the project (is default and a Django API) serves on the same domain perfectly well and I am aiming for the React app to serve on a app. subdomain. To achieve this I have the following dispatch.yaml

dispatch:
- url: "www.[customDomain].com/"
  service: default

- url: "api.[customDomain].com/"
  service: default

- url: "app.[customDomain].com/"
  service: React-App

I suspect the problem is in app.yaml for the react app but I can't work out what needs changing. This is the current app.yaml

env: standard
runtime: nodejs14
service: React-App
handlers:
- url: /static
  secure: always
  static_dir: build/static
- url: /(.*\.(json|ico|js))$
  secure: always
  static_files: build/\1
  upload: build/.*\.(json|ico|js)$
- url: .*
  secure: always
  redirect_http_response_code: 301
  static_files: build/index.html
  upload: build/index.html

I have tried changing "homepage" in package.json but with no success.

Aside from the dependancies, the package.json contains:

"name": "React-App",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000",
Solution

  • Found the issue myself. The issue is in dispatch.yaml. The urls fields need to be [subDomain].[customDomain].com/*.

    In current form it is an exact text match on URL only (with fall back to default service). This means the initial load of the page was hitting React-App service but the loading of resources was falling to the default service and so they couldn't be located. Adding * to the urls meant the resource requests were routed to the correct service.