Start with a basic Vite React TypeScript app and enhance it for production use by integrating Nitro as the server.
This requires a custom Vite plugin for nitro as well as a custom renderer and manually creating Nitro config.
The other way to approach this would be to add Vite to a Nitro app instead. Same basic result.
The Nitro config reference is a great read of you'd like to explore more options.
Transcript
[00:00] So here we have a basic Vite app. It's built with the React plus TypeScript template. Vite gives us a dev server. That's what this is running on, on localhost port 5173. But for production, we need something a little more robust.
[00:12] And for that, we're going to add Nitro to act as our web server. I'm going to go ahead and stop the dev server for now. And to get started, we're going to open a terminal and we are going to add NitroPack. Inside of our package.json, we need to make a couple of changes. We're going to replace the scripts here with some NitroPack scripts.
[00:34] So we have prepare, dev, build, preview, and lint. Before we get started, we're going to do ourselves a favor. And in tsconfig, we are actually going to extend the .nitro-types-tsconfig, which does not exist yet, but soon will. And this is going to save us a lot of grief. We can actually run the dev server now, and you can see that we are hosting on port 3000.
[00:56] If we open this it's a 404. But we now have the Nitro output and this tsconfig that we are extending. This gives us some types that we can use with Nitro so we can configure it in a type-safe way. The next thing we want to do is add a file and this is going to be nitro.config.ts. We're going to export a default, and in this case we are going to export define nitro.config.
[01:25] This takes an object, and we are going to tell it that we are going to place a renderer at renderer.ts. Now we can create renderer, renderer.ts. After pasting that in we can see that we're actually defining an event handler. So the renderer is defining an event handler. We're logging to the console and then we are rendering some HTML.
[01:49] If we scroll down we can see that we are interacting with localhost 5173. So that is the VEET server. So we can get the idea that they are going to run together. And because this is a Nitro app, we're going to make a couple of changes. We're going to rename the source folder and we're going to call that app.
[02:07] And once we do that, we need to go into the index.html and we're going to call this app. And we're going to come into the ts-app-config, scroll down a little bit, and change this to app as well. We started and stopped the Nitro dev server and now we can see that the handle render from our Nitro renderer is actually rendering. We don't show anything on the screen, but we'll fix that. To render our Vite app, we're going to create another new file, and we are going to create this in the plugins folder, and we're going to call this Vite.ts.
[02:45] To create a Nitro plugin, we can export a default. And this is going to be a define Nitro plugin. And a plugin is an async function. And we're gonna go ahead and console.log Vite, const Vite, which is going to actually be the Vite server. So we'll say create server, and we're gonna import that from Vite.
[03:07] We're going to await Vite.listen. And finally, we're going to print the Vite URLs to the console so we can see them. Now when we run our dev server, two things happen. One, Vite comes to life. We see the URL printed here.
[03:24] And when we open localhost 3000, where our Nitro server is running, we see that we now have a Vite app running on localhost 3000 using Nitro as a server. There's obviously some things going wrong here that we'll need to fix. The React logo isn't appearing, but it is working. The last thing we're going to do is go ahead and hide the Nitro output and other folders that we don't want. So we're going to add those to git ignore.
[03:52] We have a few duplicates here. We'll go ahead and save that. And now these will not be included in our git repository.