Separate Node and React App: Allow Express passthrough to React Router

36
December 17, 2017, at 4:22 PM

I have two separate apps: one of them is my API in Node with Express, and the other is my front end in React with React Router.

Typically when doing smaller apps, you might have the server code colocated with your client code in the same repo, but in this case they are separate repos. I am trying to allow passthrough to React Router from Express if the route is not matched, and we traditionally do it like this:

app.get('*', function(req, res) {
  res.sendFile(path.resolve(__dirname + 'dist/index.html'));
});

See the problem? I don't have the dist folder on my server, so I have no reference to the index.html available. The reason I broke out the repos is because I upload all the front end code to a CDN, and can just proxy the network requests to my API.

How do I allow the passthrough from Express to React Router if I don't have a file or path to resolve in the res.sendFile catch-all ?

Answer 1

A bit of a hack, but I realized that this would probably work and I tried it out and it does indeed. You can probably take this a step further and even extract the referrer from req.headers.

    request("https://yourwebsite.com/index.html",(error, response, body) => {
      res.send(body)
    }
READ ALSO
PDF is uploaded but blank

PDF is uploaded but blank

I'm trying to upload a PDF file to AWS using the request data I'm gettingThis is what the data looks like

57
Mongodb conditionally update doubly nested array

Mongodb conditionally update doubly nested array

My collection looks like thisA document contains an array of suggestions

57
How to use ES6 import with 'request' npm module

How to use ES6 import with 'request' npm module

In ES6-ifying some TypeScript code (the project I'm working runs in both the browser and a Node server, I'd like to tree-shake the browser bundle), I'm trying to eliminate uses of require and only use importBut when I do this

48