Where to place assets?


(Matt Saunders) #1

There are plenty of topics on the best way to structure your React app. I started by using script tags and have graduated to using the the create-react-app command but am now wondering where to store my assets. The build comes with CSS in the src folder, presumably because it gets compiled. But images and other assets - should they live inside the public folder, as “usual”?


(Jordan McArdle) #2

Two situations:

  1. Are these assets static and will not change throughout your app (unless WAY future implementation)
    • e.g. favicon.ico or companyLogo.png

Slap those bad boys in the public folder.

  1. If you are using them inside your elements, or backgrounds for CSS… my suggestion is to include them in your JSX/js file
// homepage.jsx
...
import './myImage.png' as imageThatIsMine;
...
ReactDOM.render(
<div>
<img src={imageThatIsMine} alt="Image of mine that I have" />
</div>
....

(Matt Saunders) #3

Thanks! As usual, it’s a bit of both. One of the assets is a JSON file which will be updated from time to time.


(Avrosh K) #4

I am wondering if there is a third use-case here. What if the assets are added when the app is running?

How do we write an ‘import’ statement for the folder where we are going to place the dynamic assets?


(Yashu Mittal) #5

If the folder name is irrelevant, as is the location. Webpack is a configuration-based build tool - you tell webpack where your code is.

If you’re running your own setup, I recommend not having a public folder at all.