Building / Deploying for relative paths (subdirectory)

[nskydb]

Hi,

I am just migrating all projects from create-react-app to rsbuild. But I have some projects that are built to be served from a relative path. create-react-app has an easy way to do it, as documented here.

What is the equivalent way to do this in rsbuild? I have not found out yet.

I have tried the config below. The initial loading of the app works (e.g. localhost:3000/mysubdir), but when I try to call e.g. http://localhost:3000/mysubdir/auth-callback, it does not work. The browser shows a 404 error. Somehow, the dev server does not fall back to the index.html properly. What am I doing wrong? Any help appreciated :)

Regards

nskydb

export default defineConfig({
  plugins: [pluginReact(), pluginSass(), pluginSvgr({ mixedImport: true })],
  html: {
    template: "./public/index.html",
  },
  output: {
    assetPrefix: "/mysubdir/",
    distPath: {
      root: "build",
      html: "mysubdir",
    },
  },
  server: {
    proxy: {
      "/api/**": {
        target: "https://myservice.com/api",
        secure: false,
        logLevel: "debug",
        changeOrigin: true,
        pathRewrite: { "^/api": "" },
      },
    },
  }
});

[chenjiahan]

Sorry, I didn't get what the real question was.

The homepage field of CRA seems to be used for the production build, and you mentioned that the problem you are currently facing is on the dev server, which is not related to the production build.

For the fallback issue, I think server.htmlFallback and html.historyApiFallback should be a solution.

[RBilly]

Hi !
I'm trying to migrate my monorepo based on Craco to Rsbuild.
With Craco we relied on the homepage field from the package.json to serve the applications on subpaths.
Is it supposed to work as well with Rsbuild, or do I need to set server.base or output.assetPrefix ?

[nskydb]

Thanks for your reply! You are right, I mixed things up. For now, the problem is with the dev server. I did not touch server.htmlFallback, so it should be 'index' by default. However, your hint pointed me in the right direction. This was needed (the leading / is crucial for it to work. Before, I always tried without it):

server: {
    htmlFallback: false,
    historyApiFallback: {
      index: "/mysubdir/index.html",
    }
}

[nskydb]

Seems like it is not fully solved yet. Now there is an issue with assets served from the public directory. Here it says "files in this directory will be served at /". But I need them to be served from /mysubdir as well.

In a React component, I reference a file like this: <img src="/mysubdir/images/logo.svg" />.

Any advice on how to fix it?

[chenjiahan]

The public directory will be served at / by default, if you want to put public assets to a sub dir, you can use the output.copy option instead.

Example:

export default {
  output: {
    copy: [{ from: './my-assets', to: 'mysubdir' }],
  },
};

[nskydb]

Hi,

I solved it like this:

import { defineConfig, loadEnv } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginSvgr } from "@rsbuild/plugin-svgr";
import { pluginSass } from "@rsbuild/plugin-sass";

const { publicVars } = loadEnv({ prefixes: ["REACT_APP_"] });

export default defineConfig({
  plugins: [
    pluginReact(),
    pluginSass(),
    pluginSvgr({ svgrOptions: { svgo: false }, mixedImport: true }),
  ],
  html: {
    template: "./public/index.html",
  },
  output: {
    assetPrefix: "/mysubdir/",
    distPath: {
      root: "build/",
      js: "mysubdir/static/js",
      jsAsync: "mysubdir/static/js/async",
      css: "mysubdir/static/css",
      cssAsync: "mysubdir/static/css/async",
      svg: "mysubdir/static/svg",
      font: "mysubdir/static/font",
      wasm: "mysubdir/static/wasm",
      image: "mysubdir/static/image",
      media: "mysubdir/static/media",
      server: "mysubdir/server",
      worker: "mysubdir/worker",
    },
  },
  server: {
    htmlFallback: false,
    historyApiFallback: {
      index: "/index.html",
    },
    proxy: {
      "/api/**": {
        target: "https://myservice.com/api",
        secure: false,
        logLevel: "debug",
        changeOrigin: true,
        pathRewrite: { "^/api": "" },
      },
    },
  },
  source: {
    define: publicVars,
  },
});

and reference the image in the React component like this:

const my_logo = `${process.env.ASSET_PREFIX}/images/logo.svg`;
...
<img src={my_logo} className="logo" alt="" />

Thanks for your support!

Regards

nskydb