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
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
npm install
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
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!"
}
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!' }
})
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!
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
Thank you all and hope you enjoyed the blog!
Top comments (0)