Note: There is a project called Vinxi which turns all this into an actual framework you could (and probably should) use instead. It also enables you to do SSR 👀
A simple demo to show how Nitro + Vite can be used together as an MPA. This means you can have Nitro serve both your API (with routes under the /routes/* folder), and your SPA (code located in /app, and rendered by the ./renderer.ts handler), and build this for any hosting platform.
I built this as a POC to see if I could create an MPA for Azure Static Web Apps - I wanted to create a Shopify app which had some middleware to check if the current user is authenticated on their first visit to /. With Nitro, I can run this middleware check, and a function either redirects to another API route /login, or renders the HTML for the index page, and the browser then loads the assets from the public directory.
Make sure to install the dependencies:
pnpm installStart the development server on http://localhost:3000
pnpm run devBuild the application for production:
pnpm run buildLocally preview production build:
pnpm run previewCheck out the deployment documentation for more information.