Storing data in the React public folder

Question

Currently for demo purposes I have a total of 1GB worth of .mp4/pdf files in my React public folder. I reference these files via props (example: file={'/40246/${this.props.showPdf}'} , but eventually these files are going to become larger and I am looking at maybe 50-100GB of .mp4/pdf files in the public folder.

Is it okay to have such large files in the public folder, will compile time of my app take forever?

I have also researched about ejecting the react app and referencing the files from outside the React src folder, but do not want the hassle of managing or configuring webpacks when something goes wrong. Actually I tried it and my app immediately crashed after npm start

Any advice or specific documentation I should look into would be appreciated.

Answer 1

There isn't any process associated for public assets, it just copies the files over to the build folder. There won't be any impact on performance during the build process.

Demo: check both files( demo.mov ), it just copied the file from public to build with the following command: yarn build prod