Developer guide
In this guide, you'll learn to set up your Frontastic GitHub customer repository and understand the repository structure.
Developing for business users
In Frontastic, you develop components and extensions which business users use to build pages. Some ideas to help adapt to Frontastic:
- Developers create Frontastic 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:
| File/folder | Contents |
|---|---|
index.ts | Code 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:
| File/folder | Contents |
|---|---|
components/ | commercetools-ui library |
frontastic/ | Contains the following folders: tastics/, lib/,provider/, actions/ |
frontastic/tastics/ | Components used in the studio |
frontastic/lib/ | Frontastic-specific helper functions |
frontastic/provider/ | React Context provider |
frontastic/actions | Action 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
Updated about 2 months ago