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 🚀
Top comments (0)