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>
68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
saac deploy
|
|
```
|
|
|
|
## API Routes
|
|
|
|
- `GET /health` — Health check (PostgreSQL + Redis)
|
|
- `GET /api/status` — Example API endpoint
|
|
- `GET /*` — React SPA (served from client/dist)
|