DEV Community

Music Khairy
Music Khairy

Posted on

I Publish A New Package On NPM, Here's What I Build.

#javascript #cpp #webserver #napi

Nitro 5 — Web Server

I just published Nitro 5

I’m excited to share that I’ve published Nitro 5, a new web server framework built with a hybrid Node.js + C++ architecture.

Nitro 5 was created with one main idea in mind: combine the flexibility of JavaScript with the performance advantages of native code. Instead of forcing everything through one layer, Nitro 5 uses Node.js for application-level logic, routing, and developer-friendly workflow, while C++ is used for performance-critical parts such as low-level request handling, system optimization, and native execution paths.

The result is a framework that aims to feel modern, practical, and easy to work with, while still staying focused on speed and efficiency. That balance is the core of the project. I wanted something that could be used for real applications, not just as a proof of concept, and something that can evolve into a stronger production-ready ecosystem over time.

Nitro 5 also includes built-in support for TypeScript, JSX/TSX, and fast bundling through ESBuild. That means you can work with modern frontend and backend workflows without making your development experience slow or painful. It also includes Hot Module Replacement (HMR), watch mode, caching, a router, a dashboard, and thread workers, all designed to make development smoother and improve responsiveness.

This project is still growing, but it already reflects the direction I want Nitro 5 to take: fast startup, fast rebuilds, scalable architecture, and a developer experience that feels clean instead of complicated.

If you like performance-focused tooling, modern JavaScript ecosystems, or just enjoy experimenting with new frameworks, Nitro 5 is something I’d be happy for you to try.

What Nitro 5 Delivers

Nitro 5 includes support for:

  • Scalable web server architecture
  • TypeScript support
  • TypeScript cache
  • JSX / TSX support for React
  • Vite support
  • Hot Module Replacement (HMR)
  • Caching
  • Watcher mode
  • Router
  • Dashboard
  • Thread workers
  • Fast development rebuilds
  • Native performance-focused execution paths
  • A workflow designed for modern web projects

Why I Built It

I built Nitro 5 because I wanted to explore a different kind of server framework.

A lot of web tools lean heavily toward one side of the spectrum. Some are easy to use but lose performance when the project gets bigger. Others are extremely fast but harder to work with, especially during development. Nitro 5 tries to live in the middle.

The idea is not to replace every existing framework. The idea is to create a foundation that feels:

  • fast without being awkward
  • modern without being bloated
  • flexible without becoming messy
  • powerful without losing developer experience

I also wanted to make something that supports the way developers actually build today. That means TypeScript. That means TSX. That means quick rebuilds. That means working with frontend and backend code in a more natural way. Nitro 5 is built around those expectations instead of treating them like optional extras.

Core Philosophy

Nitro 5 follows a simple philosophy:

1. Keep the framework approachable

The API should feel understandable and not require a huge learning curve.

2. Keep the build process fast

Development should feel responsive. Waiting too long for rebuilds kills momentum.

3. Keep the runtime efficient

Native optimization should be used where it makes sense, especially for performance-sensitive parts.

4. Keep the architecture scalable

The project should be able to grow over time without turning into a tangled mess.

5. Keep the developer experience clean

A framework should help you move faster, not make simple things feel complicated.

Architecture

Nitro 5 is organized into several layers of responsibility.

Application Layer

Handles routing, middleware, app logic, configuration, and framework behavior.

Runtime Layer

Coordinates Node.js execution and manages server operations.

Performance Layer

Uses C++ bindings for low-level optimization and performance-sensitive paths.

Build Layer

Uses ESBuild for fast transformations and modern module workflows.

This layered design makes the system easier to reason about and gives it room to grow without forcing everything into one giant block of logic.

How to Use Nitro 5

1. Install the C/C++ Toolchain

Because Nitro 5 includes native parts, make sure your environment has a compiler installed.

apt install clang
Enter fullscreen mode Exit fullscreen mode

Depending on your system, you may also need additional build tools.

2. Install Nitro 5 

npm install nitro5
Enter fullscreen mode Exit fullscreen mode

3. Let Postinstall Finish

Nitro 5 will automatically build native modules during the postinstall step.

This is an important part of setup because it prepares the C++ side of the framework and makes it ready to run.

4. Start the CLI 

nitro5
Enter fullscreen mode Exit fullscreen mode

5. Open the Local Server

Open your browser and visit:

http://localhost:3000/
Enter fullscreen mode Exit fullscreen mode

If everything is configured correctly, you should see the Nitro 5 server running.

Example Configuration

A typical nitro5.config.js may look like this:

export default {
  server: {
    port: 3000,
  },
  dev: {
    useVite: false
  },
  cache: {
    enabled: true,
    ttl: 60
  },
  dashboard: true,
  cors: {
    enabled: true,
    origin: "*"
  },
  cacheTs: true
};
Enter fullscreen mode Exit fullscreen mode

Example Project Structure

A common project layout may look like this:

.
|____ nitro5.config.js
|
|__ public
    |___ index.html
    |___ app.tsx
    |___ main.ts
Enter fullscreen mode Exit fullscreen mode

Example Frontend Setup

public/index.html 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nitro 5</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

public/app.tsx 

import React from "react";

export function App() {
  return (
    <div>
      <h1>Nitro5 + React 19 🚀</h1>
      <p>Web server ready!</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

public/main.ts 

import React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./app";

createRoot(document.getElementById("app")!).render(<App />);
Enter fullscreen mode Exit fullscreen mode

Example Usage Flow

A simple Nitro 5 workflow might look like this:

  1. Install the package
  2. Prepare the native toolchain
  3. Configure the server
  4. Run the CLI
  5. Open the browser
  6. Start building pages, APIs, or interactive app features

The goal is to keep this flow straightforward so that the developer can focus on building the project instead of fighting with setup.

Features in Practice

TypeScript Support

Nitro 5 is built to work naturally with TypeScript, making it easier to write maintainable code with type safety.

TSX / JSX Support

This helps when building UI-driven workflows or React-based frontend setups.

ESBuild Integration

Fast transforms help keep development fast and responsive.

HMR

Hot Module Replacement makes iteration smoother by reducing the need for full reload cycles.

Caching

Caching helps improve repeated request performance and reduce unnecessary work.

Watch Mode

Useful during development so changes can be detected quickly.

Router

A router gives the project structure and keeps routing logic organized.

Dashboard

A dashboard can help inspect or manage the server more easily.

Thread Workers

Workers give the framework more room to scale under load and handle parallel tasks better.

What Makes Nitro 5 Different

Nitro 5 is not trying to be just another wrapper around existing ideas.

It is being shaped around a few specific goals:

  • keep the API approachable
  • keep the dev loop fast
  • support modern frontend and backend workflows
  • improve performance where native code helps
  • remain scalable for future features
  • avoid making the project feel overcomplicated

That balance is the main point of the framework.

Current Focus

Right now, Nitro 5 is focused on improving:

  • developer experience
  • architecture clarity
  • build speed
  • request handling
  • native integration
  • TypeScript and TSX support
  • HMR behavior
  • caching behavior
  • router functionality
  • dashboard usefulness

Roadmap

Possible future improvements include:

  • improved developer dashboard
  • enhanced caching controls
  • better TypeScript tooling
  • expanded plugin support
  • more advanced HMR integration
  • multi-threaded request optimization
  • additional router features
  • production build optimizations
  • better native binding workflows
  • more utilities for real-world projects

Contributing

Contributions are welcome.

If you find a bug, have an idea, or want to improve something, feel free to open an issue or submit a pull request.

Before contributing, please try to keep changes consistent with the architecture and direction of the project. Clean, practical improvements are always appreciated.

License

This project is licensed under the BSD 3-Clause License.

Copyright 2026 (C) OpenDN Foundation

Top comments (0)