Build & Deployment

Relevant source files

The following files were used as context for generating this wiki page:

• vite.config.ts
• package.json
• AGENTS.md
• tsconfig.app.json
• tsconfig.node.json
• tsconfig.json

The build and deployment system for the Wasalny landing page is centered around Vite 7 and TypeScript. It utilizes a modern frontend toolchain to compile React 19 code, process Tailwind CSS v4, and bundle assets for production. The architecture is designed to ensure type safety through strict TypeScript configurations and high performance through Vite's optimized bundling process.

This system handles the transformation of source code located in the src/ directory into a deployable static site. It includes processes for development HMR (Hot Module Replacement), linting via ESLint, and production-ready builds that involve type checking followed by minification.

Sources: AGENTS.md:7-14, package.json:5-10

Build Pipeline Architecture

The project employs a two-stage build process for production. It first performs a project-wide type check using the TypeScript compiler (tsc) before invoking the Vite build command. This ensures that no type errors exist in the codebase before assets are generated.

Lifecycle Scripts

The following table outlines the primary commands used to manage the lifecycle of the application:

Command	Action	Description
npm run dev	vite	Starts the Vite development server with HMR.
npm run build	tsc -b && vite build	Runs TypeScript build (references) and Vite production bundler.
npm run lint	eslint .	Executes ESLint across the project for code quality.
npm run preview	vite preview	Locally serves the generated production build for testing.

Sources: package.json:6-9, AGENTS.md:18-29

Build Flow Diagram

The following diagram illustrates the transition from development source code to a production-ready distribution.

The diagram shows the sequential steps from source code through linting and type checking, ending with the production assets in the dist/ directory.
Sources: package.json:6-9, vite.config.ts:7-8

Compiler Configurations

The project uses a split TypeScript configuration to handle different execution environments (the application code vs. the build tool configuration).

TypeScript Environment Segregation

The configuration is managed through a base file that references specific environment configs:

• tsconfig.app.json: Targets the browser environment (ES2022, DOM). It includes strict linting rules such as noUnusedLocals and noUncheckedSideEffectImports.
• tsconfig.node.json: Targets the Node.js environment for build tools like Vite (ES2023).

Sources: tsconfig.json:1-7, tsconfig.app.json:4-22, tsconfig.node.json:4-15

Path Aliasing

To simplify imports and avoid deeply nested relative paths, the build system defines path aliases in both the TypeScript configuration and the Vite resolver.

Alias	Target Path	Usage Example
@/*	src/*	import { Button } from '@/components/ui/Button'
@assets/*	assets/*	import logo from '@assets/logo.svg'

Sources: tsconfig.app.json:30-34, vite.config.ts:10-12, AGENTS.md:52-60

Vite Asset Pipeline

Vite is configured to handle React components and CSS processing through a plugin architecture.

Build Tooling Configuration

The configuration integrates React support and the Tailwind CSS v4 engine directly into the Vite pipeline.

// vite.config.ts
export default defineConfig({
  plugins: [
    react(), 
    tailwindcss()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

Sources: vite.config.ts:7-14

Dependencies & Tech Stack

The build relies on several key production and development dependencies to manage the UI and animations:

• Production: React 19, GSAP (Animations), Lenis (Smooth Scroll), and Lucide-React (Icons).
• Development: Vite 7, TypeScript 5.9, PostCSS, and Autoprefixer.

Sources: package.json:11-34, AGENTS.md:33-41

Production Deployment Readiness

While the repository does not contain a specific CI/CD provider configuration (e.g., GitHub Actions), the AGENTS.md file specifies that the output of npm run build is the standard for production deployment.

Bundle Characteristics

1. Type Safety: The tsc -b flag ensures that composite project references are respected during the build.
2. Target: The build targets ES2022 for the application, ensuring compatibility with modern browsers while utilizing newer JavaScript features.
3. Optimization: Vite performs tree-shaking and minification on the React 19 code and GSAP libraries.

Sources: package.json:7, tsconfig.app.json:5, AGENTS.md:22-24

Summary

The "Build & Deployment" system for Wasalny utilizes a strict TypeScript-first approach combined with Vite's high-speed bundling. By segregating Node and App configurations and enforcing a "check-then-build" workflow, the project ensures that production-ready assets are technically sound and optimized for performance in the Damietta transportation service's landing page.