Description
We need to initialize the cco-frontend React application. This Single Page Application (SPA) will provide the user interface for manual editing and visualization of CCOs. A critical requirement is that the frontend must be configurable at runtime (via environment variables) to support rebranding by different hosts.
Context
This application will be deployed by various organizations (e.g., a specific journal or repository). They need to be able to change the "App Title," "Logo URL," and active adapters without rebuilding the code.
Requirements
- Framework: Initialize a new React project (recommend using Vite for speed, or Create React App).
- Configuration: Implement a mechanism to load runtime configuration (Title, Branding Colors, Active Adapters) from environment variables or a
config.json generated at container startup.
- Basic Layout: Create a simple landing page that displays the configured "App Title" to prove the configuration loading works.
Technical Scope (Suggested)
- Note on Config: Since React builds to static HTML/JS, you cannot read
process.env at runtime in the browser. You typically need a startup script in the Docker container that writes environment variables to a window._env_ object or a config.js file that the React app loads.
- Use a UI component library (like Material UI or Tailwind) to speed up development, but keep it lightweight.
Acceptance Criteria
References
Description
We need to initialize the
cco-frontendReact application. This Single Page Application (SPA) will provide the user interface for manual editing and visualization of CCOs. A critical requirement is that the frontend must be configurable at runtime (via environment variables) to support rebranding by different hosts.Context
This application will be deployed by various organizations (e.g., a specific journal or repository). They need to be able to change the "App Title," "Logo URL," and active adapters without rebuilding the code.
Requirements
config.jsongenerated at container startup.Technical Scope (Suggested)
process.envat runtime in the browser. You typically need a startup script in the Docker container that writes environment variables to awindow._env_object or aconfig.jsfile that the React app loads.Acceptance Criteria
References