Template Developers: 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

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.