This post is a draft and not published yet.

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

Instructor

Joel Hooks

Code

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.

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.

Share with a coworker

Transcript

[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. /app/assets/react.svg. We can see that it's looking at forwardslash app, forward slash assets, forwardslash 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.