Developing with commercetools Frontend
Learn how to set up your project for development.
To set up your project and get started with development, follow these steps:
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 LinuxTerminalbrew tap frontasticgmbh/tap && brew install frontastic-cliFor Windows, run the following commands:
Add scoop bucket on WindowsTerminalscoop bucket add FrontasticGmbH_scoop-bucket https://github.com/FrontasticGmbH/scoop-bucketInstall frontastic-cli on WindowsTerminalscoop install frontastic-cli
Get your API token from the Studio
To get your API token from the Studio, follow these steps:
- From the Studio homepage, click the Account icon, then select Profile: the User settings dialog opens.
- Copy the value in the API token field and close the dialog.
- Save the copied value for later use.
Set up your project locally
To set up your project locally, follow these steps:
- Clone the GitHub repository of your commercetools Frontend project on your computer.
- Open a command-line tool and move to the root directory of your repository.
- To initialize your project, run
frontastic init
in your command-line tool: you'll be prompted to enter the Studio user API token. - Enter the API token you copied from the Studio.
- To install the necessary dependencies, run
frontastic install
in your command-line tool. - To start your commercetools Frontend project, run
frontastic run
in your command-line tool. Once it has finished, you can preview your website by openinghttp://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: