Mikael West
0e21d26c05
- Frontend: React 19 + Vite + TypeScript + TailwindCSS v4 + shadcn/ui - Pre-installed shadcn/ui components: Button, Card, Input, Separator - Multi-stage Dockerfile: build React client → serve with Express - Server.js updated to serve built React SPA with API routes - Sample landing page with shadcn/ui components demonstrating usage - Path aliases (@/) configured in tsconfig + vite config - components.json for easy `shadcn add <component>` usage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Company Website Template
React + shadcn/ui + Express + PostgreSQL + Redis scaffold for SAAC deployment.
Stack
- Frontend: React 19 + Vite + TypeScript + TailwindCSS v4 + shadcn/ui
- Backend: Express.js (Node 20)
- Database: PostgreSQL 16
- Cache: Redis 7
- Deploy: Docker Compose via
saac deploy
Structure
├── server.js # Express backend (API + serves React build)
├── client/ # React frontend (Vite + shadcn/ui)
│ ├── src/
│ │ ├── components/ui/ # shadcn/ui components (Button, Card, Input, etc.)
│ │ ├── lib/utils.ts # cn() utility for Tailwind class merging
│ │ ├── pages/ # Page components
│ │ ├── App.tsx # Router
│ │ └── main.tsx # Entry point
│ ├── components.json # shadcn/ui config
│ ├── vite.config.ts # Vite config with path aliases
│ └── package.json # Client dependencies
├── docker-compose.yml # PostgreSQL + Redis + App
├── Dockerfile # Multi-stage: build React → serve with Express
└── package.json # Server dependencies
Development
# Install all dependencies
npm install && cd client && npm install && cd ..
# Run backend + frontend concurrently
npm run dev
# Or run separately:
npm run dev:server # Express on :3000
npm run dev:client # Vite on :5173 (proxies /api to :3000)
Adding shadcn/ui Components
cd client
pnpm dlx shadcn@latest add dialog # Add Dialog component
pnpm dlx shadcn@latest add table # Add Table component
pnpm dlx shadcn@latest add select # Add Select component
Import: import { Button } from "@/components/ui/button"
Deploy
saac deploy
API Routes
GET /health— Health check (PostgreSQL + Redis)GET /api/status— Example API endpointGET /*— React SPA (served from client/dist)