Installation & Development Setup
Relevant source files
The following files were used as context for generating this wiki page:
This page provides the necessary documentation to set up the development environment, install dependencies, and deploy the boda-cris wedding invitation application. The project is built using React and Vite, utilizing Tailwind CSS for styling and Netlify for hosting and continuous deployment.
Sources: package.json:1-10, vite.config.js:1-12, netlify.toml:1-10
Environment Requirements
The project requires a modern Node.js environment. The build configuration explicitly specifies the use of Node.js version 20 for consistent environments across development and production.
Sources: netlify.toml:11-12
Core Tech Stack
The following table summarizes the primary technologies used in the project:
| Category | Technology | Description |
|---|---|---|
| Framework | React 18.3.1 | Core UI library |
| Build Tool | Vite 6.0.0 | Frontend tooling and development server |
| Styling | Tailwind CSS 3.4.0 | Utility-first CSS framework |
| Routing | React Router DOM 7.0.0 | Client-side routing management |
| Deployment | Netlify | Static site hosting and CI/CD |
Sources: package.json:11-25, netlify.toml:4-10
Local Development Setup
To begin development, ensure you have Node.js and npm installed. The workflow involves installing dependencies and starting the Vite development server.
1. Installation
Install the project dependencies using the following command:
npm install
Sources: package.json:7-10
2. Development Scripts
The project provides several scripts for various stages of the development lifecycle:
| Script | Command | Purpose |
|---|---|---|
dev | vite | Starts the local development server on port 3000 |
build | vite build | Compiles the production-ready assets to the /dist directory |
preview | vite preview | Locally previews the production build |
lint | eslint . | Runs static code analysis to ensure code quality |
Sources: package.json:7-11, vite.config.js:6-9
3. Build Tooling Architecture
The development environment is orchestrated by Vite, which handles React transformations and asset management. The following diagram illustrates the local development flow:
The development server is configured to open the browser automatically upon startup and listens on port 3000.
Sources: vite.config.js:5-13, package.json:7-8
Configuration
Vite Configuration
The vite.config.js file configures the React plugin and the development server settings. It ensures that source maps are generated for production builds to facilitate debugging.
Sources: vite.config.js:4-13
Tailwind CSS Configuration
Styling is managed via tailwind.config.js, which defines the design system, including custom themes (Cream, Gold) and dynamic theme variables mapping to CSS variables managed in the ThemeContext.
Sources: tailwind.config.js:4-25
Deployment & Production Setup
The application is designed for deployment on Netlify. The netlify.toml file contains the build configuration and security headers necessary for production.
Deployment Flow
Sources: netlify.toml:4-10, package.json:8
Build & Routing
- Command:
npm run build - Publish Directory:
dist - SPA Redirects: As a Single Page Application (SPA), all routes are redirected to
index.htmlwith a status code of 200 to allow client-side routing.
Sources: netlify.toml:5-17
Security Headers
The production environment enforces several security headers:
X-Frame-Options: DENY(Prevents clickjacking)X-XSS-Protection: 1; mode=blockX-Content-Type-Options: nosniffReferrer-Policy: strict-origin-when-cross-origin
Sources: netlify.toml:21-26
Conclusion
The boda-cris project setup is streamlined using Vite and React, offering a modern development experience with high-performance production outputs. By adhering to the defined scripts and configuration in package.json and netlify.toml, developers can maintain a consistent environment from local development to production deployment.