Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.

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