DEV Community

Cover image for 🚀 Stop Rewriting the Same React Boilerplate — I Built a CLI to Fix It
Aditya Sengar
Aditya Sengar

Posted on

🚀 Stop Rewriting the Same React Boilerplate — I Built a CLI to Fix It

#react #productivity #webdev #frontend

Every React team eventually runs into this:

  • Different folder structures across developers
  • Inconsistent naming conventions
  • Missing test files
  • Rewriting the same boilerplate again and again

And code reviews filled with:

“Move this file”
“Rename this properly”
“Where is the test?”

At some point, I realized:

❌ We don’t have a coding problem
✅ We have a standardization problem

💣 Why This Actually Hurts

This slows teams down more than we think:

  • 🚫 New developers take longer to onboard
  • 🧩 Codebases become inconsistent
  • 🔁 Same feedback in every PR
  • ⏳ Time wasted on setup instead of logic

💡 So I Built Something

I created rgenex — a config-driven React code generator CLI.

Define your structure once → generate consistent code across your team automatically

🎬 See It in Action

📦 Install

Install

⚙️ Initialize Project

Init

🧩 Generate Component

Generate

⚡ Getting Started (Takes < 1 minute)

1. Install 

npm install --save-dev rgenex
Enter fullscreen mode Exit fullscreen mode

2. Initialize 

npx rgenex init
Enter fullscreen mode Exit fullscreen mode

3. Generate 

npx rgenex g component Button
Enter fullscreen mode Exit fullscreen mode

🧠 The Core Idea

The real power of rgenex lies in how you use the rgenex.config.js file.

This file acts as the single source of truth for how your project should be structured.

🧩 Define your rules once in rgenex.config.js
🚀 Enforce them automatically across your entire team

How it works:
You define your preferred language, styling, and testing setup
You specify where different types of files should live (components, hooks, pages, etc.)
You configure how each generator should behave (structure, test files, styles, etc.)

Once this is set up:

👉 Every time someone runs a generator command, rgenex follows these rules
👉 No manual decisions, no inconsistencies

This means:

✅ Every component follows the same structure
✅ Every file is placed in the correct location
✅ Every developer generates code in the same way

Instead of relying on conventions that people forget…

You enforce them automatically through configuration.

Example:

module.exports = {
  language: "typescript",
  styling: "scss-modules",
  testing: "vitest",

  paths: {
    components: "src/components",
    pages: "src/pages",
    hooks: "src/hooks",
  },

  generators: {
    component: {
      structure: "grouped",
      includeTest: true,
      includeStyle: true,
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

✨ What You Get

  • ⚡ Instant scaffolding (components, hooks, pages)
  • 🧪 Auto-generated test files
  • 🎨 Styling support (SCSS, Tailwind, CSS)
  • 🧠 Smart project detection
  • 📦 Zero production impact

🎯 Why I Built This

I’ve worked on projects where:

  • Everyone had a different way of structuring files
  • Boilerplate was repeated constantly
  • Code reviews focused on structure instead of logic

I wanted something that:

  • Enforces standards automatically
  • Saves time
  • Improves developer experience

🚀 Try It Out 

npm install --save-dev rgenex
Enter fullscreen mode Exit fullscreen mode

👉 GitHub: https://github.com/asengar14/rgenex
👉 npm: https://www.npmjs.com/package/rgenex

🔮 What’s Coming Next

  • Custom generators (services, APIs, etc.)
  • Interactive CLI
  • Plugin system
  • More flexibility in templates

🤝 Would Love Your Feedback

If you try it:

  • What worked well?
  • What’s missing?
  • What would make it more useful for your team?

🏁 Final Thought

We spend most of our time writing logic.

But a surprising amount of time goes into:

📁 Creating files
📂 Setting up folders
🧱 Maintaining structure

If we automate that…

We can focus on what actually matters.

✨ Built with ❤️ by Aditya Singh Sengar

Top comments (0)