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 On Friday, January 18, 2019 at 3:17:45 PM UTC-5, Nathan Grubb wrote: > > > *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 > <http://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? > ----------------- > -- 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 [email protected]. To post to this group, send email to [email protected]. 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/9ed158a0-d120-46c6-ae59-dbf89be96675%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
