How do I setup routing for react in GAE? Directly routing to react-router-dom routes via URL fails in GAE on basic create-react-app?

[Nathan Grubb]

Setting GAE app.yaml for react-router routes produces "Unexpected token <" errors.

-----------------

In the development environment, all routes work when called directly.  localhost:5000 and localhost:5000/test produce expected results.

In GAE standard app.yaml functions for the root directory when the URL www.test-app.com is called directly.  **www.test-app.com/test produces a 404 error.**

app.yaml #1

runtime: nodejs8
instance_class: F1
automatic_scaling:
  max_instances: 1


handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /
    static_dir: build

Configuring app.yaml to accept wildcard routes fails for all paths.  www.test-app.com/ and www.test-app.com/test produce an error "Unexpected token <".  It appears that it is serving .js files as index.html.

app.yaml #2

runtime: nodejs8
instance_class: F1
automatic_scaling:
  max_instances: 1


handlers:
  - url: /.*
    static_files: build/index.html
    upload: build/index.html
  - url: /
    static_dir: build

Steps to reproduce this issue:

==============

Node: 10.15.0

npm: 6.4.1

gcloud init via Google Cloud SDK

npm init react-app test-app

npm install react-router-dom

Add router to index.js:

index.js

import {BrowserRouter as Router, Route} from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';




ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root'));
serviceWorker.unregister();

Add routing to app.js:

app.js

import {Route} from 'react-router-dom'
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
  render() {
    return (
      <div>
        <Route exact path="/"
          render={() =>  <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>} />
        <Route exact path="/test"
          render={() =>  <div className="App">
            Hello, World!
          </div>} />
      </div>
    );
  }
}


export default App;

No changes to package.json:

package.json

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3"
  },
  "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"
  ]
}

npm run build

gcloud app deploy

How do we convince app engine to allow a react SPA to process routes directly?

-----------------

[dang...@google.com]

Hello, 

It seems that you got a great answer on Stack overflow already[1]

Should you have any concern regarding this issue please do not hesitate to contact us.

[1] https://stackoverflow.com/questions/54247953/how-do-i-setup-routing-for-react-in-gae-directly-routing-to-react-router-dom-ro