CODEWITHSUNDEEP
javascriptreactjsgoogle-app-engine
Max Schmidt
Max Schmidt

Reputation: 63

Deploy react app on Google App Engine: app.yaml problems with path

I try to run a react app on google app engine, but have some issues with the app.yaml configuration. The react app is working, if the url path is https://example.com/path. But there are also some routes like https://example.com/path/subpath, which not working.

Problem is that the react app tries to get .js and .css files with the following path:

But it have to be:

With an ending / the path is also not working: https://example.com/path/

My app.yaml:

service: react-app
runtime: nodejs12
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

My folder structure is:

build/
- static/
-- css/
-- js/
-- media/
- index.html
app.yaml

Maybe someone have the same issue or some solution for me. Thank you!

Upvotes: 1

Views: 847

Answers (1)

Roger
Roger

Reputation: 166

I see you're having issues on deploying your App Engine application, that when trying to get your .js and .css files your application is searching for them in the incorrect paths.

There is official documentation on how to manage and serve static files for App Engine using NodeJS, you could try to follow the guidelines used in the documentation on how to structure your app.yaml file to properly fetch your static files.

I also found a guide (though it is using Python as a runtime) that shows a similar project structure and an example on how you could structure your app.yaml too.

I think the way your app.yaml file fetches for the URLs might be the issue, though the overall handler structure for the subpaths should be revised too.

Upvotes: 1

Related Questions