search

stereobooster / react-snap

👻 Zero-configuration framework-agnostic static prerendering for SPAs
MIT License
5.04k stars 391 forks source link

Support relative links to JS/CSS assets #397

Open IanLondon opened 4 years ago

IanLondon commented 4 years ago

Feature Request

Is your feature request related to a problem? Please describe.

When I have a site with routes and I pre-render it with react-snap, JS and CSS assets are referenced by absolute path, eg <script src="/bundle.js">. The way we deploy this site, we want it to work the same when it's deployed to http://staging.example.com/branchBuild/ as it does when the same artifact (no rebuild!) is served at https://example.com/. We might have a page http://staging.example.com/branchBuild/about/team that should work the same if the URL is http://example.com/about/team (note that it's not nested under branchBuild/ here)

The problem is that react-snap generates build/about/team/index.html with its CSS and JS tags pointing to something like /bundle.js instead of ../../bundle.js.

Images are not a problem with my setup because I can do __webpack_public_path__ = getDynamicPublicPathFromUrl() upon navigation.

Describe the solution you'd like

My horrible hack is to prerender the site with react-snap, then iterate over all the HTML that was generated and use edit all script and link elements that have absolute paths, replacing those absolute paths with ones that are relative to the root of the build directory (via path.relative).

I would like react-snap to do this instead of having this weird post-prerender step.

Describe alternatives you've considered

No webpack configuration approach that I can think of would make this work, especially with the requirement that we don't rebuild it with a different publicPath.

stereobooster commented 4 years ago

I guess this is related to https://github.com/stereobooster/react-snap/issues/153

browne0 commented 4 years ago

Can confirm that I've had to do this too!