Assets and Files
There are two ways to add an asset to your Redwood app:
- co-locate it with the component using it and import it into the component as if it were code
- add it to the
web/public
directory and reference it relative to your site's root
Where possible, prefer the first strategy.
It lets Vite include the asset in the bundle when the file is small enough.
Co-locating and Importing Assets
Let's say you want to show your app's logo in your Header
component.
First, add your logo to the Header
component's directory:
web/src/components/Header/
├── logo.png
├── Header.js
├── Header.stories.js
└── Header.test.js
Then, in the Header
component, import your logo as if it were code:
import logo from './logo.png'
const Header = () => {
return (
<header>
{/* ... */}
<img src={logo} alt="Logo" />
</header>
)
}
export default Header
If you're curious how this works, see the Vite docs on static asset handling.
Adding to the web/public
Directory
You can also add assets to the web/public
directory, effectively adding static files to your app.
During dev and build, Redwood copies web/public
's contents into web/dist
.
Changes to
web/public
don't hot-reload.
Again, because assets in this directory don't go through Vite, use this strategy sparingly, and mainly for assets like favicons, manifests, robots.txt
, libraries incompatible with Vite, etc.
Example: Adding Your Logo and Favicon to web/public
Let's say that you've added your logo and favicon to web/public
:
web/public/
├── img/
│ └── logo.png