Hello everyone and welcome to my session. my name is Inubong and I'm going to be speaking to you today on how you can supercharge the server side JavaScript, with Nitro. js. Let's dive right in. Now today's talk is going to focus on, what Nitro. js is and the principles that guide Nitro. js. We are going to discuss Nitro. js key features. We are going to build a little demo to demonstrate how some of the features that NitroJS has to offer and how we can also see how easy it is to create web servers using Nitro. We're also going to deploy our app and our server rather. And we also will take a look at the undressed ecosystem and what's next for Nitro. About me, I'm a social engineer, technical writer, a NitroJS community team member. I continually post memes on the internet. I like to run and you can find me on the GitHub and Twitter. Now, what is Nitro. js? Nitro is the universal server toolkit for creating type safe and performance universal web servers. Now, it uses universal twice, and this is just to emphasize the fact that Nitro. js, is runtime agnostic and deployment provided agnostic. Nitro. js does not seek to lock you in, into its ecosystem. It serves, the greater community. So Nitro. js tries to be as agnostic as possible. Nitro. js can be used either as a standalone web server or a server engine for full stack frameworks. so full stack frameworks are becoming super popular or are popular and, so Nitro. js Can basically be used to power server side frameworks or full stack frameworks rather. and it's currently powering Nitro. It's currently powering Noxt version 3. which is like the most powerful version of Noxt. and in the G ecosystem. So for the Angular ecosystem, Nitro. js, powers, or is the server engine, for Analog. js. which is an SSR. framework for the Angola ecosystem. And then for the solid just ecosystem, solid uses Vinci and Vinci is built on top of Nitro. so everything's Nitro and, yeah, so these are all the, these are the things, these are some of the things that you can do. So let's talk about Nitro's principles. first one is agnostic at all costs. So NitroJS is not related with any large corporations or there is no one person behind Nitro that whose aim is to, like I said before, lock you in to the ecosystem and try to Yeah, force you to use a certain thing. Nitro is agnostic. It can run on any run. It can run with any runtime. so for example, Node. js, Bond, even service workers. and the aim of Nitro is to integrate, not compete. Nitro. js, has an open, API, which anyone can integrate with and use for their projects and deploy anywhere they want. NitroJS is not seeking to compete with existing tools, rather to collaborate and to make the ecosystem better. And so we also get deployment via presets. With Nitro, we can deploy to any Deployment provider, Cloudflare, Vercel, Railway, et cetera. All we have to do is set a preset and then Nitro also is built based off of web standards. And, yeah, which makes it, which, makes it super flexible and, helps keep it agnostic. Now some of Nitro JS key features. One is zero config you can get started with Nitro with just one command You don't need to set up anything. You don't set up TypeScripts, routing, hot model reloading. Everything comes pre packed out of the box Nitro also has fast system routing so you can create your API routes. All you have to do is create a file or create a file, in the routes folder and then prefix it with the HTTP method and voila, your routes is ready to go. Next, Nitro also has automatic imports. And, so yeah, using the unimport ngis package, Nitro auto import utilities and modules and also keeps your code, minimal and clean. it also supports tree shaking and code splitting to keep your bundle size really small. so Nitro also provides caching out of the box. Caching can be a pain to set up. you can either set up caching on specific routes or on all your routes. And NetRedress also provides customizable storage options for your caching. Then universal deployment, we had talked about this earlier. NetRedress does not lock you in. You can deploy to whatever Provider you need or you want to use, and then Nitro is hackable. You can easily extend Nitro's API using its runtime hooks. so I guess it's demo time. so we, so in this demo, we are going to be building a simple to do, to do API. for sake of time, we would focus mainly on get and post. So be able to create to do's and also fetch our to do's. yeah. So let's get started, shall we? So to get started with Nitro, I'm going to go to the nitrojs. dev website and we can get started. So to create a new product using a starter template, I'm going to, so you can use any of the package providers or the package managers. I'll stick with bun, then open up my terminal and then. Okay. Sorry about that. I think the L on my keyboard is a bit stuck. Okay, yeah, I'm just going to paste the command. So it might take a while to set up. but yeah, any moment from now. Okay. Any moment from now should be done. Okay, cool. So I'm all set into the project. Forgot to rename the project. we are stuck with Nitro app. let's open this in my code editor. Let me go ahead and resize this. Okay. when, by default, like I said, everything comes, pre installed and pre configured. so all you have to do is go straight to, setting up your API routes. so in our case, So we're going to start with the post, the post method. So let's see, let's go ahead and create, introduce. post. ts. So like I said before, all you have to do to define API routes, in Nitro is just to the name of the routes and you follow with the HTTP method and then you're good to go. By default, define event handler. We are going to make this a sync. Okay. so this is a push request. we are going to be accepting some data. we are going to accept the to do, which is the to do title and the completed state. so const. So to read the body of a request out in Nitro, all we have to say is read body and then we're good to go. so we can add some validation. So if not to do, or if not completed, we can return an error. That is, say, 400. Okay, so now we define our to-do list. now, so one thing else, one thing that Natural does provide is a storage layer. So with this storage layer, what we can do is we can't, we can store data, and by default it uses. It uses, memory, or it uses maps, memory, by default, but then we can configure it to use, so a key value pair instead. so all we have to do is to pass the key to the function, and then we see the get item. Set to do. And then if we don't get any to dos, we return on MT RA and so that's sets in new to do the assets, the I DT date that now. and then we can set to do completed values. Okay, so then we can then push to the, we can then push a new to do. okay, so we have an error here. what we want to do now is to define our types. Let's create a user's folder. And then, We add index. d. cs, type definitions, the export, to do is equal to, the export type to do, is equal to id is string, to do is string, computed as non segregated boolean, Okay, so all we have to do now is to use this. Okay, so this is type of this. All right. Our type is of string. Okay, so to string. All right, then we push our to do. And then we can then call on the, storage layer. We can access it, or we can set it. you need to do, so to dos, to do list. Okay. And then, so once this is done, you can return a status of 201. And then, data versus new to do. Then we can just return message that says, to do added success. very much. Yeah. Okay, cool. So to test out that this works, we first of all have to run the server. Okay, I'm on there. our server is going to run at localhost 3000. Then we can come to, you can use postman or whatever, testing tool you prefer. so that's fed2do. Okay, so our video has been added successfully, and if we come back to our app, we should see a dot data slash kv file slash to do's. So this, is our to do here locally. So the storage layer, by default saves in developing environment saves, data in the project directory. But then we have to configure, a remote KV store, before we deploy. So let's go ahead and create the get request and then we can configure and configure our remote storage option. So I mentioned earlier, that a Nitro handles caching for us. and then we can define, we can use the defined cached event handler to, define a cached event handler, as the name implies. so we use it the same way, but we can, but naturally lets us add some extra parameters at the bottom. so lets first of all get, okay. Storage data do get item to do then if not to dos return. that is good. Oh, we can just say, return, 200 and then we can say later to do's and then so to cash our function, we can add a max age. so we, how long should the return data be cashed for until, it can be revalidated and yeah, the new data, the new data returned. So we can just see. one hour because this is a small app, you might not exactly see the benefit of this here, but then this can be really handy, when building large scale production apps, you can also set some other, some other values as well. you can take a look at the nitro, at the cache, API on the nitro documentation websites. So let's test out our to do dot get routes. let's copy this. so we get our to do. let's add another one, for breakfast. Okay. So if you come here, it doesn't get added. Yeah, so it doesn't get added because we cashed our function. so let's try removing this and see if this works now. Okay, so this works now. yeah, but if you go back to caching the data, it, it's only going to return this until this validity expires. And if you come here, you'd see the nitro output has a cache, Nitro slash handlers. directory with the to do's and, yeah, so all of our cache data is here. okay, so that's this. And now we have to, set up our remote key storage or key value storage. so let's see, we are going to be deploying on Vercel. Vercel has this, Vercel has a package, to help handle, with key values, key value, with remote key value storage. So let's install that, the name of the package is, adversarial slash kv. Now again, Nitro is random agnostic, Nitro is agnostic, So both runtime and for deployment providers, so you know, you can feel free to use whatever solution you want, then we have to, we have to configure this in a natural config as such storage, as you can see, we already have a bunch of, presets available for the storage drivers. but yeah, we chose Vercel because that is what we shall be deploying. And, so the storage layout, you can also configure like a dev storage. yeah, you can also configure like a dev storage. but we won't get into that in this demo. so basically the dev storage is for your development environments, configuring the storage for your development environment. By default, Nitro uses, the project directory, but you can use another option. yeah, so let's go into deploying our app. like I mentioned earlier, we are going to use Nitro. We are going to use Resul. let's open up, first of all, we have to host. We have to set up a remote repository for our project. let's go to GitHub and create a repository. Nitro 142 todo. git init. Okay, so we just paste the command. Okay. And yeah, so everything should be here. All right. So if you go to Vercel, we can add a new project. So we import our projects from Vercel and we deploy. One thing I may have forgot to mention. So if you want to, if you were to create like extra routes, say for, getting a single to do, we would do it this way. So first of all, we would create a routes folder. We'd create a to dos folder rather. And then, so we can say, id. Yeah, get that. Yes. And then we can write all of our code here to get the, singular to do. Okay. So our deployment is complete. Continuity dashboard. if we go to our, if you go to our app, let's see. Yeah. So the index. cs, the route from the index. cs, returns because it's a get request and, it returns this. So let's. we still have to configure the remote KV storage on vessel. So Vessel, lets us do this really easily. I can come here and under the projects and connect this tb, which is an OP star kv. let's see. So I can copy this and I can set my env. Oh, okay. So it's automatic. It's been automatically set and I think I might have to redeploy and then we should be able to use our to do API. Let's wait a couple of seconds. Okay, so our app is done deploying. So let's copy this and go to postman. so let's try this. that's supposed to not send requests. So let's see what's the error. I reconnect, okay, so let's add the to dos. Okay, so something seems to be wrong with the postman. so let's try, making the call request, the request using the command line instead. okay, let's see. All right, so this worked, status of 201. to do added successfully. And, we can get, We can get, let's see, let's do a get request instead. Nobody. Yes, we can just see this, copy this. All right, so we get our to do. So our endpoint works as it's expected to. so yeah, that's all for deployment. And the coding session. so let's go back to our slides. So we are done with the coding and deployment session. let's talk about the unjust ecosystem. so the natural dress is a part of the bigger ecosystem called on dress stands for in five JavaScript tools. And, so natural dress is made up of a bunch of packages, from this ecosystem. so do you want The most important one being H three. H three is H three provides all the, far based routes, and it's literally the powerhouse behind Nitro. And then this is on storage. On storage is used, is a storage layer that Nitro, and it uses, then it's unplug plugin, which is unified plugin system. for VEETs, rollup, and et cetera. There's OFetch for data fetching. There's unimport, and then there's, WebSockets and many more. So the Andreas ecosystem is made up of about 63 packages. they have about 421 million plus monthly downloads on NPM. there's over 49 key GitHub stars, 200 plus contributors, and over 5, 000 commits across all of, the packages in the ecosystem. So it's the OGS ecosystem is pretty huge and, and it keeps growing every day. So what's next for Nitro? So Nitro v3, is, it's on the way. And, it's meant to bring up some, some features such as, stabilize some of the features. For example, we have, WebSocket tasks and, the. The database storage layer, which are still in expert, which are still in the experimental versions. And those are going to be more stable by the release of Nitro V3. Nitro V3 also promises a smaller output bundle. and it also removes, the fetch polyfills that were added to be compatible with Node 18. And, also doing that is going to further reduce the output bundle. And then there's also going to be an experimental integration, which, aims to improve things such as, faster hot module reloading and, just a better, integration, in general. natural v3 also still promises many more. These are just, on the surface. And, yeah. Thank you very much for attending my talk. you can find NitroJS at, nitrojs. dev and then the onjs community, it's github slash onjs and then, you find the community repository. Thank you very much. I hope you've been able to learn a lot. have a nice day.