Documentation

Developing with commercetools Frontend

Elevate, May 20-22-2025, Miami Beach, Florida

Learn how to set up your project for development.

Prerequisites

The following should be installed locally:

To set up your project and get started with development, follow these steps:

  1. Install the CLI.
  2. Get your API token from the Studio.
  3. Set up your project locally.

Install the CLI

The CLI is our command-line interface that you can use for development. To learn more about it, see CLI.

To install the latest version of the CLI, open a command-line tool and run one of the following commands based on your operating system.

  • For macOS and Linux, run the following command:

    Install frontastic-cli on macOS and Linuxshell
    brew tap frontasticgmbh/tap && brew install frontastic-cli

  • For Windows, run the following commands:

    Add scoop bucket on Windowsshell
    scoop bucket add FrontasticGmbH_scoop-bucket https://github.com/FrontasticGmbH/scoop-bucket
    Install frontastic-cli on Windowsshell
    scoop install frontastic-cli

Get your API token from the Studio

To get your API token from the Studio, follow these steps:

  1. From the Studio homepage, click the Account icon, then select Profile: the User settings dialog opens.
  2. Copy the value in the API token field and close the dialog.
  3. Save the copied value for later use.

Set up your project locally

To set up your project locally, follow these steps:

  1. Clone the GitHub repository of your commercetools Frontend project on your computer.
  2. Open a command-line tool and move to the root directory of your repository.
  3. To initialize your project, run frontastic init in your command-line tool: you'll be prompted to enter the Studio user API token.
  4. Enter the API token you copied from the Studio.
  5. To install the necessary dependencies, run frontastic install in your command-line tool.
  6. To start your commercetools Frontend project, run frontastic run in your command-line tool. Once it has finished, you can preview your website by opening http://localhost:3000 in a web browser.

Start the development

You can now start developing your project in your favorite IDE. Get started with the following guides to: