2. Quick Start

A consistent page design is essential for a professional website. Apart from the HTML structure reflected by the templates, the layout is mainly controlled by web resources, like CSS, JavaScript and templates. CoreMedia uses themes to bundle these files.

Bricks are reusable frontend modules for your theme. Mostly, they include templates, some styles and JavaScript functions.

Developing and using themes, has some conflicting interests. On the one hand, changes of web resources should be immediately effective on your site, so they must be integrated into the caching and invalidation mechanisms of CoreMedia CMS and thus be maintained in the content repository. On the other hand, frontend developers want to work with their favorite familiar tools and have short round-trips to test their changes.

In order to resolve this conflict, CoreMedia offers the Frontend Development Workflow. Here, changes at the local web resources are automatically visible in the preview CAE. Only when a theme is finished, it will be imported into the repository and can be published.

The following sections give a short introduction to get started:

Quick Overview

Use the following code snippet to get started quickly, if you are familiar with pnpm and modern web development. You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

  cd <frontend-workspace>
  pnpm install

  pnpm run create-theme <name>

  pnpm install

  cd themes/<name>-theme
  pnpm run deploy
  pnpm start
  

Note

Please note, that you will need to type in the Studio URL to your development system and a valid login when running pnpm start or pnpm run deploy for the first time. In addition to this, the user, used to login, must be member of a developer group and therefore have developer rights in Studio.

To create a minified bundle of the theme, run pnpm build.

For CI/CD purposes, there is also a way using Docker to build the themes. It is described in the <file>frontend/README.adoc</file>.

For a deep dive into details of our concepts and APIs, read the following chapters Chapter 3, Web Development Workflow, Chapter 4, Workspace Concept and Chapter 6, Reference.