/ppakpoomm/AI-for-Thai-EMS

Wiki directory

Browse AI-generated documentation for any repository.

Building for Production

Relevant source files

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

This document outlines the process for building the AI for Thai EMS front-end application for a production environment. The project is a modern web application built using React, TypeScript, and the Vite build tool. The production build process compiles the source code into optimized, static HTML, JavaScript, and CSS files that can be deployed to a web server.

The core of the build system is Vite, which is configured via vite.config.ts. The process is managed through npm scripts defined in package.json. A critical part of the build is the handling of environment variables, specifically the GEMINI_API_KEY, which is required for the application to communicate with the Google Gemini API.

Build Tooling and Dependencies

The project relies on several key technologies and dependencies to facilitate the development and build process. These are defined in package.json and configured through files like vite.config.ts and tsconfig.json.

Sources: package.json, vite.config.ts, tsconfig.json

Core Technologies

Node.js: The runtime environment required to install dependencies and run build scripts.
- Sources: README.md:11
Vite: A high-performance build tool that bundles the application's code for production. It uses @vitejs/plugin-react to handle React-specific transformations.
- Sources: package.json:8,19, vite.config.ts:3,10
TypeScript: The primary programming language, providing static typing over JavaScript. The build process compiles TypeScript (.ts, .tsx) into standard JavaScript.
- Sources: package.json:18, tsconfig.json
React: The JavaScript library used for building the user interface.
- Sources: package.json:13, index.tsx:2-3

Project Dependencies

The project's dependencies are split into two categories in package.json.

Type	Package	Version	Description
Dependencies	`@google/genai`	`^1.28.0`	Google GenAI client library for interacting with the Gemini API.
	`react`	`^19.2.0`	The core React library.
	`react-dom`	`^19.2.0`	Provides DOM-specific methods for React.
DevDependencies	`@types/node`	`^22.14.0`	Type definitions for Node.js.
	`@vitejs/plugin-react`	`^5.0.0`	The official Vite plugin for React projects.
	`typescript`	`~5.8.2`	The TypeScript compiler and language service.
	`vite`	`^6.2.0`	The development and build tool.

Sources: package.json:11-20

The Build Process

The production build is initiated by a single command, which triggers a series of steps orchestrated by Vite to create an optimized version of the application.

Build Command

The build process is started by running the build script defined in package.json.

npm run build

This command executes vite build.

Sources: package.json:8

Build Flow

The vite build command performs the following actions:

Reads the entry point of the application, which is index.html.
Follows the script tag <script type="module" src="/index.tsx"></script> to find the main React application code.
Uses the @vitejs/plugin-react plugin to transform JSX and React-specific syntax.
Compiles all TypeScript (.ts, .tsx) files into JavaScript, respecting the rules in tsconfig.json.
Bundles all JavaScript modules, CSS files, and other assets into a few optimized, minified files.
Injects the GEMINI_API_KEY environment variable into the code.
Generates a final dist directory (Vite's default output) containing the static files ready for deployment.

This diagram illustrates the high-level flow of the production build.

Generating architecture diagram...

Sources: package.json:8, vite.config.ts, index.html:35

Configuration

The build process is controlled by several configuration files that define how the code is compiled, bundled, and how environment variables are handled.

Vite Configuration (`vite.config.ts`)

This file is the main configuration for Vite. It defines plugins, server behavior, and how environment variables are exposed to the application.

Option	Value/Description
`plugins`	`[react()]`: Enables the React plugin for JSX transformation and Fast Refresh.
`define`	`{'process.env.API_KEY': ...}`: Injects the `GEMINI_API_KEY` from the environment into the application's code.
`resolve`	`alias: {'@': ...}`: Sets up a path alias so `@/` maps to the project root directory.

Sources: vite.config.ts:9-18

TypeScript Configuration (`tsconfig.json`)

This file configures the TypeScript compiler (tsc), which Vite uses under the hood.

Option	Value	Description
`target`	`ES2022`	Specifies the target ECMAScript version for the compiled JavaScript.
`module`	`ESNext`	Specifies the module system for the output code.
`jsx`	`react-jsx`	Configures how JSX is transformed.
`moduleResolution`	`bundler`	Tells TypeScript to use a modern module resolution strategy suited for bundlers like Vite.
`paths`	`{"@/": ["./"]}`	Complements the Vite alias for TypeScript's path resolution.
`noEmit`	`true`	Prevents `tsc` from generating output files itself; Vite handles this.

Sources: tsconfig.json:2-22

Environment Variables

The application requires a GEMINI_API_KEY to function. This key is loaded from the environment during the build process and securely injected into the client-side code.

Sources: README.md:14, vite.config.ts:5,12-13, services/geminiService.ts:4

Loading Mechanism

When vite build is run, vite.config.ts uses loadEnv(mode, '.', '') to load environment variables from a .env file in the project root.
The value of GEMINI_API_KEY is retrieved from the loaded environment variables.
The define configuration option replaces all occurrences of process.env.GEMINI_API_KEY in the source code with the actual key value as a string.
The application code, such as in geminiService.ts, can then access this key via process.env.API_KEY.

The following sequence diagram shows how the API key is loaded and made available to the application.

Generating architecture diagram...

Sources: vite.config.ts:5,12-14, services/geminiService.ts:4

Deployment and Preview

After a successful build, the contents of the dist/ directory (the default output directory for Vite) are ready for deployment. These are static files that can be served by any static file server or hosting service.

The README.md provides instructions for running the application locally for development, but the build output is intended for a production web server.

Sources: README.md:11-17

Previewing the Production Build

To test the production build locally before deploying, you can use the preview script.

npm run preview

This command executes vite preview, which starts a simple local web server to serve the files from the dist/ directory. This helps verify that the build was successful and the application runs as expected in its optimized form.

Sources: package.json:9

Building for Production

Relevant source files

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

Build Tooling and Dependencies

Sources: package.json, vite.config.ts, tsconfig.json

Core Technologies

Node.js: The runtime environment required to install dependencies and run build scripts.
- Sources: README.md:11
Vite: A high-performance build tool that bundles the application's code for production. It uses @vitejs/plugin-react to handle React-specific transformations.
- Sources: package.json:8,19, vite.config.ts:3,10
TypeScript: The primary programming language, providing static typing over JavaScript. The build process compiles TypeScript (.ts, .tsx) into standard JavaScript.
- Sources: package.json:18, tsconfig.json
React: The JavaScript library used for building the user interface.
- Sources: package.json:13, index.tsx:2-3

Project Dependencies

The project's dependencies are split into two categories in package.json.

Type	Package	Version	Description
Dependencies	`@google/genai`	`^1.28.0`	Google GenAI client library for interacting with the Gemini API.
	`react`	`^19.2.0`	The core React library.
	`react-dom`	`^19.2.0`	Provides DOM-specific methods for React.
DevDependencies	`@types/node`	`^22.14.0`	Type definitions for Node.js.
	`@vitejs/plugin-react`	`^5.0.0`	The official Vite plugin for React projects.
	`typescript`	`~5.8.2`	The TypeScript compiler and language service.
	`vite`	`^6.2.0`	The development and build tool.

Sources: package.json:11-20

The Build Process

The production build is initiated by a single command, which triggers a series of steps orchestrated by Vite to create an optimized version of the application.

Build Command

The build process is started by running the build script defined in package.json.

npm run build

This command executes vite build.

Sources: package.json:8

Build Flow

The vite build command performs the following actions:

Reads the entry point of the application, which is index.html.
Follows the script tag <script type="module" src="/index.tsx"></script> to find the main React application code.
Uses the @vitejs/plugin-react plugin to transform JSX and React-specific syntax.
Compiles all TypeScript (.ts, .tsx) files into JavaScript, respecting the rules in tsconfig.json.
Bundles all JavaScript modules, CSS files, and other assets into a few optimized, minified files.
Injects the GEMINI_API_KEY environment variable into the code.
Generates a final dist directory (Vite's default output) containing the static files ready for deployment.

This diagram illustrates the high-level flow of the production build.

Generating architecture diagram...

Sources: package.json:8, vite.config.ts, index.html:35

Configuration

The build process is controlled by several configuration files that define how the code is compiled, bundled, and how environment variables are handled.

Vite Configuration (`vite.config.ts`)

This file is the main configuration for Vite. It defines plugins, server behavior, and how environment variables are exposed to the application.

Option	Value/Description
`plugins`	`[react()]`: Enables the React plugin for JSX transformation and Fast Refresh.
`define`	`{'process.env.API_KEY': ...}`: Injects the `GEMINI_API_KEY` from the environment into the application's code.
`resolve`	`alias: {'@': ...}`: Sets up a path alias so `@/` maps to the project root directory.

Sources: vite.config.ts:9-18

TypeScript Configuration (`tsconfig.json`)

This file configures the TypeScript compiler (tsc), which Vite uses under the hood.

Option	Value	Description
`target`	`ES2022`	Specifies the target ECMAScript version for the compiled JavaScript.
`module`	`ESNext`	Specifies the module system for the output code.
`jsx`	`react-jsx`	Configures how JSX is transformed.
`moduleResolution`	`bundler`	Tells TypeScript to use a modern module resolution strategy suited for bundlers like Vite.
`paths`	`{"@/": ["./"]}`	Complements the Vite alias for TypeScript's path resolution.
`noEmit`	`true`	Prevents `tsc` from generating output files itself; Vite handles this.

Sources: tsconfig.json:2-22

Environment Variables

The application requires a GEMINI_API_KEY to function. This key is loaded from the environment during the build process and securely injected into the client-side code.

Sources: README.md:14, vite.config.ts:5,12-13, services/geminiService.ts:4

Loading Mechanism

When vite build is run, vite.config.ts uses loadEnv(mode, '.', '') to load environment variables from a .env file in the project root.
The value of GEMINI_API_KEY is retrieved from the loaded environment variables.
The define configuration option replaces all occurrences of process.env.GEMINI_API_KEY in the source code with the actual key value as a string.
The application code, such as in geminiService.ts, can then access this key via process.env.API_KEY.

The following sequence diagram shows how the API key is loaded and made available to the application.

Generating architecture diagram...

Sources: vite.config.ts:5,12-14, services/geminiService.ts:4

Deployment and Preview

The README.md provides instructions for running the application locally for development, but the build output is intended for a production web server.

Sources: README.md:11-17

Previewing the Production Build

To test the production build locally before deploying, you can use the preview script.

npm run preview

Sources: package.json:9

Building for Production

Build Tooling and Dependencies

Core Technologies

Project Dependencies

The Build Process

Build Command

Build Flow

Configuration

Vite Configuration (vite.config.ts)

TypeScript Configuration (tsconfig.json)

Environment Variables

Loading Mechanism

Deployment and Preview

Previewing the Production Build

Building for Production

Build Tooling and Dependencies

Core Technologies

Project Dependencies

The Build Process

Build Command

Build Flow

Configuration

Vite Configuration (vite.config.ts)

TypeScript Configuration (tsconfig.json)

Environment Variables

Loading Mechanism

Deployment and Preview

Previewing the Production Build

Vite Configuration (`vite.config.ts`)

TypeScript Configuration (`tsconfig.json`)

Vite Configuration (`vite.config.ts`)

TypeScript Configuration (`tsconfig.json`)