react-scripts build a file into `build` folder, from a different folder than `public`

Question

I have a react app. In my package.json:

"build": "react-scripts build",

After running this build script:

npm run build

Everything is built into the build folder and any files from the public folder get copied to the root of the build folder as they are (not minified into chunks). So any static files I want copied over and not changed I can put into the public folder.

I want to copy a file over as if it were in the public folder, but from a different folder such as /src/files/config.js

What's the best way to do that? Is it something like adding a webpack.config.js to the root of my app and having a custom configuration for sending over a file like this? Or maybe just a quick modification to the npm script in package.json somehow? Or am I missing something...

Thanks

Answer 1

Without ejecting or getting overly complex, set your scripts to something:

  "build": "react-scripts build && cp /src/files/config.js build"

Might be worth pointing out to make sure that cp works in the environments you are supporting.

Windows:

"react-scripts build && copy src\\files\\config.js build"

Answer 2

If the content is static, I think one of the options might be making a symbolic link for a file or directory. At least it might be better, than just copying files, when you want to keep them always identical.

Linking might be not neccessary for small files, but when static content size reaches gigabytes, it may save both space and time. Especially if you run app in the docker container.

In Linux, you can make directory or a file symbolic link with:

ln -s /project/public/vox /project/build/vox 

In Windows, you can make directory symbolic link with:

mklink /D "project/public/vox" "project/build/vox"

and symbolic link of a file with:

mklink /D "project/public/vox/123.wav" "project/build/vox/123.wav"

You might want to use hard links instead of symbolic, if your system have remote users