You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi there. I'm currently exploring migrating ZRO, a simple React-based framework, to use Nitro. Right now, ZRO heavily depends on Vite, and even in the Nitro-powered version, Vite will still be required to process files like route components. The route files convention is similar to React Router (exporting loader, ErrorBoundary, etc...)
One thing I really like about Nitro is the auto import system. it significantly improves the developer experience. My goal is to enable Nitro auto imports inside Vite-processed files (Like calling useDatabase inside a loader function). To achieve that, I came up with the following approach:
exportdefaultdefineNitroModule({name: "zro",asyncsetup(nitro){if(nitro.options.dev){// register routesconstrouter=globRouteFilesAndGenerateRouter();// <- Finds the route files and generates the routernitro.options.devHandlers.push({route: '/**',handler: defineEventHandler(async(e)=>{returnrenderRouter(router)// Handles request and streams React-based response})});nitro.hooks.hook("rollup:before",async(nitro,rollupOptions)=>{constvite=awaitcreateServer({appType: "custom",server: {middlewareMode: true},optimizeDeps: {include: ["react","react-dom"],},ssr: {external: ["react","react-dom"],noExternal: ["nitropack"],},plugins: rollupOptions.pluginsasVitePlugin[],// Enable Nitro auto imports in Vite});globalThis.__viteDevServer=vite;nitro.hooks.hook("close",()=>vite.close());});})
This setup allows me to access the Vite dev server via globalThis.__viteDevServer when generating the router and handling requests.
Question:
Defining routes inside a Nitro plugin (instead of a module) feels like a cleaner and more appropriate place to handle routing logic. I’m facing a challenge: creating the Vite dev server requires access to rollupOptions.plugins, which seems to be only available inside the module context.
Is there a recommended way to share the Vite dev server instance between a Nitro module and a Nitro plugin?
Or alternatively, is there a way to create a Vite dev server inside a Nitro plugin while still being able to access rollupOptions.plugins from Nitro?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi there. I'm currently exploring migrating ZRO, a simple React-based framework, to use Nitro. Right now, ZRO heavily depends on Vite, and even in the Nitro-powered version, Vite will still be required to process files like route components. The route files convention is similar to React Router (exporting
loader,ErrorBoundary, etc...)One thing I really like about Nitro is the auto import system. it significantly improves the developer experience. My goal is to enable Nitro auto imports inside Vite-processed files (Like calling
useDatabaseinside a loader function). To achieve that, I came up with the following approach:This setup allows me to access the Vite dev server via
globalThis.__viteDevServerwhen generating the router and handling requests.Question:
Defining routes inside a Nitro plugin (instead of a module) feels like a cleaner and more appropriate place to handle routing logic. I’m facing a challenge: creating the Vite dev server requires access to
rollupOptions.plugins, which seems to be only available inside the module context.Is there a recommended way to share the Vite dev server instance between a Nitro module and a Nitro plugin?
Or alternatively, is there a way to create a Vite dev server inside a Nitro plugin while still being able to access
rollupOptions.pluginsfrom Nitro?I would love to hear your thoughts on it.
Thanks.
Beta Was this translation helpful? Give feedback.
All reactions