create-express-react-starter

CLI generator untuk membuat aplikasi full-stack menggunakan React, TypeScript, Vite, Tailwind CSS, Express, MySQL, Sequelize ORM, Raw SQL, JWT Authentication, RBAC, Migration, Seeder, Responsive Dashboard, dan Docker Compose.

Prerequisites

• Node.js >= 18
• npm >= 9
• Docker & Docker Compose (untuk menjalankan aplikasi)

Instalasi

npx create-express-react-starter my-app

Atau:

npm create express-react-starter my-app

Quick Start

# 1. Buat project baru
npx create-express-react-starter my-app

# 2. Masuk ke directory project
cd my-app

# 3. Jalankan dengan Docker Compose
docker compose up -d --build

# 4. Jalankan migration
docker exec my-app-backend npm run migrate

# 5. Jalankan seeder (buat admin default)
docker exec my-app-backend npm run seed

Aplikasi akan tersedia di:

| Service | URL | |---------|-----| | Frontend | http://localhost:5173 | | Backend API | http://localhost:4000/api |

Default Admin Credentials

| Field | Value | |-------|-------| | Email | [email protected] | | Password | change-me |

⚠️ Penting: Ganti password admin di production!

Generated Project Structure

my-app/
├── backend/
│   ├── src/
│   │   ├── config/          # Database, JWT, App configuration
│   │   ├── controllers/     # Request/Response handlers
│   │   ├── database/
│   │   │   ├── migrations/  # Database migrations (5 tables)
│   │   │   └── seeders/     # Database seeders
│   │   ├── middlewares/      # Auth, RBAC, Error, Validation
│   │   ├── models/          # Sequelize models
│   │   ├── repositories/
│   │   │   ├── orm/         # Sequelize repositories
│   │   │   └── raw/         # Raw SQL repositories
│   │   ├── routes/          # API routes
│   │   ├── services/        # Business logic
│   │   ├── types/           # TypeScript types
│   │   ├── utils/           # Utilities
│   │   ├── app.ts           # Express app
│   │   └── server.ts        # Server entry
│   ├── .env.example
│   ├── Dockerfile
│   └── package.json
│
├── frontend/
│   ├── src/
│   │   ├── components/      # Reusable components
│   │   ├── contexts/        # React contexts (Auth)
│   │   ├── layouts/         # Dashboard layout
│   │   ├── pages/
│   │   │   ├── auth/        # Login, Register
│   │   │   └── dashboard/   # Dashboard pages
│   │   ├── services/        # API services
│   │   └── types/           # TypeScript types
│   ├── .env.example
│   ├── Dockerfile
│   └── package.json
│
├── docker-compose.yml
├── .env.example
├── .gitignore
└── README.md

Development (Tanpa Docker)

Backend

cd backend
npm install
cp .env.example .env    # Edit sesuai kebutuhan

# Jalankan migration
npm run migrate

# Jalankan seeder
npm run seed

# Jalankan development server
npm run dev

Frontend

cd frontend
npm install
cp .env.example .env

# Jalankan development server
npm run dev

Database

Schema

users           - Akun pengguna
roles           - Role (admin, manager, staff)
permissions     - Permission (users.read, users.create, dll)
user_roles      - Relasi User <-> Role
role_permissions - Relasi Role <-> Permission

Commands

# Jalankan migration
npm run migrate

# Rollback migration
npm run migrate:undo

# Jalankan seeder
npm run seed

API Endpoints

Authentication

| Method | Endpoint | Description | Auth | |--------|----------|-------------|------| | POST | /api/auth/register | Register user baru | ❌ | | POST | /api/auth/login | Login | ❌ | | GET | /api/auth/me | Get current user | ✅ | | POST | /api/auth/logout | Logout | ✅ |

Users

| Method | Endpoint | Description | Permission | |--------|----------|-------------|------------| | GET | /api/users | List users (paginated) | users.read | | GET | /api/users/:id | Get user | users.read | | POST | /api/users | Create user | users.create | | PATCH | /api/users/:id | Update user | users.update | | DELETE | /api/users/:id | Delete user | users.delete | | POST | /api/users/:id/roles | Assign role | users.update | | DELETE | /api/users/:id/roles/:roleId | Remove role | users.update |

Roles

| Method | Endpoint | Description | Permission | |--------|----------|-------------|------------| | GET | /api/roles | List roles | roles.read | | GET | /api/roles/:id | Get role | roles.read | | POST | /api/roles | Create role | roles.create | | PATCH | /api/roles/:id | Update role | roles.update | | DELETE | /api/roles/:id | Delete role | roles.delete | | POST | /api/roles/:id/permissions | Assign permission | roles.update | | DELETE | /api/roles/:id/permissions/:permissionId | Remove permission | roles.update |

Permissions

| Method | Endpoint | Description | Permission | |--------|----------|-------------|------------| | GET | /api/permissions | List permissions | permissions.read | | GET | /api/permissions/:id | Get permission | permissions.read | | POST | /api/permissions | Create permission | permissions.create | | PATCH | /api/permissions/:id | Update permission | permissions.update | | DELETE | /api/permissions/:id | Delete permission | permissions.delete |

Dashboard

| Method | Endpoint | Description | |--------|----------|-------------| | GET | /api/dashboard/stats | Get dashboard statistics |

Architecture

Backend Architecture

Route → Middleware → Controller → Service → Repository → Database

Repository Pattern

Project menyediakan dua pendekatan database:

ORM (Sequelize)

import { ormUserRepository } from '../repositories/orm';

const users = await ormUserRepository.findAll({ page: 1, limit: 10 });
const user = await ormUserRepository.findByEmail('[email protected]');

Raw SQL (mysql2)

import { rawUserRepository } from '../repositories/raw';

const users = await rawUserRepository.findAll({ page: 1, limit: 10 });
const user = await rawUserRepository.findByEmail('[email protected]');

RBAC (Role-Based Access Control)

// Middleware
router.get('/users', authenticate, requirePermission('users.read'), userController.index);
router.post('/users', authenticate, requirePermission('users.create'), userController.store);

Default Permissions

| Resource | Permissions | |----------|-------------| | users | users.read, users.create, users.update, users.delete | | roles | roles.read, roles.create, roles.update, roles.delete | | permissions | permissions.read, permissions.create, permissions.update, permissions.delete |

Default Roles

| Role | Permissions | |------|-------------| | admin | Semua permission | | manager | users.read, users.update, roles.read, permissions.read | | staff | users.read, roles.read, permissions.read |

Environment Variables

Backend (.env)

NODE_ENV=development
PORT=4000

DB_HOST=mysql
DB_PORT=3306
DB_NAME=app
DB_USER=root
DB_PASSWORD=root

JWT_SECRET=change-this-secret
JWT_EXPIRES_IN=1d

CORS_ORIGIN=http://localhost:5173

[email protected]
ADMIN_PASSWORD=change-me

Frontend (.env)

VITE_API_URL=http://localhost:4000/api

Docker Commands

# Start all services
docker compose up -d --build

# Stop all services
docker compose down

# Stop and remove volumes
docker compose down -v

# View logs
docker compose logs -f

# Run migration in container
docker exec my-app-backend npm run migrate

# Run seeder in container
docker exec my-app-backend npm run seed

# Access backend shell
docker exec -it my-app-backend sh

# Access MySQL shell
docker exec -it my-app-mysql mysql -u root -proot

Frontend Routes

Guest Routes

| Path | Description | |------|-------------| | /login | Login page | | /register | Register page |

Protected Routes

| Path | Description | |------|-------------| | /dashboard | Dashboard utama | | /users | User management | | /users/create | Create user | | /users/:id/edit | Edit user | | /roles | Role management | | /roles/create | Create role | | /roles/:id/edit | Edit role | | /permissions | Permission management |

Tech Stack

Frontend

• React 18
• TypeScript
• Vite 5
• Tailwind CSS 3
• React Router 6

Backend

• Node.js
• Express
• TypeScript
• JWT (jsonwebtoken)
• bcrypt (bcryptjs)
• Sequelize ORM
• MySQL (mysql2)

Infrastructure

• Docker
• Docker Compose
• MySQL 8.0
• Nginx

Security Features

• ✅ Password hashing dengan bcrypt
• ✅ JWT secret dari environment variable
• ✅ JWT expiration
• ✅ Parameterized SQL queries (anti SQL injection)
• ✅ Input validation
• ✅ CORS configuration
• ✅ Authentication middleware
• ✅ Authorization middleware (RBAC)
• ✅ Password hash tidak dikirim ke client
• ✅ .env tidak di-commit ke Git
• ✅ Error production tidak membocorkan stack trace

Contributing

1. Fork repository
2. Buat feature branch (git checkout -b feature/amazing-feature)
3. Commit perubahan (git commit -m 'feat: add amazing feature')
4. Push ke branch (git push origin feature/amazing-feature)
5. Buka Pull Request

License

MIT