Configuration & Environment Variables
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Boda Cris application utilizes a multi-layered configuration strategy to manage application behavior, visual styling, and deployment environment settings. The configuration is primarily driven by a combination of static build-time settings, dynamic React Context providers, and platform-specific environment variables defined for the build process.
The system is designed to allow for extensive personalization of the wedding invitation, ranging from content management handled via ContentContext to visual theme adjustments managed through ThemeContext. This architecture ensures that the application remains highly configurable without requiring constant code changes.
Build and Deployment Configuration
The project uses Vite as its build tool and is configured for deployment on Netlify. The configuration spans across environment variables, build scripts, and server-side redirection rules.
Vite Configuration
The build tool is configured to run the development server on port 3000 and automatically open the browser. The build output is directed to the dist directory with sourcemaps enabled for debugging.
Sources: vite.config.js:5-14
Netlify Deployment Settings
The deployment configuration is managed via netlify.toml, which specifies the build command and environment-specific variables.
| Category | Option | Value / Description |
|---|---|---|
| Build | Command | npm run build |
| Build | Publish Directory | dist |
| Environment | NODE_VERSION | 20 |
| Redirects | SPA Routing | All paths /* redirect to /index.html with status 200 |
Sources: netlify.toml:4-16
Security and Performance Headers
The configuration includes specific HTTP headers to enhance security and leverage browser caching for static assets.
The diagram shows how Netlify headers are applied based on the requested resource type.
Sources: netlify.toml:19-47
Theme and Visual Configuration
The application implements a dynamic theme system using CSS Variables and Tailwind CSS. This allows for real-time updates to the UI without a full page reload.
Tailwind Configuration
Tailwind is configured to extend its default color palette and font families using CSS variables. These variables are dynamically injected into the :root element by the React context.
| Theme Property | Tailwind Key | CSS Variable Reference |
|---|---|---|
| Primary Color | theme-primary | var(--color-primary) |
| Text Color | theme-text | var(--color-text) |
| Font Heading | serif | var(--font-heading) |
| Border Radius | theme | var(--border-radius) |
Sources: tailwind.config.js:14-38
Theme Context Defaults
The ThemeContext manages the state of the visual configuration, persisting selections to localStorage under the key weddingTheme.
:root {
--color-primary: #D4AF37;
--color-secondary: #FFF8E7;
--font-heading: 'Playfair Display', Georgia, serif;
--border-radius: 1rem;
--animation-duration: 500ms;
}
Sources: src/index.css:5-17, src/context/ThemeContext.jsx:167-170
Content Configuration
The invitation's content is managed through a centralized state stored in ContentContext. This system handles the initialization of data from a default template and manages updates via an administrative interface.
Data Flow for Content Management
The following sequence shows how content configuration is initialized and updated within the application.
The diagram illustrates the priority of localStorage over the default static configuration and the persistence loop.
Sources: src/context/ContentContext.jsx:7-40
Default Content Schema
The application relies on a structured object defined in defaultContent.js to populate the initial state. Key configuration sections include:
- Hero: Names of the couple, wedding date, and background images.
- Events: An array of event objects containing titles, times, and venues.
- Location: Venue name, address, and geographical coordinates (lat/lng).
- Gifts: Bank account details and gift registry messages.
Sources: src/data/defaultContent.js, src/context/ContentContext.jsx:45-120
Conclusion
Configuration in the Boda Cris project is divided between static build-time directives (Vite, Tailwind, Netlify) and dynamic runtime state (Theme and Content Contexts). This hybrid approach provides developers with a stable deployment environment while offering end-users the flexibility to customize the invitation's appearance and data through the administrative dashboard, with all changes being persisted locally.
Sources: netlify.toml:4, src/context/ThemeContext.jsx:189, src/context/ContentContext.jsx:40