CODEWITHSUNDEEP
reactjswebpackassetsdirectory-structureorganization
Ridhwaan Shakeel
Ridhwaan Shakeel

Reputation: 1043

React webpack app public/images vs src/images

I'm also using webpack to transpile and bundle onto public.
What are the pros and cons of keeping image assets in public vs non-public.
Which project structure is better for a react app?

public/  
-images/  
--favicon.ico  
--(other-image-files...)  
-index.html
-bundle.js

src/
-components/
-style/
-images/
-utils/

Upvotes: 8

Views: 5478

Answers (3)

Jeff
Jeff

Reputation: 544

https://facebook.github.io/create-react-app/docs/using-the-public-folder

The recommended approach in the CRA docs is to put images in src and load it by importing it.

Using public folder should be only for exceptional cases.

Upvotes: -1

Frank Hellwig
Frank Hellwig

Reputation: 218

The src directory has a long history of source code being compiled, linked, and eventually ending up as an executable. Given today's build tools, that concept is still current. With webpack, brunch, or parcel, you never really "serve" anything directly from a public directory - everything is transpiled, bundled, etc. into a public or dist output directory.

With that in mind, I would submit that src is completely appropriate for images and even your index.html file (noting that the index.html that ends up in your distribution folder is likely different that the original "source" index.html that you created). I hope that helps. Not sure if it is better, but I offer it as a point of view given your question.

Upvotes: 2

Matt Condit
Matt Condit

Reputation: 27

Overall, the idea is that images in the public directory are accessible by URL outside your app. Anything in src will only be built in if you load it through webpack import. I generally keep things in src unless it is publicly shared.

Upvotes: 1

Related Questions