CODEWITHSUNDEEP
webpack
kubal5003
kubal5003

Reputation: 7254

How to force webpack to generate dynamic publicPath for resources

I'm trying to figure out how to implement a MicroFrontend Host application that would be able to bootstrap one or more React applications built with webpack. For that purpose I need to force the application to load its resources from some different URL - and not just using relative paths.

Webpack has a nice feature for setting the public path: https://webpack.js.org/guides/public-path/ However there are some limitations:

Is there any way to make such a public url dynamic for an application built with webpack? I can live with the fact that I will have to manually update all urls in index.html, but then all the other resources (images, etc) I'd like to be able to get from some other URL. This is in general similar to hosting all the resources generated by webpack on a CDN and having index.html still served from a web server with a different address.

Upvotes: 5

Views: 1757

Answers (2)

Filipe Borges
Filipe Borges

Reputation: 2793

I have a setup with the same app build using distinct roots on distinct servers. In my case the On The Fly publicPath solves the issue, I just need to tweak the html with a server var replacement and 'fix' my webpack entries.

My entries are like this, the fix should be first thing loaded:

entry : {
    entryfile: [ "./fix-public-path.js", "./entryfile.js" ];
}

./fix-public-path.js has this content:

if (window.__PUBLIC_PATH__) {
  __webpack_public_path__ = window.__PUBLIC_PATH__; // eslint-disable-line
}

And my index file has this as the first script on the file:

<script>
    __PUBLIC_PATH__ = "@SERVER_SIDE_PUBLIC_PATH@";
</script>

Never tested replacing @SERVER_SIDE_PUBLIC_PATH@ with cdn urls, but I think it would work.

Upvotes: 0

nickbullock
nickbullock

Reputation: 6619

I think this feature should be configured on your frontend server (nginx/apache/node), not webpack.
It looks like you just need a proxy configuration for it. Example for webpack-dev-server, you can try something like this on localhost: 

devServer: {
  proxy: [{
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app1/images': '/shared/images'}
    },
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app2/images': '/shared/images'}
    },
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app1/sounds': '/shared/sounds'}
    },
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app2/sounds': '/path/to/cdn'}
    }]
}

It is pseudocode, do not try this at home, but you got the idea.
Code and rules depends on server you choose of course.

PS. But it is very interesting question, I will try to find some solution with webpack.

Upvotes: 1

Related Questions