# Setting up your project

Learn how to set up your project for development.

**Prerequisites**

The following should be installed locally:

- [Homebrew](https://brew.sh/) for macOS or Linux
- [scoop](https://scoop.sh/) for Windows
- Node.js (version 18.x; other versions greater than or equal to 16.14 are also supported, but not recommended)
- Yarn (version 1.22+)

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

1. [Install the CLI](/frontend-development/developing-your-site.md#install-the-cli).
2. [Get your API token from the Studio](/frontend-development/developing-your-site.md#get-your-api-token-from-the-studio).
3. [Set up your project locally](/frontend-development/developing-your-site.md#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](/frontend-development/cli.md).

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:

  ```console title="Install frontastic-cli on macOS and Linux"
  brew tap frontasticgmbh/tap && brew install frontastic-cli
  ```

- For Windows, run the following commands:

  ```console title="Add scoop bucket on Windows"
  scoop bucket add FrontasticGmbH_scoop-bucket https://github.com/FrontasticGmbH/scoop-bucket
  ```

  ```console title="Install frontastic-cli on Windows"
  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](#get-your-api-token-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:

- [Create your first Frontend component](/frontend-development/creating-a-frontend-component.md).
- [Create your first data source extension](/frontend-development/creating-frontend-component-with-a-data-source.md).

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Requirements for project setup](/frontend-development/project-set-up.md)
- [Next page: Content management and delivery](/frontend-development/frontend-and-headless-cms.md)
- [Search documentation and API specs](/search.md)