docks
This commit is contained in:
Gal Podlipnik
parent
8bbe2b4167
commit
4526870b2a
251
README.md
Normal file
251
README.md
Normal file
@ -0,0 +1,251 @@
|
||||
# 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)
|
||||
250
client/README.md
250
client/README.md
@ -1,82 +1,238 @@
|
||||
# Org
|
||||
# Client Application (Angular + Nx)
|
||||
|
||||
<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
|
||||
This is an Angular application built with Nx workspace, featuring multiple libraries and a modern development setup.
|
||||
|
||||
✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨.
|
||||
## Prerequisites
|
||||
|
||||
[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!
|
||||
- Node.js (version 18 or higher)
|
||||
- npm package manager
|
||||
- Angular CLI (optional, Nx provides similar functionality)
|
||||
|
||||
## Finish your remote caching setup
|
||||
## Quick Start
|
||||
|
||||
[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/mI3T4Te8D0)
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
|
||||
## Run tasks
|
||||
|
||||
To run the dev server for your app, use:
|
||||
|
||||
```sh
|
||||
npx nx serve org
|
||||
# Start development server
|
||||
npm start
|
||||
```
|
||||
|
||||
To create a production bundle:
|
||||
The application will be available at `http://localhost:4200`
|
||||
|
||||
```sh
|
||||
npx nx build org
|
||||
## Available Scripts
|
||||
|
||||
- `npm start` - Start development server
|
||||
- `npm run build` - Build for production
|
||||
- `npm test` - Run tests
|
||||
|
||||
## Nx Commands
|
||||
|
||||
```bash
|
||||
# Serve the application
|
||||
nx serve org
|
||||
|
||||
# Build the application
|
||||
nx build org
|
||||
|
||||
# Run tests
|
||||
nx test org
|
||||
|
||||
# Lint the code
|
||||
nx lint org
|
||||
|
||||
# Show project dependencies
|
||||
nx graph
|
||||
```
|
||||
|
||||
To see all available targets to run for a project, run:
|
||||
## Project Structure
|
||||
|
||||
```sh
|
||||
npx nx show project org
|
||||
```
|
||||
src/
|
||||
├── app/ # Main application
|
||||
├── index.html # HTML template
|
||||
├── main.ts # Application bootstrap
|
||||
└── styles.scss # Global styles
|
||||
|
||||
libs/
|
||||
├── shared/
|
||||
│ ├── api/ # API services
|
||||
│ ├── stores/ # State management
|
||||
│ ├── i18n/ # Internationalization
|
||||
│ └── toast/ # Toast notifications
|
||||
└── web/
|
||||
├── users/ # User management
|
||||
└── tasks/ # Task management
|
||||
```
|
||||
|
||||
These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.
|
||||
## Libraries Overview
|
||||
|
||||
[More about running tasks in the docs »](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
|
||||
### Shared Libraries
|
||||
|
||||
## Add new projects
|
||||
- **api**: HTTP services for backend communication
|
||||
- **stores**: State management utilities
|
||||
- **i18n**: Internationalization support
|
||||
- **toast**: Toast notification service
|
||||
|
||||
While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature.
|
||||
### Web Libraries
|
||||
|
||||
Use the plugin's generator to create new projects.
|
||||
- **users**: User management components and services
|
||||
- **tasks**: Task management functionality
|
||||
|
||||
To generate a new application, use:
|
||||
## Development Features
|
||||
|
||||
```sh
|
||||
npx nx g @nx/angular:app demo
|
||||
- **Angular 20**: Latest Angular features with signals
|
||||
- **Angular Material**: UI component library with Azure Blue theme
|
||||
- **Standalone Components**: Modern Angular architecture
|
||||
- **TypeScript**: Strict type checking enabled
|
||||
- **SCSS**: Styling with Sass preprocessing
|
||||
- **Jest**: Testing framework
|
||||
- **ESLint**: Code linting with Angular-specific rules
|
||||
|
||||
## Building and Deployment
|
||||
|
||||
### Development Build
|
||||
|
||||
```bash
|
||||
nx build org --configuration=development
|
||||
```
|
||||
|
||||
To generate a new library, use:
|
||||
### Production Build
|
||||
|
||||
```sh
|
||||
npx nx g @nx/angular:lib mylib
|
||||
```bash
|
||||
nx build org --configuration=production
|
||||
```
|
||||
|
||||
You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list <plugin-name>` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE.
|
||||
Built files will be in `dist/org/`
|
||||
|
||||
[Learn more about Nx plugins »](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry »](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
|
||||
## Testing
|
||||
|
||||
### Run All Tests
|
||||
|
||||
[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
|
||||
```bash
|
||||
nx test
|
||||
```
|
||||
|
||||
## Install Nx Console
|
||||
### Run Specific Library Tests
|
||||
|
||||
Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
|
||||
```bash
|
||||
nx test api
|
||||
nx test users
|
||||
nx test tasks
|
||||
```
|
||||
|
||||
[Install Nx Console »](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
|
||||
### Test Configuration
|
||||
|
||||
## Useful links
|
||||
- **Framework**: Jest with Angular preset
|
||||
- **Setup**: `jest-preset-angular`
|
||||
- **Coverage**: Available with `--coverage` flag
|
||||
|
||||
Learn more:
|
||||
## Linting
|
||||
|
||||
- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
|
||||
- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
|
||||
- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
|
||||
- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
|
||||
```bash
|
||||
# Lint all projects
|
||||
nx lint
|
||||
|
||||
And join the Nx community:
|
||||
- [Discord](https://go.nx.dev/community)
|
||||
- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl)
|
||||
- [Our Youtube channel](https://www.youtube.com/@nxdevtools)
|
||||
- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
|
||||
# Lint specific project
|
||||
nx lint org
|
||||
nx lint api
|
||||
```
|
||||
|
||||
## Code Generation
|
||||
|
||||
### Generate Component
|
||||
|
||||
```bash
|
||||
nx generate @nx/angular:component my-component --project=org
|
||||
```
|
||||
|
||||
### Generate Service
|
||||
|
||||
```bash
|
||||
nx generate @nx/angular:service my-service --project=org
|
||||
```
|
||||
|
||||
### Generate Library
|
||||
|
||||
```bash
|
||||
nx generate @nx/angular:library my-lib
|
||||
```
|
||||
|
||||
## Environment Configuration
|
||||
|
||||
Development and production environments are configured in:
|
||||
|
||||
- `src/environments/environment.ts` (development)
|
||||
- `src/environments/environment.prod.ts` (production)
|
||||
|
||||
## Styling
|
||||
|
||||
- **Theme**: Angular Material Azure Blue
|
||||
- **Global Styles**: `src/styles.scss`
|
||||
- **Component Styles**: Co-located with components
|
||||
- **Fonts**: Roboto (Google Fonts)
|
||||
- **Icons**: Material Icons
|
||||
|
||||
## State Management
|
||||
|
||||
The application uses Angular signals for state management:
|
||||
|
||||
- **Local State**: Component signals
|
||||
- **Shared State**: Injectable services with signals
|
||||
- **Derived State**: Computed signals
|
||||
|
||||
## API Integration
|
||||
|
||||
API services are located in `libs/shared/api/`:
|
||||
|
||||
- **Users Service**: User CRUD operations
|
||||
- **Tasks Service**: Task management
|
||||
- **Comments Service**: Comment functionality
|
||||
|
||||
Base API URL is configured to `http://localhost:3000`
|
||||
|
||||
## Browser Support
|
||||
|
||||
- Chrome (latest)
|
||||
- Firefox (latest)
|
||||
- Safari (latest)
|
||||
- Edge (latest)
|
||||
|
||||
## Performance
|
||||
|
||||
- **Bundle Analysis**: Use `nx build org --analyze`
|
||||
- **Lazy Loading**: Feature modules are lazy loaded
|
||||
- **OnPush**: Change detection strategy optimized
|
||||
- **Tree Shaking**: Unused code eliminated in production
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Clear Nx Cache
|
||||
|
||||
```bash
|
||||
nx reset
|
||||
```
|
||||
|
||||
### Reinstall Dependencies
|
||||
|
||||
```bash
|
||||
rm -rf node_modules package-lock.json
|
||||
npm install
|
||||
```
|
||||
|
||||
### Port Already in Use
|
||||
|
||||
Change the port in `project.json` serve configuration or use:
|
||||
|
||||
```bash
|
||||
nx serve org --port=4201
|
||||
```
|
||||
|
||||
### Build Errors
|
||||
|
||||
Check TypeScript configuration and ensure all dependencies are installed:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
nx build org
|
||||
```
|
||||
|
||||
@ -1,11 +1,94 @@
|
||||
To install dependencies:
|
||||
```sh
|
||||
bun install
|
||||
# Server Setup and Run Instructions
|
||||
|
||||
This is a Node.js server built with Hono framework, using SQLite database with Drizzle ORM.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Node.js (version 18 or higher)
|
||||
- npm or yarn package manager
|
||||
|
||||
## Initial Setup
|
||||
|
||||
### 1. Install Dependencies
|
||||
|
||||
```bash
|
||||
cd server
|
||||
npm install
|
||||
```
|
||||
|
||||
To run:
|
||||
```sh
|
||||
bun run dev
|
||||
### 2. Environment Configuration
|
||||
|
||||
The server uses a `.env` file for configuration. The current setup uses:
|
||||
|
||||
```bash
|
||||
DB_FILE_NAME=file:./src/db/local.db
|
||||
```
|
||||
|
||||
open http://localhost:3000
|
||||
This is already configured and will create a local SQLite database file.
|
||||
|
||||
### 3. Database Setup
|
||||
|
||||
#### Generate Database Schema
|
||||
|
||||
```bash
|
||||
npm run db:generate
|
||||
```
|
||||
|
||||
#### Push Schema to Database
|
||||
|
||||
```bash
|
||||
npm run db:push
|
||||
```
|
||||
|
||||
#### Seed Database with Sample Data
|
||||
|
||||
```bash
|
||||
npm run db:seed
|
||||
```
|
||||
|
||||
This will create sample users, tasks, and comments using faker.js.
|
||||
|
||||
## Available Scripts
|
||||
|
||||
- `npm run dev` - Start development server with hot reload
|
||||
- `npm run db:push` - Push schema changes to database
|
||||
- `npm run db:generate` - Generate database migrations
|
||||
- `npm run db:migrate` - Run database migrations
|
||||
- `npm run db:reset` - Reset database (careful - this will delete all data)
|
||||
- `npm run db:seed` - Seed database with sample data
|
||||
|
||||
## Running the Server
|
||||
|
||||
### Development Mode
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The server will start on `http://localhost:3000`
|
||||
|
||||
## API Endpoints
|
||||
|
||||
The server provides the following API routes:
|
||||
|
||||
- `/users` - User management endpoints
|
||||
- `/tasks` - Task management endpoints
|
||||
- `/comments` - Comment management endpoints
|
||||
|
||||
## Database
|
||||
|
||||
The server uses SQLite with Drizzle ORM. The database file is stored at `./src/db/local.db` and will be created automatically when you run the setup commands.
|
||||
|
||||
## Technology Stack
|
||||
|
||||
- **Framework**: Hono.js
|
||||
- **Database**: SQLite
|
||||
- **ORM**: Drizzle ORM
|
||||
- **Runtime**: Node.js
|
||||
- **Development**: tsx for TypeScript execution
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
1. **Database issues**: Run `npm run db:reset` and then `npm run db:push` followed by `npm run db:seed`
|
||||
2. **Port conflicts**: The server runs on port 3000 by default
|
||||
3. **Dependencies**: Make sure all dependencies are installed with `npm install`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user