Build Your Own npm create CLI for Both React Frontend & Node.js Backend (Full-Stack Starter)

Sajal Sahu — Tue, 09 Dec 2025 05:38:18 +0000

Every time I start a new project, it begins the same way:
create React app, add Tailwind, configure ESLint, setup folder structure… then switch to backend, install Express, connect MongoDB, setup auth, env files — and before I even write real business logic, half my energy is already gone.

After repeating this setup dance way too many times, I finally asked myself:
“Why am I not automating my own stack the same way Vite does?”

That question led me to build my own npm create CLI for both React frontend and Node.js backend — and in this article, I’ll show you exactly how to build yours too.

We all love tools like:

npm create vite@latest

But in real projects, we rarely use plain Vite setups. Most teams repeat the same stack again and again:

For Frontend: React + Vite + Tailwind + ESLint

For Backend: Node.js + Express + MongoDB + Auth + Folder structure

After wasting hours doing the same setup repeatedly, I decided to build my own npm create CLI that can generate:

✅ A production-ready React frontend
✅ A structured Node.js backend
From a single command.

In this article, we’ll build a custom npm create package that supports both frontend and backend templates.

We will create a CLI tool that lets us run:

npm create fullstack-starter@latest my-app

Then choose:

React Frontend
Node.js Backend

And it will:
✅ Clone the correct GitHub template
✅ Install dependencies
✅ Prepare the project instantly

Step 1: Create Your Frontend & Backend Templates
🔹 1.1 React Frontend Starter
Create your frontend project:

npm create vite@latest react-starter
cd react-starter
npm install

Customize it with:

Tailwind CSS
ESLint + Prettier
Router
Axios
Folder structure (components, pages, services, hooks)

Push this to GitHub:

https://github.com/your-username/react-super-starter

🔹 1.2 Node.js Backend Starter

mkdir node-super-starter
cd node-super-starter
npm init -y
npm install express mongoose dotenv cors morgan jsonwebtoken bcrypt

Basic structure:

src/
 ┣ config/
 ┣ controllers/
 ┣ routes/
 ┣ models/
 ┣ middlewares/
 ┣ utils/
 ┗ server.js

Setup server.js, env config, DB connection, auth middleware, etc.

Push this too:

https://github.com/your-username/node-super-starter

Step 2: Create the CLI Package

mkdir create-fullstack-starter
cd create-fullstack-starter
npm init -y

Update package.json:

{
  "name": "create-fullstack-starter",
  "version": "1.0.0",
  "description": "Custom Full-Stack Starter CLI (React + Node)",
  "bin": {
    "create-fullstack-starter": "index.js"
  },
  "keywords": ["react", "node", "starter", "cli", "mern"],
  "author": "Your Name",
  "license": "MIT"
}

Step 3: Build the CLI Logic (Frontend + Backend)
Create index.js:

#!/usr/bin/env node

const { execSync } = require("child_process");
const path = require("path");
const fs = require("fs");
const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const projectName = process.argv[2];

if (!projectName) {
  console.log("Usage:");
  console.log("npm create fullstack-starter@latest my-app");
  process.exit(1);
}

const targetDir = path.resolve(process.cwd(), projectName);

if (fs.existsSync(targetDir)) {
  console.error("❌ Folder already exists.");
  process.exit(1);
}

// 👉 Your template repositories
const frontendRepo = "your-username/react-super-starter";
const backendRepo = "your-username/node-super-starter";

console.log("\nWhat do you want to create?");
console.log("1. React Frontend");
console.log("2. Node.js Backend");

rl.question("\nEnter option (1 or 2): ", (answer) => {
  let selectedRepo = null;

  if (answer === "1") {
    selectedRepo = frontendRepo;
  } else if (answer === "2") {
    selectedRepo = backendRepo;
  } else {
    console.log("❌ Invalid option");
    rl.close();
    process.exit(1);
  }

  console.log(`\n🚀 Creating project: ${projectName}\n`);

  try {
    execSync(`npx degit ${selectedRepo} ${projectName}`, {
      stdio: "inherit",
    });

    console.log("\n📦 Installing dependencies...\n");
    execSync(`cd ${projectName} && npm install`, {
      stdio: "inherit",
    });

    console.log("\n✅ Project setup complete!");
    console.log(`\nNext steps:`);
    console.log(`cd ${projectName}`);
    console.log(`npm run dev`);
  } catch (err) {
    console.error("❌ Setup failed");
  }

  rl.close();
});

Now your CLI supports both frontend and backend generation.

Step 4: Test Locally

npm link
npx create-fullstack-starter test-project

You’ll be prompted to choose:

React Frontend
Node Backend

Step 5: Publish to npm

npm login
npm publish --access public

Step 6: Use It Anywhere in the World

npm create fullstack-starter@latest my-app

Choose your stack → project gets created instantly.

🏆 Why This Is a Game-Changer

Standardizes your frontend & backend setup
Saves hours of repetitive work
Perfect for teams & startups
Makes you look like a CLI wizard 🧙‍♂️

✅ Bonus Ideas

You can later extend this tool with:

✅ Full MERN stack combined template
✅ TypeScript backend template
✅ Sequelize / Prisma backend option
✅ pnpm & yarn support
✅ Auth-ready boilerplate

Final Thoughts
Once you build your own npm create tool for both React and Node, you stop wasting time on boring setup and start shipping features immediately.

This is one of those developer upgrades that permanently improves your workflow.

If you’ve read this far, congrats — you now have the blueprint to build your own developer productivity weapon. Creating a custom npm create CLI for your React frontend and Node.js backend isn’t just a cool side project — it’s a workflow upgrade that saves time on every single project you’ll build in the future.

Once you experience the joy of spinning up a full-stack project in seconds using your own command, there’s no going back to manual setup. This is one of those small investments that pays off for years.

If this article helped you, feel free to share it with your team, give it a ❤️, and build your own version of this tool. And if you take it further with multiple templates, TypeScript backends, or full MERN starters — I’d genuinely love to hear about it.

Happy building and faster shipping 🚀

DEV Community: Sajal Sahu

Build Your Own npm create CLI for Both React Frontend & Node.js Backend (Full-Stack Starter)

Choose your stack → project gets created instantly.