252 lines
4.5 KiB
Markdown
252 lines
4.5 KiB
Markdown
# Full Stack Application Setup Guide
|
|
|
|
This project consists of a client-server architecture with an Angular frontend and Hono.js backend.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
tehnicni/
|
|
├── client/ # Angular application (Nx workspace)
|
|
├── server/ # Hono.js API server
|
|
└── README.md # This file
|
|
```
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js (version 18 or higher)
|
|
- npm package manager
|
|
- Git
|
|
|
|
## Quick Start
|
|
|
|
### 1. Clone and Setup
|
|
|
|
```bash
|
|
git clone <repository-url>
|
|
cd tehnicni
|
|
```
|
|
|
|
### 2. Server Setup
|
|
|
|
```bash
|
|
# Navigate to server directory
|
|
cd server
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Setup database
|
|
npm run db:push
|
|
npm run db:seed
|
|
|
|
# Start development server
|
|
npm run dev
|
|
```
|
|
|
|
The server will be running at `http://localhost:3000`
|
|
|
|
### 3. Client Setup
|
|
|
|
```bash
|
|
# Navigate to client directory (from project root)
|
|
cd client
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start development server
|
|
npm start
|
|
```
|
|
|
|
The client will be running at `http://localhost:4200`
|
|
|
|
## Detailed Setup Instructions
|
|
|
|
### Server Setup (Backend)
|
|
|
|
#### Technologies Used
|
|
|
|
- **Framework**: Hono.js
|
|
- **Database**: SQLite with Drizzle ORM
|
|
- **Runtime**: Node.js with TypeScript
|
|
|
|
#### Setup Steps
|
|
|
|
1. **Install Dependencies**
|
|
|
|
```bash
|
|
cd server
|
|
npm install
|
|
```
|
|
|
|
2. **Environment Configuration**
|
|
The `.env` file is already configured:
|
|
|
|
```
|
|
DB_FILE_NAME=file:./src/db/local.db
|
|
```
|
|
|
|
3. **Database Setup**
|
|
|
|
```bash
|
|
# Generate and push database schema
|
|
npm run db:push
|
|
|
|
# Seed with sample data (users, tasks, comments)
|
|
npm run db:seed
|
|
```
|
|
|
|
4. **Run Development Server**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
#### Server Scripts
|
|
|
|
- `npm run dev` - Development server with hot reload
|
|
- `npm run db:push` - Push schema to database
|
|
- `npm run db:generate` - Generate migrations
|
|
- `npm run db:migrate` - Run migrations
|
|
- `npm run db:reset` - Reset database
|
|
- `npm run db:seed` - Seed sample data
|
|
|
|
#### API Endpoints
|
|
|
|
- `GET/POST /users` - User management
|
|
- `GET/POST /tasks` - Task management
|
|
- `GET/POST /comments` - Comment management
|
|
|
|
### Client Setup (Frontend)
|
|
|
|
#### Technologies Used
|
|
|
|
- **Framework**: Angular 20
|
|
- **Build System**: Nx workspace
|
|
- **UI Library**: Angular Material
|
|
- **Styling**: SCSS
|
|
|
|
#### Setup Steps
|
|
|
|
1. **Install Dependencies**
|
|
|
|
```bash
|
|
cd client
|
|
npm install
|
|
```
|
|
|
|
2. **Development Server**
|
|
|
|
```bash
|
|
npm start
|
|
# or
|
|
nx serve org
|
|
```
|
|
|
|
3. **Build for Production**
|
|
```bash
|
|
npm run build
|
|
# or
|
|
nx build org
|
|
```
|
|
|
|
#### Client Scripts
|
|
|
|
- `npm start` - Start development server
|
|
- `npm run build` - Build for production
|
|
- `npm test` - Run tests
|
|
- `nx serve org` - Serve with Nx
|
|
- `nx build org` - Build with Nx
|
|
- `nx test org` - Test with Nx
|
|
|
|
#### Libraries and Features
|
|
|
|
- **Shared Libraries**: API services, stores, i18n, toast notifications
|
|
- **Web Libraries**: Users, tasks management
|
|
- **Styling**: Angular Material with Azure Blue theme
|
|
|
|
## Development Workflow
|
|
|
|
### 1. Start Both Servers
|
|
|
|
**Terminal 1 (Server):**
|
|
|
|
```bash
|
|
cd server
|
|
npm run dev
|
|
```
|
|
|
|
**Terminal 2 (Client):**
|
|
|
|
```bash
|
|
cd client
|
|
npm start
|
|
```
|
|
|
|
### 2. Access Applications
|
|
|
|
- **Frontend**: http://localhost:4200
|
|
- **Backend API**: http://localhost:3000
|
|
- **Nx Console**: Available in VS Code with Nx extension
|
|
|
|
### 3. Development Tools
|
|
|
|
- **Nx Console**: VS Code extension for Nx workspace management
|
|
- **Angular DevTools**: Browser extension for Angular debugging
|
|
- **Database**: SQLite file at `server/src/db/local.db`
|
|
|
|
## Common Issues and Solutions
|
|
|
|
### Database Issues
|
|
|
|
```bash
|
|
# Reset and recreate database
|
|
cd server
|
|
npm run db:reset
|
|
npm run db:push
|
|
npm run db:seed
|
|
```
|
|
|
|
### Port Conflicts
|
|
|
|
- Server runs on port 3000
|
|
- Client runs on port 4200
|
|
- Change ports in respective configuration files if needed
|
|
|
|
### Dependencies
|
|
|
|
```bash
|
|
# Clean install for both projects
|
|
cd server && rm -rf node_modules && npm install
|
|
cd ../client && rm -rf node_modules && npm install
|
|
```
|
|
|
|
### Nx Cache Issues
|
|
|
|
```bash
|
|
cd client
|
|
nx reset
|
|
```
|
|
|
|
## Project Architecture
|
|
|
|
### Backend (Server)
|
|
|
|
- **API Routes**: RESTful endpoints for users, tasks, comments
|
|
- **Database**: SQLite with Drizzle ORM
|
|
- **Middleware**: CORS, logging
|
|
- **Seeding**: Faker.js for sample data
|
|
|
|
### Frontend (Client)
|
|
|
|
- **Nx Workspace**: Monorepo structure with multiple libraries
|
|
- **Angular**: Standalone components with signals
|
|
- **Shared Libraries**: Reusable services and utilities
|
|
- **Feature Libraries**: Domain-specific functionality
|
|
|
|
## Additional Resources
|
|
|
|
- [Nx Documentation](https://nx.dev)
|
|
- [Angular Documentation](https://angular.io)
|
|
- [Hono Documentation](https://hono.dev)
|
|
- [Drizzle ORM Documentation](https://orm.drizzle.team)
|