Developer guide

In this guide, you'll learn to set up your GitHub customer repository and understand the repository structure.

Developing for business users

In commercetools Frontend, you develop components and extensions which business users use to build pages. Some ideas to help adapt to commercetools Frontend:

  • Developers create Frontend components and extensions
  • Business users build pages using components and data sources available in the studio
  • Every data-dependent component should use a data source extension because developers don't control where the component will be used

Setup the repository locally

Once you get access to your GitHub repository, clone it on your local system.

A default customer project has a directory structure as shown below:

├── <customer-name>
│   └── automation
├── <customer-name>-<project-name>
│   ├── bin
│   ├── config
│   ├── public
│   └── templates
├── paas
│   ├── automation
│   ├── integration
│   └── replicator
└── packages
└── <project-name>

The repository contains 4 folders, of which developers should only edit the packages folder.

You can add custom variables to your project configuration with custom variables in <customer-name>_<project-name>/config/project.yml.

The packages folder contains all your projects. Each project folder has a directory structure as shown below:

├── backend
│   └── contains the extensions
├── frontend
│   └── contains the components
└── types
└── contains the type definitions

The backend folder contains the examples from documentation and the following:

index.tsCode for all data sources, actions, and the dynamic-page-handler
commercetools/Code for commercetools extension
webpack/Webpack configuration for all environments
schemas/Data source and dynamic page schemas

The frontend folder contains the following:

components/commercetools-ui library
frontastic/Contains the following folders: tastics/, lib/,provider/, actions/
frontastic/tastics/Components used in the studio
frontastic/lib/Helper functions
frontastic/provider/React Context provider
frontastic/actionsAction handlers on the frontend
helpers/Helper functions and React hooks
pages/Next.js pages folder
styles/Custom stylesheets
public/Public assets like icons and images

The types folder contains the TypeScript type definitions used in the project.

Further reading