logo
0
0
WeChat Login

Full Stack Application

A modern full-stack application built with Vue 3 frontend and Nest.js backend, managed with pnpm workspace.

Project Structure

full-stack-workspace/ ├── apps/ │ ├── frontend/ # Vue 3 + TypeScript + Element Plus │ └── backend/ # Nest.js + TypeScript + Express ├── packages/ # Shared packages (if any) ├── pnpm-workspace.yaml # pnpm workspace configuration └── package.json # Root package.json

Technologies Used

Frontend

  • Vue 3 with Composition API
  • TypeScript
  • Element Plus UI Framework
  • Vite Build Tool
  • Pinia State Management
  • Vue Router
  • Axios for HTTP requests

Backend

  • Nest.js Framework
  • TypeScript
  • Express.js
  • Swagger/OpenAPI Documentation
  • JWT Authentication (configured)
  • TypeORM (configured)
  • Class Validator

Getting Started

Prerequisites

  • Node.js (>=18.0.0)
  • pnpm (>=8.0.0)

Installation

  1. Clone the repository and navigate to the project directory:
cd /workspace
  1. Install dependencies for all packages:
pnpm install
  1. Set up environment variables:
    • Copy .env.example to .env in the backend directory
    • Modify environment variables as needed

Development

Start both frontend and backend in development mode:

pnpm dev

Or start them individually:

Frontend (Vue 3):

cd apps/frontend pnpm dev

The frontend will be available at http://localhost:3000

Backend (Nest.js):

cd apps/backend pnpm dev

The backend will be available at http://localhost:3001 API documentation available at http://localhost:3001/api

Building for Production

Build all applications:

pnpm build

Build individual applications:

cd apps/frontend pnpm build cd apps/backend pnpm build

Running Tests

Run tests for all packages:

pnpm test

Linting and Formatting

Run linting for all packages:

pnpm lint

Run formatting for all packages:

pnpm format

API Documentation

The backend provides Swagger/OpenAPI documentation available at:

Environment Variables

Frontend (.env.development)

VITE_API_BASE_URL=http://localhost:3001

Backend (.env)

NODE_ENV=development PORT=3001 FRONTEND_URL=http://localhost:3000 DB_HOST=localhost DB_PORT=3306 DB_USERNAME=root DB_PASSWORD=password DB_DATABASE=fullstack_app JWT_SECRET=your-super-secret-jwt-key-change-this-in-production

Features

  • ✅ Modern TypeScript development
  • ✅ Hot reload for development
  • ✅ API documentation with Swagger
  • ✅ Responsive design with Element Plus
  • ✅ CORS enabled
  • ✅ Environment configuration
  • ✅ JWT authentication setup
  • ✅ Database integration ready (TypeORM)
  • ✅ Validation and transformation
  • ✅ Monorepo structure with pnpm workspace

Available Scripts

Root Level

  • pnpm dev - Start both frontend and backend in development mode
  • pnpm build - Build all applications
  • pnpm test - Run tests for all packages
  • pnpm lint - Run linting for all packages
  • pnpm format - Run formatting for all packages

Frontend (apps/frontend)

  • pnpm dev - Start development server
  • pnpm build - Build for production
  • pnpm preview - Preview production build

Backend (apps/backend)

  • pnpm dev - Start development server with hot reload
  • pnpm build - Build for production
  • pnpm start - Start production server
  • pnpm test - Run tests

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Run tests and linting
  5. Submit a pull request

License

This project is licensed under the MIT License.

About

No description, topics, or website provided.
Language
TypeScript65.9%
Markdown21.3%
Vue5.2%
Shell3.4%
Others4.2%