What if Vite had its own nest g? Now it does!

I’ve only recently started sharing articles and documentation publicly. Previously, all my writing was internal — release notes, docs, research, roadmaps — all within teams. But after publishing my first Vite plugin, I felt the need to share it with the world. To get feedback. To see if anyone would find it useful. Maybe someone would suggest a feature, spot a bug — or just say “thanks.” And while writing about it, I realized something: I enjoy this. I was already thinking about the next topic. But let’s get back to the plugin. How It All Started: Inspired by NestJS I’ve been a developer for over 5 years — mostly frontend, but I’ve been getting into backend recently too. It started with Node.js + Express, and then, at work, we launched a project to automate voice calls and analyze transcripts using OpenAI. I chose to build it with NestJS. I was only mildly familiar with it, but had to dive deep. And then, I ran: nest g resource …and boom — a full module appeared. I literally said out loud: “Why doesn’t React have something like this?!” Yes, there are snippets. Yes, some third-party generators exist. But I wanted structure. I wanted to type a command — and get a scaffolded component. Just like Nest. The Frontend Pain Back to a new internal project: a Telegram Web App using Vite + TypeScript + React + Zustand. A simple, small app. I start coding, and suddenly I’m back at it again: Create a folder Create Component.tsx Add index.ts Add props interface Import styles …and repeat Eventually, a new page design landed — and I had to do it all over again. My eye started twitching. So I wrote a bash script. It scaffolded everything I needed. Made it executable. Called it create-component. And you know what? I was so happy. Then came create-store, create-page, and so on. Life got easier. But there were still problems: Every project has slightly different templates Folder structure varies Sometimes you need something custom — and have to rewrite the script Especially on legacy projects — one had Angular 1.5 and React mixed in

May 12, 2025 - 04:27
 0
What if Vite had its own nest g? Now it does!

I’ve only recently started sharing articles and documentation publicly.

Previously, all my writing was internal — release notes, docs, research, roadmaps — all within teams.

But after publishing my first Vite plugin, I felt the need to share it with the world. To get feedback. To see if anyone would find it useful. Maybe someone would suggest a feature, spot a bug — or just say “thanks.”

And while writing about it, I realized something: I enjoy this. I was already thinking about the next topic. But let’s get back to the plugin.

How It All Started: Inspired by NestJS

I’ve been a developer for over 5 years — mostly frontend, but I’ve been getting into backend recently too.

It started with Node.js + Express, and then, at work, we launched a project to automate voice calls and analyze transcripts using OpenAI. I chose to build it with NestJS. I was only mildly familiar with it, but had to dive deep.

And then, I ran:

nest g resource

…and boom — a full module appeared.

I literally said out loud:

“Why doesn’t React have something like this?!”

Yes, there are snippets. Yes, some third-party generators exist. But I wanted structure.

I wanted to type a command — and get a scaffolded component. Just like Nest.

The Frontend Pain

Back to a new internal project: a Telegram Web App using Vite + TypeScript + React + Zustand. A simple, small app.

I start coding, and suddenly I’m back at it again:

  • Create a folder
  • Create Component.tsx
  • Add index.ts
  • Add props interface
  • Import styles
  • …and repeat

Eventually, a new page design landed — and I had to do it all over again.

My eye started twitching.

So I wrote a bash script. It scaffolded everything I needed. Made it executable. Called it create-component.

And you know what? I was so happy.

Then came create-store, create-page, and so on. Life got easier.

But there were still problems:

  • Every project has slightly different templates
  • Folder structure varies
  • Sometimes you need something custom — and have to rewrite the script

Especially on legacy projects — one had Angular 1.5 and React mixed in