React JS routers doesn't work

[Birhanu Hailemariam]

I have deployed a compiled ReactJS app to the App engine but, routes are not working other than the root "/" route which is directing to "index.html" page (i.e app's the entry point). 

My app.ymal file is fairly a simple one. What do I miss here?!

# [START runtime]

runtime: nodejs8

api_version: 1

instance_class: F2

handlers:

- url: /

  static_files: dist/index.html

  upload: dist/index.html

  secure: always

- url: /

  static_dir: dist

# [END runtime]

[Katayoon (Cloud Platform Support)]

You may check your handler elements descriptions through this link.

Note that Google Groups are reserved for general Google Cloud Platform-end product discussions and not for technical questions. For further technical support, I recommend that you post your full detailed question to Stack Overflow, using the supported Cloud tags.

[Birhanu Hailemariam]

I checked the GCP documentation throughly prior to publishing my question and there isn't any clear instruction for mapping ReactJS routes correctly in app.ymal config handlers. And, I was wondering if I cloud be missing something in my config or is it even possible achieving this with App Engine at all!... Anyway, will continue looking for the answer in other platform. Than you for the tips!

On Wed, Jul 25, 2018 at 11:28 PM 'Katayoon (Cloud Platform Support)' via Google App Engine <google-a...@googlegroups.com> wrote:

You may check your handler elements descriptions through this link.

Note that Google Groups are reserved for general Google Cloud Platform-end product discussions and not for technical questions. For further technical support, I recommend that you post your full detailed question to Stack Overflow, using the supported Cloud tags.

--
You received this message because you are subscribed to the Google Groups "Google App Engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-appengi...@googlegroups.com.
To post to this group, send email to google-a...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-appengine.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-appengine/c95cee97-96a4-45e3-b619-63de54f3622e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jean Juste-constant]

It seems your first handlers is setting '/' with 'dist/index.html'. I would change the second handler to be more precise or simply add the wildcard: '/*'. This way any url other than the root '/' should refer to the static dir you've set. 

On Wednesday, July 25, 2018 at 5:23:34 PM UTC-4, Birhanu Hailemariam wrote:

I checked the GCP documentation throughly prior to publishing my question and there isn't any clear instruction for mapping ReactJS routes correctly in app.ymal config handlers. And, I was wondering if I cloud be missing something in my config or is it even possible achieving this with App Engine at all!... Anyway, will continue looking for the answer in other platform. Than you for the tips!

On Wed, Jul 25, 2018 at 11:28 PM 'Katayoon (Cloud Platform Support)' via Google App Engine <google-appengine@googlegroups.com> wrote:

You may check your handler elements descriptions through this link.

Note that Google Groups are reserved for general Google Cloud Platform-end product discussions and not for technical questions. For further technical support, I recommend that you post your full detailed question to Stack Overflow, using the supported Cloud tags.

--
You received this message because you are subscribed to the Google Groups "Google App Engine" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-appengine+unsubscribe@googlegroups.com.
To post to this group, send email to google-appengine@googlegroups.com.

[Birhanu Hailemariam]

That looks like it. Changed the first handler to this /(.*) and the send only to / and now got it work. Thanks, Jean!

On Fri, Jul 27, 2018 at 12:26 AM 'Jean Juste-constant' via Google App Engine <google-a...@googlegroups.com> wrote:

It seems your first handlers is setting '/' with 'dist/index.html'. I would change the second handler to be more precise or simply add the wildcard: '/*'. This way any url other than the root '/' should refer to the static dir you've set. 

On Wednesday, July 25, 2018 at 5:23:34 PM UTC-4, Birhanu Hailemariam wrote:

I checked the GCP documentation throughly prior to publishing my question and there isn't any clear instruction for mapping ReactJS routes correctly in app.ymal config handlers. And, I was wondering if I cloud be missing something in my config or is it even possible achieving this with App Engine at all!... Anyway, will continue looking for the answer in other platform. Than you for the tips!

On Wed, Jul 25, 2018 at 11:28 PM 'Katayoon (Cloud Platform Support)' via Google App Engine <google-a...@googlegroups.com> wrote:

You may check your handler elements descriptions through this link.

Note that Google Groups are reserved for general Google Cloud Platform-end product discussions and not for technical questions. For further technical support, I recommend that you post your full detailed question to Stack Overflow, using the supported Cloud tags.

--
You received this message because you are subscribed to the Google Groups "Google App Engine" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-appengi...@googlegroups.com.
To post to this group, send email to google-a...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-appengine.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-appengine/c95cee97-96a4-45e3-b619-63de54f3622e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "Google App Engine" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-appengi...@googlegroups.com.
To post to this group, send email to google-a...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-appengine.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-appengine/aff8b2b7-08c4-4d45-a6cc-252e827d5f68%40googlegroups.com.

[Nikos Katsikanis]

pls share your ap.yaml, I have the same issue with a vue app

[Yasser Karout (Cloud Platform Support)]

Birhanu's app.yaml looks like this according to the changes he mentioned:

# [START runtime]
runtime: nodejs8
api_version: 1
instance_class: F2


handlers:

- url: /(.*)
  static_files: dist/index.html
  upload: dist/index.html
  secure: always

- url: /
  static_dir: dist
# [END runtime]

[Birhanu Hailemariam]

Yes Yasser, part of it is exactly like that and I also added the following line between those urls. 

`

- url: / 

  static_files: dist/index.html 

  upload: dist/index.html`

`

To view this discussion on the web visit https://groups.google.com/d/msgid/google-appengine/b778e78d-d617-4a3a-8707-2bc60aeebf4e%40googlegroups.com.