Introduction

Build and maintain the front-end templates that render erxes websites. A template provides the site's layout, reusable sections, page presentation, and the mapping between CMS content and components.

What the product defines, and what it does not

The product repository erxes/erxes contains the Content API/UI projects (content_api, content_ui) and a Next.js starter at apps/client-portal-template. The rendered website templates live in separate repositories: the Web Builder boilerplates such as erxes-web-templates/ecommerce-boilerplate and erxes-web-templates/tour-boilerplate, and the pages-web/web-builder workspace.

The product side still defines what passes between them:

  • The Page schema exposes pageItems, where each item has name, type, content, order, objectType, objectId, and a JSON config. The template decides how those fields map to React components.
  • The Web Builder deployer clones github.com/erxes-web-templates/<templateId> and writes the files the template reads: data/configs.json, data/pages/<slug>.json, app/favicon.ico, and a next.config.ts carrying the erxes environment variables. Paths such as app/_components/sections and helpers such as renderSections are boilerplate conventions, so check them in the template revision you use.

Choose the right track

  • Use CMS + Next.js to connect a website to the product's GraphQL API, including credentials and queries.
  • Use this track to implement the presentation of an existing template or work within your team's Web Builder integration.
  • Use Create a Plugin to extend the product's backend or main frontend. A website template is not a Module Federation plugin.

Work within the agreed scope

UI-only scope

For a UI-only assignment, update markup, styles, responsive behavior, and presentation states inside existing components. Preserve routes, section identifiers, configuration shapes, data loading, and authentication. Do not touch the data layer: GraphQL documents, portal tokens, or the pageItems fields.

Adding a section, route, configuration field, or backend behavior is a separate change. Agree the scope with the owning team first.

Follow the workflow

  1. Installation: get the repositories and run the setup.
  2. Development Guide: plan, implement, and check the change.
  3. Template Structure: trace content from its source to the rendered component.
  4. Template Layout: maintain shared navigation, branding, and page structure.
  5. Template Sections: keep section data shapes intact and handle dynamic content.
  6. Template Pages: check routes and complete user flows.

Coordinate field and state requirements with the designer guides before implementation.

Operate on one system.

Talk to our team about consolidating your stack onto erxes. 30-minute walkthrough, custom to your org.