What is the best way to store assets/content on a react app?

Question

I am working on a social app that will allow users to record voice notes. The way I did it for testing is having some mp3 files in a folder inside the app for example./audios/file.mp3 I would need to store the mp3 files from the users and other assets like images somewhere in the web and be able to get them with a url instead of having the files in the app files. What options do I have for that?

Answer 1

The question here is, do you want to store your assets on a database as a blob or on a filesystem as files. Here's a research paper which discusses this.

Storing the assets as files is not a bad idea. What you can do is name your files using UUIDs and store the UUID names in a database.

Then, to retrieve an asset, on the server side, first query the database to get the file name and retrieve the asset using the file name.

For node, the package uuid should be useful.

Answer 2

Assuming that you bootstrapped react app using create-react-app.

Store all the assets inside the public dir. You can create an assets folder inside the public dir, and store all assets inside of it.

Inside your app, the public dir can be pointed using the PUBLIC_URL env variable.

use process.env.PUBLIC_URL to retrieve the public dir and ${process.env.PUBLIC_URL}/assets to point the assets dir.

I hope you understand.