README.md

Static Bundle Custom Application

This custom application allows users to manage static product bundles.

• Prerequisites
• Start the development server
• Run tests
• Build the production bundles
• Deployment
• Linting, formatting, and so on
  • Formatting code
  • Git Hooks
  • Linting GraphQL Queries
  • Generating GraphQL schema

Prerequisites

Make sure your CTP project contains bundles product types and types.

Make sure your CTP project has product search indexing enabled. If not, use the following update action to do it:

{
  "version": 1,
  "actions": [
    {
      "action": "changeProductSearchIndexingEnabled",
      "enabled": true
    }
  ]
}

Start the development server

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

$ yarn start

Run tests

Run the following command to run the tests:

$ yarn test
$ yarn test:watch

Build the production bundles

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

$ yarn build

Deployment

The production deployments can be built with mc-script compile-html.

Please check for deployment examples documentation here.

NOTE: Be sure to set the env vars for the placeholders in custom-application-config.mjs.

• Example: For AWS deployment, env variables can be set using the file env.aws. For other deployments, duplicate the file and set values accordingly.

For more information on how to use .env files, check official documentation.

Linting, formatting, and so on

Formatting code

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

$ yarn format

Git Hooks

Git hooks are configured using Husky. The root workspace runs all workspace hooks using Lerna (example repository). The hooks are configured as follows:

• 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

Linting GraphQL Queries

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

Generating 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