Change publicPath dynamically at runtime

[luisherranz]

Description

After Change publicPath is implemented, the only way to change the publicPath would be in the npx frontity build process. It’d be great if we also allow people to change it dynamically, at runtime.

Requirements

• Let users change the public path dynamically using a Frontity Query Options like ?frontity_public_path=/custom.
• Let users change the public path dynamically using their frontity.settings.js.
• Let packages change the public path dynamically with their own logic using beforeSSR or afterSSR functions.
• Fallback to the public path defined during the build with --public-path=/custom.
• Fallback to the default /static folder.

Other considerations:

• If we are going to populate state.frontity.options.publicPath, it would be great if it always contains the value of the public path, even if this was not populated via the state (frontity.settings.js or afterSSR) or a Frontity Query Option.

Possible solution

FD: Dynamic Public Path explanation

Resources

• Implementation in the old framework: https://github.com/wp-pwa/wp-pwa/blob/dev-stable/core/client/public-path.js
• Webpack docs: https://webpack.js.org/guides/public-path/
• Excalidraw: https://excalidraw.com/#json=5743121476354048,uUq66FnH1F5IMS0704mDug
• Frontity Query Options: Auth header in Source packages and Frontity Query Options

[luisherranz]

Another possible option that we should investigate is using the "auto" option introduced in Webpack 5: https://github.com/webpack/webpack/pull/11258

What it does is to use the URL of the script to figure out the public path. For example, in an HTML file that contains this script:

<script async src="/custom-path/my-site.123456.js" />

The public path will be /custom-path/.

Some thoughts:

1. It doesn’t support IE, but neither does Frontity so that shouldn’t be a problem.
2. There are no docs yet, but it seems to be the current default option.
3. I am not sure if this is compatible with @loadable/component yet, although we are already modifying the scripts of loadable so we could modify the publicPath as well.
4. Right now, I don’t see any additional benefit of using this method vs dynamically populating the public path with __webpack_public_path__. Maybe it is simpler though.

[jimmyxdom]

In our use case, we need this feature to set different publicPath, pointing to different CDN domains for each locale.

[luisherranz]

Hi @jimmyxdom, welcome to the community!

Are you willing to contribute with a PR for this? If so, I can make another video with an implementation proposal for this feature. I think it shouldn’t be difficult