DEV Community

Cover image for Introducing Nitro by @unjs: Simplifying API Development in Nodejs
Elvis Ansima
Elvis Ansima

Posted on

Introducing Nitro by @unjs: Simplifying API Development in Nodejs

If you have ever built an API with Express, you know the effort it takes to have a clean project structure ( the temptation to put everything in a single index file and have all the routes inside, if you opt to group your routes by folder, you have to import every file yourself, etc...).

Say hello to Nitro! I've been in the PHP ecosystem for a while and Nitro gives me the same vibe in NodeJS, it's really quick to have stuff up and running.

Whisper : ๐Ÿ™ƒ I tried Express in the past but I feel like it is over! for my next API projects Nitro is my favorite (if I have to decide)

Tips : Nitro is used as the server engine in Nuxtjs : https://nuxt.com/docs/guide/directory-structure/server

Nitro offers several features and my favorites are:

  • Zero config : you know it haha, no config file headache.
  • File system routing : create a file in the routes folder and boom, it's already an API route! nest them as you like, OMG !!!
  • Caching Response : With a simple configuration, caching has never been easier: again, no headaches.
  • Auto Imports : Automatically import utilities for a minimal and clean codebase. Only the used ones will be added to the final bundle.

Now you know it! We are going to build a simple server to get you started

Prepare your environment

Make sure you have installed the recommended setup:

  • Node.js* (latest LTS version)
  • Visual Studio Code

Starting point

We will be using npm & npx for this tutorial, but there is a way to get started using pnpm or yarn, please see the getting started guide on the nitro doc to learn more.

Run the following command in your terminal:

npx giget@latest nitro nitro-app
Enter fullscreen mode Exit fullscreen mode

The above command will create a folder named nitro-app (the name of our application) and a package json file with the necessary content for us to proceed.

Tip : npx: This is a package runner tool that comes with npm. It allows you to execute binaries from npm packages without installing them globally.

Next, change directory(cd) and install the dependencies

cd nitro-app
Enter fullscreen mode Exit fullscreen mode
npm install
Enter fullscreen mode Exit fullscreen mode

if you are on linux you can run the commands at the same time cd nitro-app & npm install on windows cd nitro-app ; npm install to save you time.

Next, open the folder in your Vscode or any other code editor of your choice.

Tip : for Vscode you can just type code . in the terminal and it will open the project for you.

Launch your terminal withing the root folder of your app and finally run

npm run dev
Enter fullscreen mode Exit fullscreen mode

Bingo! Your server is up... Don't believe me? Go to the address Nitro showed you in the CLI, usually http://localhost:3000, and do not be surprised to see the following response:

{
  "nitro": "Is Awesome!"
}
Enter fullscreen mode Exit fullscreen mode

Where is the reponse coming from ? well, check a file called index.ts inside the routes folder, it has the following content

export default eventHandler(() => {
  return { nitro: 'Is Awesome!' }
})
Enter fullscreen mode Exit fullscreen mode

Play with the response as you need, i will not teach you how to play with your keyboard ๐Ÿ˜‚๐Ÿ˜‚๐Ÿ˜‚

So let's explain what we have in the file:
So far it's a simple typescript file, the eventHandler function is the only special thing about Nitro here, all the rest can be whatever around it.

I'm not a big fan of Typescript, and if that's your case, thankfully Nitro supports both .ts and .js, so feel free to switch between them by renaming your route file. Again, no configuration required!

oouf gif

Want to make more routes? no problem, create another file within the routes folder, do whatever you want, but at the end make sure your file has an export default eventHandler as in our initial file.

Research for you:

  • How to parse request headers?
  • How to make nested routes? e.g. /foo/bar/baz?

Show us what you have found in the comments!

For additional reading, please explore the Nitro docs at: https://nitro.unjs.io

Thanks gif

Thank you all and hope you enjoyed the blog!

Top comments (2)

Collapse
 
rafazafar profile image
Zafar

Once you go Nitro, thereโ€™s no turning back. The plugin system is sooo nice. Some overbearing manager wants to log everything? Just few lines.

Need Openapi? just a config toggle.

Collapse
 
elvisans profile image
Elvis Ansima

Absolutely!