When we import assets in React components outside of the `public` folder that Nitro reads for assets by default when running the development server we need to tell Nitro how to find them with the `devProxy` configuration option.

```typescript
export default defineNitroConfig({
  renderer: './renderer.ts',
  devProxy: {
    '/app/assets': 'http://localhost:5173/app/assets'
  }
})
```

This is ultimately inadequate in scenarios where you want to import assets arbitrarily and have them "just work" but works in a pinch.



Learn how to use devProxy in Nitro Config with Vite to serve static assets in React components in dev mode.

Use devProxy in Nitro Config to Serve Static Imported Assets in Dev Mode via Vite

Joel

[00:00] Our Vite React app running on our Nitro server has a problem in dev mode in that we are missing the React logo. I'm going to inspect that. We can see that it's looking at forward slash app, forward slash assets, forward slash react.svg. And if we come into our project that is in fact the path to this particular asset. Nitro understands assets in the public folder so it can find those, but it does not know where to find the React SVG when we're running in dev mode.

[00:33] The solution to this is to use the dev proxy in the define Nitro config within our Nitro config. So we dev proxy forward slash app forward slash assets to HTTP localhost 5173 forward slash app assets and when we do that it allows our React logo to appear.



Transcript