How to rewrite assets for a relative path with CRA?

[ClementParis016]

How to rewrite assets for a relative path with CRA?

[geelen]

OK, this is a straight-up bug. I've never considered the impact of PUBLIC_URL in @fab/input-static. What's weird to me is how rc6 ever worked!?

It feels like the CRA build must be different between your two apps: as far as I remember @fab/input-static will faithfully capture whatever is in the dir argument. Can you run tree dist (assuming dist is your output directory) in both projects? Maybe CRA is actually writing everything to /plugin/ in your first app.

I don't have a clear solution here, you're basically wanting to "mount" the whole FAB at a subpath, right? Or do you feel like everything in the FAB should be prefixed with plugin?

If we go the first route, we could add an argument like fab serve --base="/plugin", so the FAB doesn't actually know what path it lives under, that's the server's job.

Alternatively, we could add a flag of @fab/input-static, effectively "mounting" the dist dir at a subpath within the FAB. Then it gets served at / but has /plugin routes internally, much like what you already have.

As a stop gap, you could add a step to your build to move your dist directory around to create the directory structure with plugin in it. Something like:

"build:fab": "npm run build && rm -rf .build && mkdir -p .build/plugin && cp -R dist/* .build/plugin"

{
  plugins: {
    "@fab/input-static": {
      dir: "./build"
    }
  }
  // ...
}

Bit clunky, but might get you over the immediate problem while we figure out the "right" approach.

[ClementParis016]

Alright I got it!

So it's indeed unrelated to rc6 vs rc9, actually there was a key difference between the build of the two apps that your thinking got me to find out (huge thanks! 🥇 ).

I wouldn't say it's literally a FAB bug, because CRA actually gives us all the power needed to get this to work nicely together, so maybe what I'm sharing here can serve as a basis for future documentation.

The key aspect is indeed in the directory structure of the build/ output of CRA. In my working plugin app, this is overridden to be build/plugin/ and this is what makes it work (but I didn't notice it at first because it was overridden in a hacky, hidden way). Doing the same thing for my kyb app makes it work too.

So what's needed for this to work is the following in .env for CRA:

# Makes assets relative to subpath:
PUBLIC_URL=/kyb/
# Makes the FAB pick up the subpath to rewrite the assets path:
BUILD_PATH=./build/kyb/ 

(what I was missing was the BUILD_PATH variable, it's documented on the CRA website)

And in the fab.config.json5:

{
  plugins: {
    '@fab/input-static': {
      dir: './build',
    },
    '@fab/plugin-render-html': {
      fallback: '/kyb/index.html',
    },
    '@fab/plugin-rewire-assets': {},
  },
  settings: {
    // ...
  },
  deploy: {
    // ...
  },
}

Now I'm realising that I didn't explained why I was trying to do that:

• We use a custom domain locally and have nginx as a reverse proxy to route traffic to different React apps based on subpaths of that domain (so http://domain.local/plugin goes to the plugin React app and http://domain.local/kyb goes to the kyb React app). In that context, we use CRA in watch mode, we don't run the actual FAB (so we can have HMR & all, related to #345 actually)
• On production there is no nginx reverse proxy either, we use Cloudflare Workers and route those subpaths to different workers (one per app) serving the FABs

I hope this is clear enough! Thanks for your help and let me know if you would like me to share more details :) (otherwise you can close this I think)