Documentation / Development
The project provides a development environment using React and Apollo to render an application called Spark. The application heavily relies on common React libraries for various capabilities including routing and display.
The application provides a set of foundational libraries to interact with the CoreMedia Headless Service that can be used as the basis for creating and managing your custom app and allow web developers to focus on customizing and replacing the display and view aspects of the app.
This Workspace uses vite as tooling since version 2210.
The project can be loaded on any environment supporting Node.js development. We recommend:
This project uses data from a CoreMedia Headless Stitching server. It will also use the stitching server as a proxy for images and blobs.
Please remember to start the Stitching Server and keep it running for the app.
To complete the setup, run the following commands from the project directory once.
pnpm install
pnpm build
You need to build the workspace once before you can start it. The build script builds the necessary packages, and generates the type definitions for the GraphQL queries.
Run pnpm start and open http://localhost:5173 to view
the app in a browser. It will run in Preview Mode by default with Loglevel “info”
(and Loglevel “warn” in production mode).
The page will reload if you make edits.
You will also see any lint errors in the console.
To change the log level set an environment variable VITE_LOGLEVEL to the given level. See https://github.com/pimterry/loglevel#logging-methods
In the project directory apps/spark, you can run the following commands:
pnpm startRuns the app in the development mode.
Open http://localhost:5173 to view it in the browser.
pnpm downloadApollo downloads and generates all required resources like schema, metadata and
type definitions and saves them to the __downloaded__ folder.
If no Headless Server is defined for VITE_API_ENDPOINT, the script will
skip the download.
pnpm buildBuilds the app for production to the dist folder.
pnpm lintRuns just the Typescript linting and formatting (based on eslint and prettier) on the repository.
pnpm run docsGenerates TypeDoc documentation and places it into /docs.
Using IntelliJ Idea with the JS GraphQL Plugin enables Code Completion for the
GraphQL Queries out of the box. Configure the corresponding values like url in the file graphql.config.yml if changes are needed.