Development

1. Technology
2. Installation
3. Build
4. Linting & Formatting
   1. Formatting code
   2. Linting code
5. Git Hooks
6. Tests

Technology

• ReactJS
• Apollo & GraphQL
• Merchant Center Application Kit
• UI Kit - Merchant Center component library
• Yarn - Package manager
• Jest - Test runner
• Enzyme - React testing utility
• Prettier - Code formatter
• ESLint - JS, CSS, and GraphQL linter

Installation

Clone the repository.

Simply run yarn or yarn install from the repository root to install the application’s dependencies.

yarn

If this is the first time running the application locally, create an env.json file at the root directory using env.local.json as an example. Based on your region, you may find it necessary to modify the values of frontendHost, mcApiUrl, and location.

Run the following command to start the development server and launch the application:

yarn start

Build

Run the following command to build the production bundles with webpack:

yarn build

Linting & Formatting

Formatting code

Run the following command to format JS, CSS, JSON and GraphQL files

yarn format

Linting code

Run the following command to lint JS, CSS, and GraphQL files

yarn lint

Linting GraphQL Queries

A prerequisite for linting GraphQL queries is generating a schema.graphql file, which contains the Types exposed by CTP API. Every time the API introduces new Types, Queries or Mutations, the local schema.graphql must be updated.

Generating CTP GraphQL schema

1. If you haven’t done so already, create an API client under Settings -> Developer Settings in Merchant Center for your project
2. Generate an access token using the Client Credentials flow
3. Export both your Merchant Center project key and generated access token as environment variables
4. Retrieve schema with graphql-cli

export PROJECT_KEY={project_key}
export AUTH_TOKEN={access_token}
npx graphql-cli get-schema

Git Hooks

Git hooks are configured using Husky.

• Pre-commit: JS, CSS, and GraphQL files are linted (ESLint/Stylelint) and formatted (Prettier). Fixes are automatically added to Git.
• Commit Message: Commit messages are linted against the conventional commit format using commitlint

Tests

Run the following command to run the tests:

yarn test

To run the tests in watch mode:

yarn test:watch

To run the tests with coverage:

yarn test:coverage