How can I have "public" folder at development time?

[Ali-Milani-13]

Hey.

I'm new to rsbuild, coming with the create-react-app background. I've noticed that there's so folder called "public" in the project, or any index.html file before building the project.

I wonder, if there's any way to configure the rsbuild to achieve this.

I did some research and I figured out, someone built a feature for it, and it looks like it was being merged to the project. but I don't know how to enable it.

[SoonIter]

https://rsbuild.dev/guide/basic/static-assets#public-folder

Rsbuild has already implemented this feature, just create "public" folder and to use it.

[Ali-Milani-13]

does that mean, if I create an index.html file, it will automatically use that file? just like CRA?

I'm looking for the index.html file, the part, where React gets the element id of root from it.

[SoonIter]

1. public folder is an easy way to load static resources, like <img src="/foo.png" />. When you perform a production build, these assets will be copied to the dist directory.
2. public/index.html is a html template and it will be modified at webpack/rspack compile time.

Actually, the two operations are separate in both CRA or Rsbuild. But in CRA, public/index.html will be used as the default html template.

You can config this behavior to be consistent with CRA
https://rsbuild.dev/config/html/template#htmltemplate

Just like what this user did in https://github.com/sozonome/rsbuild-react-chakra-starter.git

// rsbuild.config.ts
export default defineConfig({
  html: {
    template: './public/index.html',
  },
})

[Ali-Milani-13]

am I free to have asset folder in the src directory? I didn't use public folder for my static assets in CRA. I actually need it to add manifest and logo files for PWA applications.

Thanks, the template worked, and I loaded the manifest. but in conclusion. can I have static assets in the source directory?

[SoonIter]

of course you can, src/assets is different from the public folder

1. public folder 's behavior is that when you perform a production build, these assets will be copied to the dist directory. These assets would be dist/foo.png
2. src/assets you can import these assets through js import like import foo from '../../assets/foo.png'. These assets would be dist/static/image/foo.[hash].png

Almost all bundler toolings follow these similar behaviors.
https://vitejs.dev/guide/assets.html#the-public-directory

[Ali-Milani-13]

Thanks for the support. Much appreciated. 🙏