Environment Setup & Configuration

Details the technical environment setup and configuration structures required to run and deploy the United Network frontend.

1. Dependencies

The project relies on the following system tools and libraries for initialization and runtime configuration:

• Node.js & NPM: Required for package management and running the Vite build server.
• Vite: The frontend build tool used to compile Vue 3 components and inject environment variables.

---

2. Data Structures

The application configuration is primarily driven by environment variables and internal configuration objects.

Environment Variables

Variable	Type	Description
UNITED_CARDS_KEY	String	Critical. The cryptographic key or API secret used for validating United Cards interactions. Must be kept secure.
UNITED_CARDS_IV_KEY	String	Critical. The initialization vector used for United Cards cryptographic operations. Must be kept secure.
ENVIRONMENT_NAME	String	Defines the runtime environment (e.g., production, development). Mapped to the global ENVIRONMENT constant.

---

3. Functions

The setup process is abstracted via Node targets which serve as the primary functions for environment management.

• npm install: Installs npm dependencies and performs initial project scaffolding.
• npm run dev: Bootstraps the local development environment, injecting available environment variables into the client bundle.

---

4. Implementation

The environment setup follows a shell-injection pattern:

1. Injection: Variables like UNITED_CARDS_KEY are exported in the shell session.
2. Build Process: When make dev or make build is executed, the build system (Vite) picks up these variables.
3. Runtime Access: The application accesses these values via import.meta.env or a dedicated config service, ensuring that sensitive keys are available for cryptographic operations without being hardcoded in the source.

---

5. Vite Configuration

The vite.config.js file defines the behavior of the local development server via the server object.

Server Options

• Port: 8080
  • The application runs on port 8080 by default.
• Host: true
  • The server listens on all local IP addresses (e.g., 0.0.0.0), making the application accessible over the local network.
• Watch Options:
  • usePolling: true: Enables polling for file changes. This is often necessary when running the application inside a Docker container or VM where file system events might not propagate reliably.
• Proxy:
  • /manifests: Proxies requests to https://united.network. This avoids CORS issues when fetching manifests from the production backend during local development.

For a comprehensive list of available configuration options, refer to the Vite Server Options Documentation.