Barebones http server with vite and express

An idea

Recently I got to work with an old express project. It was maintainable, but the DX is not something I'm accustomed to in 2024. The event coincided with my recent interest in AdonisJS, especially v6 (basically a laravel for NodeJS), so the felling was even more pronounced.

I wondered, without much effort, could I make better? I especially yearned for one thing - fast reloads. Also, in my project there was an attempt to implement DI, and it worked, but it was not as elegant as I would like. Adonis does this great because it really uses the concept for what it is useful for in JS - making the code more testable and configurable.

There is a really easy path to achieve those things, let me show it to you.

Vite all the things - a foreword

I'm using Vite in a lot of projects. It saved my ass in many situations. I migrated some old projects from Create React App, from pure webpack, and even use it with remix. The tool is something I'm familiar with, and it integrates really well with older codebases, for reasons I will not expand on here. It has HMR capabilities, so I thought that maybe I will be able to create a solution using Vite.

With version 5.1, it introduced experimental runtime API, making it even easier to use with backend projects as a preprocessor. The API is not ready yet, but knowing that it will support such cases, gives hope that we will be able to evolve any magical ideas shown in this article into mature solutions.

You may wonder - why not go into AdonisJS directly? I would love to, it is plain simply better, but I don't want to rewrite every project for the sake of me having fun. I want improvements, but with low cost if possible.

The code

You can use vavite - a wonderful project from Fatih Aygün that lets you develop backend apps with vite. It is really simple, you add a vite plugin, point to your server file, and voila, you got full vite pipeline, with blazing fast server reloads.

import { defineConfig } from "vite";
import { vavite } from "vavite";

export default defineConfig({
  plugins: [
    vavite({
      handlerEntry: "/server.ts",
      reloadOn: "static-deps-change",
    }),
  ],
});

Enjoy!