NPM Scripts
Relevant source files
The following files were used as context for generating this wiki page:
The project utilizes NPM scripts defined in package.json to manage the application's development lifecycle. These scripts are built around the Vite toolkit, providing streamlined commands for running a development server, creating a production-ready build, and previewing the final output. The main entry point for the application is index.tsx, which mounts the main App component to a root element in index.html.
Sources: package.json:6-10, index.html:29, index.tsx:4-14
Scripts Overview
The scripts section in package.json defines the core commands for interacting with the project.
| Script | Command | Description |
|---|---|---|
dev | vite | Starts the Vite development server with Hot Module Replacement (HMR). |
build | vite build | Bundles the application into static files for production. |
preview | vite preview | Serves the production build locally to test it before deployment. |
Sources: package.json:6-10
Development (dev)
The dev script is the primary command used during development. Running npm run dev executes the vite command, which starts a local development server.
"scripts": {
"dev": "vite",
...
},
Sources: package.json:7
Server Configuration
The development server's behavior is configured in vite.config.ts. It is set to run on:
- Host:
0.0.0.0(accessible on the local network) - Port:
3000
Sources: vite.config.ts:6-10
Environment Variables
The Vite configuration also handles exposing environment variables to the client-side application. It loads a GEMINI_API_KEY from the environment and makes it available in the code via process.env.API_KEY and process.env.GEMINI_API_KEY. The README.md file specifies that this key should be set in a .env.local file.
// vite.config.ts
define: {
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
},
Sources: vite.config.ts:12-15, README.md:11
Development Workflow
The following diagram illustrates the process initiated by the npm run dev command.
This diagram shows the flow from a developer running the dev script to the Vite server starting and serving the application.
Sources: package.json:7, vite.config.ts:6-10, index.html:29, index.tsx:3
Production Build (build)
The build script is used to prepare the application for deployment. Running npm run build executes vite build, which compiles the TypeScript/React code and bundles it into optimized, static assets.
"scripts": {
...
"build": "vite build",
...
},
Sources: package.json:8
The build process is guided by both vite.config.ts for general bundling rules and plugins, and tsconfig.json for TypeScript compilation settings, such as the target ECMAScript version (ES2022) and JSX handling (react-jsx).
Build Process Flow
The diagram below outlines the steps involved in creating a production build.
This diagram shows how the build script uses Vite to process source files and generate a production-ready dist directory.
Sources: package.json:8, vite.config.ts, tsconfig.json
Preview (preview)
After a production build is created, the preview script can be used to test it locally. Running npm run preview executes vite preview, which starts a simple static file server to serve the contents of the build output directory (typically dist). This is useful for verifying that the production build works as expected before deploying it.
"scripts": {
...
"preview": "vite preview"
},
Sources: package.json:9