Skip to content
Adobe Commerce Storefront
Getting started

Create a storefront

time to complete
~20 minutes

Welcome to your Commerce Storefront journey. Our goal is to make the journey fun and informative. We start every topic with big-picture overviews and relevant vocabulary. We then walk you through the details step-by-step. And finally, we provide a sandbox for practice when possible. Let’s get started.

Big picture

The tutorial helps you quickly create a new Edge Delivery Services storefront using the Commerce boilerplate template. The boilerplate provides a starter storefront that uses a pre-configured Adobe Commerce environment.

After completing this tutorial, you will have a new GitHub repository with a storefront that is pre-configured with all the necessary components and services to get you started. You will also have a local development environment where you can explore the boilerplate and start customizing it to develop your own production storefront.

The following diagram shows the steps you’ll take to create and configure your starter storefront:

Steps to create and configure your starter storefront.

Steps to create and configure your starter storefront.
  1. Create Site Repo by generating a storefront repository from the boilerplate template.
  2. Link Repo to Content using the mountpoint URL in the fstab.yaml in your GitHub repo. You can use default-fstab.yaml as a reference.
  3. Add Code Sync App to your newly created repo. This app automatically redeploys your storefront when you push changes to the main branch. It also provides the Edge Delivery system (Helix Admin) with access to your repo so it can coordinate code changes with content changes.
  4. Add Content to the Document Author environment hosted at https://da.live/ using the import tool. If you already have a site in Sharepoint or Google Drive, you can use the site importer.
  5. Link Repo to Data using the values in the config.json in your GitHub repo.
  6. Install Sidekick and configure it to preview, publish, and edit content on your storefront.
  7. Set up Local Environment to enable the development of the boilerplate into your own storefront.

Vocabulary

Before we dive into the step-by-step guide, let’s review some key Vocabulary that will help you understand the process of creating and configuring your storefront.

Boilerplate template

The boilerplate template is a pre-configured storefront that includes all the necessary components and services to get you started. It’s a great way to quickly create a new storefront with all the necessary components and services already in place.

Code Sync app

The Code Sync app listens to changes in your code repositories (commits and merges to the main branch) and publishes code to the Edge Delivery code bus. It also intelligently purges CDN caches when changes have been made. This app is essential for keeping your storefront up-to-date with the latest changes.

Content folder

The content folder is where you store all the content for your storefront. This includes images, text, and other assets that make up your site. By sharing read/write access to your content folder with Edge Delivery Services, you enable it to provide all the features of document-based authoring, such as editing, previewing, and publishing.

Sidekick

Sidekick is an extension that makes it easy for creators to connect, edit, preview, and publish content directly from documents and spreadsheets in your content folder. It’s also responsible for pushing content to the Edge Delivery content bus so it can be previewed and published.

content mountpoint

The content mountpoint is a pointer to your content folder on https://da.live, Google Drive, or SharePoint. The content mountpoint can be defined either by specifying the mountpoint in the fstab.yaml file on the main branch of your remote GitHub repo.

Example

Our CitiSignal demo site was built from the same boilerplate you will set up to develop your own storefront. You can access the full demo site here: https://main—citisignal-one—adobedevxsc.aem.live/.

Step-by-step

The centerpiece of this 20-minute storefront is our Commerce boilerplate template. It provides a starter storefront that is pre-configured with our Commerce components and services and pre-connected to our Commerce boilerplate backend.

Prerequisites

Before you begin, take a moment to set up these required tools and accounts as needed.

Adobe Commerce 2.4.7+ Adobe Commerce system requirements.
GitHub Sign into your GitHub account.
Node.js Set your Node version (22.13.1 LTS).

Create site repo

This task requires you to have a GitHub account with access to the organization or owner where you want to create your new repo.

Create your storefront repo

Create your storefront repo.

  1. Navigate to aem-boilerplate-commerce , select the Use this template button, then select the Create a new repository option to open the form.

  2. Complete the form with the following details:

    • Repository template: hlxsites/aem-boilerplate-commerce (default).
    • Include all branches: Do not include all branches (default).
    • Owner: Your organization or account (required).
    • Repository name: A unique name for your new repo (required).
    • Description: A brief description of your repo (optional).
    • Public or Private: We recommend public (default).

  3. Select the Create repository button and watch GitHub create your new storefront repo.

  4. After a few seconds, you should be redirected to the home page of your new repo.

Link repo to content

Edge Delivery Services requires site configuration details to know what to render. These include at minimum a content reference and a code reference. The simplest approach is to create those references in the fstab.yaml configuration file.

  1. Rename default-fstab.yaml to fstab.yaml.
  2. Replace {org} and {site} in fstab.yaml using the GitHub url to determine the correct values: https://github.com/{org}/{site}.
  3. Commit and push this change to the main branch of your repository.

Add the Code Sync app

The Code Sync app redeploys your storefront site whenever you push or merge changes to the main branch of your repo.

Add AEM Code Sync to your repository.

Add AEM Code Sync to your repository.

  1. Navigate to the AEM Code Sync app and select the Configure button (top right) to open the repo selection page.

  2. Select the organization or account for the repo you just created.

  3. From the form, choose Only select repositories, open the Select repositories selector, and choose your repo from the list.

  4. Select Install (or Save, see note above) to complete the Code Sync installation.

  5. You should see a success screen if the installation completed without errors. Your repo is now connected to the Edge Delivery Services code bus.

  6. (Optional) If you return to the account selection page , your repo’s organization or account will now be gray with “Configure” added. Select your org or account again to access the Code Sync configuration page. This page shows when the app was added to your organization (highlighted) and allows you to connect the Code Sync app to additional repositories.

Add content

Now let’s create and initialize the content side of your storefront. We’ll create a new folder and share it with Edge Delivery Services. Follow these steps to create your https://da.live content folder.

  1. Open the demo content clone tool.
  2. Copy your GitHub repository url to the input field and click Create site.
  3. Follow the prompts, and by the end the content will have been copied to your content folder.
  4. You may have to manually preview or publish the content, depending on whether you followed the prerequisites.

Initialize your storefront content

Initialize your storefront content

To link your storefront repo to your commerce, you can duplicate the demo-config.json from your storefront repo and rename it to config.json. Use the demo-config.json file as a starting point for your site’s configuration.

Install Sidekick

  1. Review documentation about using and installing the AEM Sidekick.
  2. Duplicate the demo-sidekick.json file and rename it config.json, create a sidekick directory within the tools directory of your project: tools/sidekick/config.json. At a minimum, the sidekick config should contain the following values:
{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/{{org}}/{{site}}/{{pathname}}",
}

Set up local environment

  1. Go to your GitHub repo and select the Code button to copy the repo’s git URL for cloning (HTTPS or SSH).

  2. Open a terminal on your local machine and clone your storefront repo:

    git clone [HTTPS or SSH URL]

  3. Navigate to the root of your local repo and install the dependencies.

    npm install

  4. Start the development server to view the boilerplate storefront.

    npm start

    The first page of your boilerplate storefront should be visible in your browser at http://localhost:3000.

    Boilerplate Home Page

  5. Open the project in your favorite code editor. You’re now ready to explore the boilerplate and start customizing your storefront!

OSZAR »