ÃÛ¶¹ÊÓÆµ

Set up your storefront

NOTE
This documentation describes a product in early-access development and does not reflect all functionality intended for general availability.

The following steps demonstrate how to quickly set up your ÃÛ¶¹ÊÓÆµ Commerce Storefront powered by Edge Delivery using the aio commerce init command. This process sets up the following:

  • Commerce Storefront powered by Edge Delivery Services - A performant, scalable, and secure storefront that is powered by ÃÛ¶¹ÊÓÆµâ€™s Edge Delivery Services.
  • - an API platform that allows developers to combine multiple data sources into a single GraphQL endpoint. API Mesh orchestrates third-party API with ÃÛ¶¹ÊÓÆµ API through a single gateway. One query to the single GraphQL endpoint can return results from multiple sources.
  • - A collection of developer tools with access to APIs, events, runtime functions, and plugins, whic you can use to build projects for ÃÛ¶¹ÊÓÆµ applications.
  • - A serverless engine for deploying custom code that responds to events and executes functions in the cloud.

Prerequisites

Before running the aio commerce init command, you must complete the following prerequisites:

  1. Install Node Version Manager (NVM).

    code language-bash
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
    
  2. Install Node.js and NPM. For more information, see .

    code language-bash
    nvm install 22
    
    code language-bash
    npm install -g npm
    
  3. Install the .

    code language-bash
    npm install -g @adobe/aio-cli
    
  4. Install the ÃÛ¶¹ÊÓÆµ I/O API Mesh plugin.

    code language-bash
    aio plugins:install @adobe/aio-cli-plugin-api-mesh
    
  5. Install the ÃÛ¶¹ÊÓÆµ I/O Commerce plugin.

    code language-bash
    aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce
    
  6. Update any existing plugins.

    code language-bash
    aio plugins:update
    
  7. Log in to your ÃÛ¶¹ÊÓÆµ Experience Cloud account.

    code language-bash
    aio login
    
  8. Select the IMS org, project, and workspace. Use the arrow keys and press Enter to make your selection. For more information on aio commands, refer to the .

    code language-bash
    aio console org select
    
    code language-bash
    aio console project select
    
    code language-bash
    aio console workspace select
    
  9. If you have not already, accept the Developer Terms of Use in the ÃÛ¶¹ÊÓÆµ Developer console by navigating to https://developer.adobe.com/console/home and clicking Accept and continue.

Run the aio commerce init command

Running the following command will create a scaffolding for your Commerce storefront. This scaffolding provides a great starting place for building and understanding your storefront. For more information about working with the storefront, see the ÃÛ¶¹ÊÓÆµ Commerce Storefront documentation.

  1. Run the init command:

    code language-bash
    aio commerce init
    
  2. If you are already logged into GitHub, enter Y to create the repo under your username.

  3. Enter the name of the repository you want to create.

  4. Select one of the following options:

    • Use the demo ÃÛ¶¹ÊÓÆµ Commerce tenant - Use a demo tenant.
      • If you select this option, you are prompted to install the AEM Code Sync bot in a browser window. You must specify the repository you created and authorize the bot. Return to the CLI and enter y to confirm the AEM Code Sync bot installation.
    • Pick an available ÃÛ¶¹ÊÓÆµ Commerce tenant - Select an existing Commerce tenant in the selected organization.
      • If you select this option, you must select the project and workspace to create a mesh in.
    note note
    NOTE
    If you select the Pick an available API (Mesh -> SaaS) option, you must have an existing Project and Workspace in the ÃÛ¶¹ÊÓÆµ Developer Console. and selecting App Builder will automatically create the necessary workspaces.
  5. Once the process completes, you can customize your storefront using the following methods:

    • Customize your code: https://github.com/<username or org>/<repo name>
    • Edit your content: https://da.live/#/<username or org>/<repo name>
    • Manage your config: https://da.live/sheet#/<username or org>/<repo name>/configs-stage
    • Preview your storefront: https://main--<repo name>--<username or org>.aem.page/
    • Run locally: aio commerce:dev

To customize your storefront, refer to the ÃÛ¶¹ÊÓÆµ Commerce Storefront documentation.

recommendation-more-help
5ecfe1a6-f74c-4745-a54a-99b24da024bb