Building / Deploying for relative paths (subdirectory) #2534

nskydb · 2024-06-06T14:04:41Z

nskydb
Jun 6, 2024

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": "" },
      },
    },
  }
});

Answered by nskydb

Jun 10, 2024

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",
…

View full answer

chenjiahan · 2024-06-06T14:50:59Z

chenjiahan
Jun 6, 2024
Maintainer

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.

1 reply

RBilly Nov 22, 2024

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 · 2024-06-06T15:17:46Z

nskydb
Jun 6, 2024
Author

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",
    }
}

0 replies

nskydb · 2024-06-06T15:42:08Z

nskydb
Jun 6, 2024
Author

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?

1 reply

chenjiahan Jun 7, 2024
Maintainer

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 · 2024-06-10T07:03:37Z

nskydb
Jun 10, 2024
Author

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

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Building / Deploying for relative paths (subdirectory) #2534

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Building / Deploying for relative paths (subdirectory) #2534

nskydb Jun 6, 2024

Replies: 4 comments · 2 replies

chenjiahan Jun 6, 2024 Maintainer

RBilly Nov 22, 2024

nskydb Jun 6, 2024 Author

nskydb Jun 6, 2024 Author

chenjiahan Jun 7, 2024 Maintainer

nskydb Jun 10, 2024 Author

nskydb
Jun 6, 2024

Replies: 4 comments 2 replies

chenjiahan
Jun 6, 2024
Maintainer

nskydb
Jun 6, 2024
Author

nskydb
Jun 6, 2024
Author

chenjiahan Jun 7, 2024
Maintainer

nskydb
Jun 10, 2024
Author