create-webapp-kit

A CLI to scaffold a full-stack web app with a modern frontend, backend, and database setup.

Quick start

Run the following command to generate a new project:

npm create webapp-kit@latest

Supported stack

The CLI lets you choose from:

• Frontend: React, Vue
• Backend: Express
• Database: MongoDB

Generated project structure

Depending on the selections, a generated app can look like this:

my-app/
├── client/
│   ├── public/
│   ├── src/
│   ├── .gitignore
│   ├── package.json
│   ├── vite.config.ts
│   └── README.md
├── server/
│   ├── src/
│   ├── .gitignore
│   ├── package.json
│   └── README.md
├── database/
│   ├── connection.ts
│   ├── index.ts
│   ├── .gitignore
│   ├── package.json
│   └── README.md
├── package.json
│── .gitignore
├── README.md

Included folders

• client/: selected frontend app (React or Vue)
• server/: Express backend app
• database/: MongoDB setup when selected

Start the app

1) Start the frontend

cd <project-name>/client

Create or update .env in the client folder:

VITE_BACKEND_URL="http://localhost:3000"

Then run:

npm run dev

2) Start the backend

cd <project-name>/server

Create or update .env in the server folder:

SESSION_SECRET='your-secret'
PORT='3000'

Then run:

npm run start

3) Start the database layer

If MongoDB is selected, no need to run the package it will automatically run with the backend. Make sure you have MongoDB installed and running on your machine.

You can also use a cloud MongoDB service like MongoDB Atlas. Update the DB_URL in the database .env file accordingly.

Notes

• The frontend connects to the backend using VITE_BACKEND_URL.
• The backend uses MongoDB via DB_URL for session storage and database connections.
• SESSION_SECRET is used for secure session encryption.
• The CLI copies only the selected frontend/backend/database templates, so the generated app does not include unused folders.