Developing with commercetools Frontend

In this guide, you'll learn about the developer tooling and set up your project for development.

Information icon

Prerequisites

The following should be installed locally:

Developer tooling

commercetools Frontend provides developers with essential tooling to help them with the development and deployment.

These are two of the essential tool for developers:

  • CLI is our commandline interface that you can use for development. You can read the CLI quick start guide to learn about it in details.
  • A sandbox is a virtual machine hosted in the cloud that you can provision from the developer area of the studio and use for developing extensions. Read the sandbox article to learn more about using them.

Install CLI

The CLI is the central entry point for development. It's possible to run Webpack, which prepares all frontend code directly on your machine and everything else in the cloud.

To install the latest version of the CLI, run the following command based on your operating system:

For macOS/LinuxTerminal
brew tap frontasticgmbh/tap && brew install frontastic-cli
Clipboard icon
For WindowsTerminal
scoop bucket add FrontasticGmbH_scoop-bucket https://github.com/FrontasticGmbH/scoop-bucket
scoop install frontastic-cli
Clipboard icon

Set up the project locally

To set up the project locally,

  1. Clone your GitHub customer repository to your local machine.
  2. Open the terminal inside your repository's root.
  3. To initialize your project, run frontastic init. You will be asked some questions to configure your project. To get started, choose the following answers using your arrow keys:
    • Which project do you want to work on? — This will only appear if you have multiple projects in your repository.
    • Are you using a sandbox or a staging server for development? — Choose the staging server.

Install project dependencies

Run frontastic install to install all the dependencies for your projects. The CLI installs all the dependencies in the respective folders.

Warning icon

Do not run yarn install at the root of the repository as it'll not install dependencies in the sub-directories.

Start the project

Run frontastic run to start the project and open http://localhost:3000 in your browser. You should see the default home page as shown below

9a266f2 Screenshot 2022 06 28 at 11 41 09

🎉 You have successfully set up the project locally. You can start the development now.

Start the development