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

StefanBob · Accepted Answer · 2020-08-19 18:59:56Z

11

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"

edited Aug 19, 2020 at 18:59

StefanBob

5,1182 gold badges35 silver badges43 bronze badges

answered Aug 19, 2020 at 18:40

OFRBG

1,80817 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StefanBob Over a year ago

Thank you yes I just copied it over. As you said I'm on a windows and had to use react-scripts build && copy src\\files\\config.js build

EasyMoney322 · Accepted Answer · 2023-03-22 21:19:34Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related