Change publicPath

Description

Right now Webpack’s publicPath is hardcoded to /static. We need to add a way to change it. We should allow people to change it when they run npx frontity build.

User Stories

As a Frontity developer
I want to change the publicPath at build time
so that I am not restricted to the /static folder

As a Frontity developer
I want to change the publicPath at runtime
so that I am not restricted to the /static folder

Moved to: Change publicPath dynamically at runtime

Possible solution

Even though people will be able to change this once we relesae the frontity.config.js file with support to modify Webpack, I think this is important enough to add a CLI arg to change it, like this:

> npx frontity build --publicPath="/other/folder"
# or
> npx frontity build --publicPath="https://external-domain.com/folder"

It should be possible to configure it with ENV variables:

> FRONTITY_PUBLIC_PATH=/other/folder && npx frontity build

Implementation proposal

When you had it working as a query string before ?frontity_publicPath=/other/folder, was that on each user request (cache notwithstanding)?

Only reason I ask is that a common configuration of FastCGI cache or Varnish is to exclude ?arg from cache. Just curious more than anything.

Frontity is not as new as it seems :slight_smile:

We developed the first version of the framework for our own use during 2017 and 2018. We did it because we were working with some big Spanish publishers and they wanted to improve the performance and UX of their mobile version. It worked great but they didn’t have access to change the code, so at the beginning of 2019, we decided to discontinue the product and launch an open-source framework. This new version is based on the old one, but we took the opportunity to simplify the APIs and do some performance/size optimizations.

There are still some things we haven’t ported from the all framework, like analytics packages, ads packages, comments packages, AMP support, server extensibility, Slot and Fill extensibility… but all those things were working great in the old version.

Yes, because the HTML changes to accomodate the new publicPath. The publicPath query would need to be removed from the URL of course. I have added a FD for a system called Router Converters which will allow to do so.

Also, take into account that with the Theme Bridge architecture, WordPress should be the one caching (or using a CDN). You don’t want to cache twice because that could lead to invalidation problems.

Draw

2 Likes

Implementation Proposal

Add a new option called publicPath to the build command in: https://github.com/frontity/frontity/blob/dev/packages/frontity/src/cli/index.ts#L80-L88

Pass down that option to the real build command. If it’s not present, the default should be /static: https://github.com/frontity/frontity/blob/dev/packages/core/src/scripts/build.ts#L12-L18

Pass down that option to webpack: https://github.com/frontity/frontity/blob/dev/packages/core/src/config/webpack/output.ts#L67

Repeate the process for the dev command.


We are also going to take this opportunity to add the ENV variables to build, dev and serve, like we did in the last CLI refactor: https://github.com/frontity/frontity/pull/262

For that, we need to add build, dev and serve to the CLI folder (https://github.com/frontity/frontity/tree/dev/packages/frontity/src/cli) and create variables for:

  • target: FRONTITY_TARGET.
  • port: FRONTITY_PORT.
  • https: FRONTITY_HTTPS.
  • production: FRONTITY_PRODUCTION.
  • development: FRONTITY_DEVELOPMENT.
  • publicPath: FRONTITY_PUBLIC_PATH.

It needs to be similar to what we are doing here: https://github.com/frontity/frontity/blob/dev/packages/frontity/src/cli/create.ts#L23-L26

Issues Proposal

  • Add publicPath option to CLI and pass it down to Webpack in both the build and dev commands.
  • Add ENV variables for the build, dev and serve commands.

Documentation

1 Like

The publicPath options it’s implemented just as it was explained in the implementation proposal (code can be reviewed in frontity/frontity#420):

2 Likes