Scaffold NewApproach: Full-stack Bun+Hono+TypeScript+TailwindCSS project
- Create modular project structure with src/backend, src/frontend, public - Hono server with routing, static file serving, and API endpoints - TailwindCSS styling pipeline with Tailwind CLI - Vanilla JS frontend (extensible for frameworks) - Complete TypeScript configuration and type checking - Auth module as self-contained submodule - Ready for development: bun run dev (port 3000) - All dependencies installed and tested Also: - Lock main branch with read-only settings in VS Code - Create .github/copilot-instructions.md with Monica persona - Initialize session logging system Status: Project ready for feature development
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
# NewApproach
|
||||
|
||||
A full-stack TypeScript application with Hono backend, TailwindCSS styling, and Bun runtime.
|
||||
|
||||
## Stack
|
||||
|
||||
- **Runtime**: Bun (fast JavaScript runtime and package manager)
|
||||
- **Backend**: Hono (lightweight web framework)
|
||||
- **Language**: TypeScript (both frontend and backend)
|
||||
- **Styling**: TailwindCSS + PostCSS
|
||||
- **Package Manager**: Bun
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
NewApproach/
|
||||
├── src/
|
||||
│ ├── backend/
|
||||
│ │ ├── server.ts # Hono server entry point
|
||||
│ │ └── api.ts # API utilities
|
||||
│ ├── frontend/
|
||||
│ │ └── (UI components, if needed)
|
||||
│ └── auth/
|
||||
│ ├── auth.ts # Universal auth module
|
||||
│ └── auth-test.html # Auth testing
|
||||
├── public/
|
||||
│ ├── index.html # Main HTML entry point
|
||||
│ ├── app.js # Frontend logic
|
||||
│ └── output.css # Compiled TailwindCSS
|
||||
├── styles/
|
||||
│ └── input.css # TailwindCSS directives
|
||||
├── package.json
|
||||
├── tsconfig.json
|
||||
├── tailwind.config.js
|
||||
├── postcss.config.js
|
||||
└── README.md
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
# Start development server with hot reload
|
||||
bun run dev
|
||||
```
|
||||
|
||||
Server runs on `http://localhost:3000`
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
# Build CSS and TypeScript
|
||||
bun run build
|
||||
```
|
||||
|
||||
## Available Scripts
|
||||
|
||||
- `bun run dev` - Start development server with watch mode
|
||||
- `bun run build` - Build styles and backend code
|
||||
- `bun run build:styles` - Compile TailwindCSS to output.css
|
||||
- `bun run start` - Run production build
|
||||
- `bun run typecheck` - Check TypeScript types without building
|
||||
|
||||
## Architecture Notes
|
||||
|
||||
- **Backend**: Hono with simple routing and static file serving
|
||||
- **Frontend**: Vanilla JavaScript with TailwindCSS (no framework required, extensible)
|
||||
- **Styling**: TailwindCSS utilities only; custom CSS documented when added
|
||||
- **Auth**: Modular auth system in `/src/auth` (decoupled from app logic)
|
||||
|
||||
## Environment
|
||||
|
||||
Configure with environment variables (`.env` file):
|
||||
```
|
||||
PORT=3000
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
- The auth module is self-contained and can be used independently
|
||||
- TypeScript compilation and type checking ensure type safety
|
||||
- TailwindCSS purges unused styles in production builds
|
||||
- Bun handles all package management and script execution
|
||||
Reference in New Issue
Block a user