Installing a Starter Application

Prerequisites

Before you start development, you should have the following:

• A commercetools account and a project.
• Node.js installed (version >=8). Either yarn or npm as a package manager.
• Basic knowledge of React as well as some experience working with web applications.

Installing a starter application

1. Install one of the starter templates using the create-mc-app package:

npx @commercetools-frontend/create-mc-app \
  my-new-custom-application-project \
  --template starter

2. Configure the application environment:

Rename the .env.template file to .env. By default the GCP EU environment is configured. If you plan to run the Custom Application in another environment, change the hostname accordingly.

mv .env.template .env

3. Start the development server:

cd my-new-custom-application-project
npm start

If you use yarn:

cd my-new-custom-application-project
yarn start

The browser opens a new tab pointing to http://localhost:3001, with a login screen (for development only). Log in using your commercetools account as usual.

Once you've authenticated, you are redirected to the application http://localhost:3001/:projectKey/examples-starter, where :projectKey is your commercetools project.

Renaming the application main route path

The starter application defines example-starter as the main application route path (see src/components/entry-point). This is the route that identifies your application and is used by the proxy router. Check out the Merchant Center architecture to know more about this.

The official main route path values are (the list can be extended at any time):

• authentication
• dashboard
• products
• categories
• orders
• customers
• discounts
• settings

You should choose a value that fits with the purpose of the application you are developing. For example, if your application manages state machines, you can choose to name the route state-machines.