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/folderContents
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:

File/folderContents
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/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


Did this page help you?