setup-mern-project

A CLI tool that scaffolds a full-stack MERN project with an Express.js backend and a Vite + React frontend — with your choice of JavaScript or TypeScript for the entire stack — complete with a sensible folder structure, starter files, and dev tooling out of the box.

Features

Language Choice

• Interactive prompt lets you pick JavaScript or TypeScript (default) for the entire project (both backend and frontend)
• Generates the correct templates, starter files, config, and dev tooling accordingly

Backend (backend/)

• Express.js with ES module support ("type": "module")
• dotenv for environment variables
• TypeScript variant: index.ts and src/app.ts with typed Express, tsconfig.json, tsx for dev, @types/node and @types/express
• JavaScript variant: index.js and src/app.js, nodemon for dev
• Pre-created folder structure: models, controllers, routes, db, middlewares, utils, public
• .env and .gitignore included

Frontend (frontend/)

• Vite + React scaffolded non-interactively (no start-project prompt)
• public/ folder at the same level as src/
• Organized src/ structure with folders for:
  • assets (fonts, images)
  • components (common, layout, pages)
  • pages (HomePage, AboutPage)
  • config, constants, contexts, hooks, routes, services, styles, utils
  • types (TypeScript only)
• Starter components (App, Button, Header) and config files in .tsx/.ts or .jsx/.js
• Global CSS and style stubs

Installation

Install the CLI globally from npm:

npm install -g setup-mern-project

Or run it directly with npx:

npx setup-mern-project my-app

Usage

setup-project <project-name>

For example:

setup-project my-app

The CLI will prompt you to choose a language for the whole project:

Choose project language (backend + frontend):
  (1) JavaScript
  (2) TypeScript (default)
Enter 1 or 2:

Press Enter (or type 2) for TypeScript, or type 1 for JavaScript. It then creates a my-app/ directory and sets up both backend and frontend inside it.

Generated Folder Structure

TypeScript variant

my-app/
├── backend/
│   ├── src/
│   │   ├── models/
│   │   ├── controllers/
│   │   ├── routes/
│   │   ├── db/
│   │   ├── middlewares/
│   │   ├── utils/
│   │   ├── public/
│   │   └── app.ts
│   ├── index.ts
│   ├── tsconfig.json
│   ├── .env
│   ├── .gitignore
│   └── package.json
│
└── frontend/
    ├── public/
    ├── src/
    │   ├── assets/
    │   │   ├── fonts/
    │   │   └── images/
    │   ├── components/
    │   │   ├── common/
    │   │   │   ├── Button.tsx
    │   │   │   └── Header.tsx
    │   │   ├── layout/
    │   │   └── pages/
    │   ├── pages/
    │   │   ├── HomePage/
    │   │   └── AboutPage/
    │   ├── config/
    │   ├── constants/
    │   ├── contexts/
    │   ├── hooks/
    │   ├── routes/
    │   ├── services/
    │   ├── styles/
    │   │   ├── global.css
    │   │   └── mixins.css
    │   ├── utils/
    │   ├── types/
    │   ├── App.tsx
    │   └── main.tsx
    ├── index.html
    └── package.json

JavaScript variant

my-app/
├── backend/
│   ├── src/
│   │   ├── models/
│   │   ├── controllers/
│   │   ├── routes/
│   │   ├── db/
│   │   ├── middlewares/
│   │   ├── utils/
│   │   ├── public/
│   │   └── app.js
│   ├── index.js
│   ├── .env
│   ├── .gitignore
│   └── package.json
│
└── frontend/
    ├── public/
    ├── src/
    │   ├── assets/
    │   │   ├── fonts/
    │   │   └── images/
    │   ├── components/
    │   │   ├── common/
    │   │   │   ├── Button.jsx
    │   │   │   └── Header.jsx
    │   │   ├── layout/
    │   │   └── pages/
    │   ├── pages/
    │   │   ├── HomePage/
    │   │   └── AboutPage/
    │   ├── config/
    │   ├── constants/
    │   ├── contexts/
    │   ├── hooks/
    │   ├── routes/
    │   ├── services/
    │   ├── styles/
    │   │   ├── global.css
    │   │   └── mixins.css
    │   ├── utils/
    │   ├── App.jsx
    │   └── main.jsx
    ├── index.html
    └── package.json

Note: The types/ folder and tsconfig.json are only generated for TypeScript projects.

What the CLI Does

1. Language Prompt

Asks you to choose between JavaScript and TypeScript for the entire project (both backend and frontend). TypeScript is the default.

2. Backend Setup

1. Creates backend/ and initializes a new npm project (npm init -y).
2. Sets "type": "module" in package.json for ES module imports.
3. Installs express and dotenv.
4. TypeScript: Installs typescript, tsx, @types/node, and @types/express as dev dependencies. Adds dev (tsx watch index.ts), build (tsc), and start (node dist/index.js) scripts. Generates a tsconfig.json.
5. JavaScript: Installs nodemon as a dev dependency. Adds dev (nodemon index.js) and start (node index.js) scripts.
6. Scaffolds the src/ folder structure with models, controllers, routes, db, middlewares, utils, and public.
7. TypeScript: Generates index.ts (typed entry point) and src/app.ts (typed Express app).
8. JavaScript: Generates index.js (entry point) and src/app.js (Express app).
9. Creates .env and .gitignore.

3. Frontend Setup

1. Creates frontend/ and scaffolds a Vite project with react-ts or react template (based on your choice).
2. The Vite scaffold runs non-interactively — any prompt to start the project is automatically declined so that the custom folder structure is always created.
3. Installs all frontend dependencies.
4. Clears the default src/ contents and replaces them with an organized folder structure.
5. Creates a public/ folder at the same level as src/.
6. Creates starter components, config stubs, and global styles in the correct language.
7. Prints next-step instructions for running both servers.

Example Workflow

TypeScript

$ setup-project my-app

Choose project language (backend + frontend):
  (1) JavaScript
  (2) TypeScript (default)
Enter 1 or 2: 2

✅ Selected: TypeScript

🚀 Creating project: my-app...

🛠 Setting up backend (TypeScript)...
📦 Installing backend dependencies...
📦 Installing backend TypeScript dependencies...

⚡ Setting up frontend with Vite (TypeScript)...
📦 Installing frontend dependencies...

✅ Frontend custom structure created!

✅ Project setup completed successfully!

To get started:

  cd my-app/backend
  npm run dev

  cd my-app/frontend
  npm run dev

JavaScript

$ setup-project my-app

Choose project language (backend + frontend):
  (1) JavaScript
  (2) TypeScript (default)
Enter 1 or 2: 1

✅ Selected: JavaScript

🚀 Creating project: my-app...

🛠 Setting up backend (JavaScript)...
📦 Installing backend dependencies...

⚡ Setting up frontend with Vite (JavaScript)...
📦 Installing frontend dependencies...

✅ Frontend custom structure created!

✅ Project setup completed successfully!

To get started:

  cd my-app/backend
  npx nodemon index.js

  cd my-app/frontend
  npm run dev

Dependencies

Backend (installed in generated project)

TypeScript variant

| Package | Type | |------------------|---------------| | express | dependency | | dotenv | dependency | | typescript | devDependency | | tsx | devDependency | | @types/node | devDependency | | @types/express | devDependency |

JavaScript variant

| Package | Type | |------------|---------------| | express | dependency | | dotenv | dependency | | nodemon | devDependency |

Frontend (installed in generated project)

| Package | Type | |--------------|------------------------------------| | vite | dependency | | react | dependency | | react-dom | dependency | | typescript | dependency (TypeScript variant only)|

Development

If you want to contribute or modify the CLI itself:

git clone https://github.com/anubhabmowar/setup-mern-project.git
cd setup-mern-project
npm install
npm run build

The CLI source is written in TypeScript (src/index.ts) and compiled to JavaScript in dist/.

| Script | Description | |----------------------------|------------------------------------------| | npm run build | Compiles TypeScript to dist/ | | npm run prepublishOnly | Automatically builds before npm publish|

To test locally after building:

npm link
setup-project test-app

License

MIT

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request. 🚀

Links

• npm: https://www.npmjs.com/package/setup-mern-project
• GitHub: https://github.com/anubhabmowar/setup-mern-project
• Issues: https://github.com/anubhabmowar/setup-mern-project/issues