Skip to content

[cco-frontend] Initialize React SPA & Configuration Loader #6

@clnsmth

Description

@clnsmth

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

  • React app runs locally and via Docker.
  • The application title/branding changes when the environment variables are updated and the container is restarted.
  • Basic project structure (components, pages, services) is established.

References

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions