如何在React中创建SPA以通过SSI包含

Question

We've been tasked with creating a micro-service front end for another group. We're wanting to create this in React, and the group we're building it for are wanting to include this through a SSI to be a part of their larger page. I've setup my own Nginx server and created a test page to include my basic react app and this worked to include the contents of the page. However, the content of the react page is pointing to relative URL's for things like bundle.js, 0.chunk.js; main.chunk.js; I have setup rules for this in Nginx to also bring those for the origin, but that's less than ideal and I'm still getting 404's on other resources react is trying to pull in.

What's the best way to solve this? Is there a way for React to bundle all it's resources into a single file? Or is what we're trying to do just not feasible?

Here is the segment of my nginx file I'm using to include my react app:

location /test.html {
    ssi on;
    proxy_set_header Accept-Encoding ""; 
    proxy_pass http://local.react.com:3000/;        
}

I added more of these to bring in the JS from the react app that react inserts into the page.

The page I'm including it on just has the include:

<!--#include virtual="test.html" -->

Answer 1

You probably need to change some configuration options. Check create-react-app documentation about PUBLIC_URL setting or webpack documentation about output.publicPath setting.