Basic understanding - Location of public directory in React app

Question

I'm building a React app with webpack. I was curious about where to put my "public" folder. I know in create-react-apps, the public folder is outside the "src" folder.

I'm not sure I'm clear on why you would want your public assets outside of your source folder. Is index.html not part of src? Is that not a crucial part of your code? Why would you put the public folder outside on it's own?

I'm trying to find good reading on this topic, but it seems folder structures are very subjective. If anyone could explain this, I would appreciate it. I want to firmly understand why the public folder is outside the src folder in create-react-app.

Answer 1

You posted this quite a number of months ago and I am surprised that there have been no responses as you raise an interesting point.

I believe the answer to be somewhat historic. In the past, the public folder was, indeed, public, meaning it contained a well-structured and hand-crafted index.html file and perhaps some other artifacts. These were intended to be consumed "as-is" while other parts of the application (i.e., JavaScript) remained in their own folder to be transpiled, merged, etc.

But that was then and this is now.

With the advent of modern packaging/bundling tools (webpack, brunch, parcel, and so on), such a distinction is no longer relevant nor does anyone really give it much thought.

With these bundling tools, everything is "source code" (as you pointed out) with the tools transforming index.html to correctly reference bundled CSS and JavaScript code.

So, while I cannot speak directly for the create-react-app team, I would submit that the public folder concept is largely an anachronism harkening back to the days where it really was public.

These days, everything ends up in a dist folder, which is then served to the end user. The machinery that creates this dist folder is largely ambivalent on how you structured the tool's input to arrive at the final distribution. Basically, the tools do not care about a public/src folder distinction, so why should you?

I hope that helps. I personally have index.html right alongside index.js in the src folder. The process is src -> bundler -> dist (just like good old C programming: src -> compiler -> exe).