create-sb-react-express

⚡ Scaffold a modern full-stack monorepo with React + Tailwind (Vite) frontend and Express + PostgreSQL backend — in seconds.

📦 Features

• 🧩 Monorepo structure with npm workspaces
• ⚛️ Frontend: React + Vite + Tailwind CSS
• 🚀 Backend: Express + PostgreSQL (via pg)
• 🐳 Docker-ready (docker-compose.yml for Postgres)
• 🧪 Test-ready frontend structure
• ⚡ Unified npm run dev to start both servers at once
• 🧰 CLI-based scaffolding via npx

🚀 Install

npm i -g create-sb-react-express

🚀 Usage

npx create-sb-react-express my-app
cd my-app
npm install

Then:

npm run dev

This runs both frontend (Vite on :5173) and backend (Express on :3000) using concurrently.

📁 Folder Structure

my-app/
├── client/               # React + Tailwind (Vite)
│   ├── src/
│   │   ├── components/   # Reusable components
│   │   ├── context/      # React contexts & tests
│   │   ├── pages/        # Page-level components
│   │   ├── api/          # Fetch helpers
│   │   └── main.jsx
│   └── tailwind.config.js
│
├── server/               # Express + PostgreSQL
│   ├── controllers/      # Route handlers
│   ├── db/               # Postgres pool, queries, seed
│   ├── routes/           # API routes
│   ├── expressInit.js
│   └── docker-compose.yml
│
├── package.json          # Root workspace with scripts

📦 Root package.json

The generated project uses npm workspaces and unified dev scripts:

{
  "name": "sb-react-express",
  "private": true,
  "workspaces": [
    "client",
    "server"
  ],
  "scripts": {
    "client": "npm run dev --prefix client",
    "server": "npm run dev --prefix server",
    "start": "concurrently \"npm run client\" \"npm run server\"",
    "dev": "concurrently \"npm run client\" \"npm run server\""
  },
  "devDependencies": {
    "concurrently": "^8.2.0",
    "nodemon": "^3.0.1"
  }
}

🛠️ Development Setup

1. Start Postgres, Express, Nginx via Docker

docker-compose up -d

2. Visit localhost:8080

Visit http://localhost:8080, you can change the port at docker-compose.override.yml

⚠️ Make sure the database service is up and reachable before running this script.

3. Rename .env.example to .env

In server and client there is .env.example files

cd client && mv .env.example .env && cd ..
cd server && mv .env.example .env && cd ..

4. Atlternative: Start both client/server (make sure you set up DB)

From root:

npm run dev

You can use the provided sserver/docker-compose.yml to setup a db quickly.

Production

docker-compose.ynml is ready for building the app.

📃 License

MIT

🙌 Author

Made by Mohammad Dahamshi

🌐 Website

Made with ❤️ by SaraWebs