Skip to content
Adobe Commerce Storefront
Getting started

CLI usage

To see all the available CLI commands in the terminal, use the --help flag:

Terminal window
npx elsie --help

gql

The gql command can generate types and mocks for your GraphQL API. Files will be generated in <domain package root>/src/__generated__/.

To use it, you must first configure your .elsie.js with the necessary values:

// For Adobe Commerce Catalog Service
schema: {
    endpoint: "https://catalog-service-sandbox.adobe.io/graphql",
    headers: {
        "MAGENTO-ENVIRONMENT-ID": "..."
        "MAGENTO-STORE-VIEW-CODE": "..."
        "MAGENTO-WEBSITE-CODE": "..."
        "MAGENTO-STORE-CODE": "..."
        "MAGENTO-CUSTOMER-GROUP": "..."
        "API-KEY": "..."
    }
}
// For Adobe Mesh API
schema: {
    endpoint: "https://graph.adobe.io/api/.../graphql?api_key=...",
    headers: {
        "some-mesh-specific-header": "mesh-header-value"
    }
}
// For Adobe Commerce (non-Mesh)
schema: {
    endpoint: "https://commerce-backend-url.test.graphql",
    headers: {}
}

Then the following commands will generate to

Terminal window
npx elsie gql types
Terminal window
npx elsie gql mocks

generate

Summary list of commands for quick copy/paste.

Terminal window
npx elsie generate config --name <Domain>
Terminal window
npx elsie generate component --pathname <MyUIComponent>
Terminal window
npx elsie generate container --pathname <MyContainer>
Terminal window
npx elsie generate api --pathname <myApiFunction>

Add Config

Generate a new .elsie.js configuration file for the project.

Terminal window
npx elsie generate config --name <Domain>
module.exports = {
  name: '<Domain>',
  api: {
    root: './src/api',
    importAliasRoot: '@/<Domain>/api',
  },
  components: [
    {
      id: 'Components',
      root: './src/components',
      importAliasRoot: '@/<Domain>/components',
      cssPrefix: 'elsie',
      default: true,
    },
  ],
  containers: {
    root: './src/containers',
    importAliasRoot: '@/<Domain>/containers',
  },
  schema: {
    endpoint: process.env.ENDPOINT,
    // Add necessary headers
    headers: {},
  },
};

Add Component

Generate a new UI Component for the project.

Terminal window
npx elsie generate component --pathname <MyUIComponent>
Terminal window
🆕 src/components/LoginForm/LoginForm.css created
🆕 src/components/LoginForm/LoginForm.stories.tsx created
🆕 src/components/LoginForm/LoginForm.test.tsx created
🆕 src/components/LoginForm/LoginForm.tsx created
🆕 src/components/LoginForm/index.ts created
✍️ src/components/index.ts updated

Add Container

Generate a new Frontend Container for the project.

Terminal window
npx elsie generate container --pathname <MyContainer>
Terminal window
🆕 src/containers/Login/Login.stories.tsx created
🆕 src/containers/Login/Login.test.tsx created
🆕 src/containers/Login/Login.tsx created
🆕 src/containers/Login/index.ts created
✍️ src/containers/index.ts updated

Add Function

Generate a new API function for the project.

Terminal window
npx elsie generate api --pathname <myApiFunction>
Terminal window
🆕 src/api/login/login.mdx created
🆕 src/api/login/login.test.ts created
🆕 src/api/login/login.ts created
🆕 src/api/login/index.ts created
✍️ src/api/index.ts updated