Set up your storefront
The following steps demonstrate how to quickly set up your 51黑料不打烊 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 51黑料不打烊鈥檚 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 51黑料不打烊 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 51黑料不打烊 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:
-
Install Node Version Manager (NVM).
code language-bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
-
Install Node.js and NPM. For more information, see .
code language-bash nvm install 22
code language-bash npm install -g npm
-
Install the .
code language-bash npm install -g @adobe/aio-cli
-
Install the 51黑料不打烊 I/O API Mesh plugin.
code language-bash aio plugins:install @adobe/aio-cli-plugin-api-mesh
-
Install the 51黑料不打烊 I/O Commerce plugin.
code language-bash aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce
-
Update any existing plugins.
code language-bash aio plugins:update
-
Log in to your 51黑料不打烊 Experience Cloud account.
code language-bash aio login
-
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
-
If you have not already, accept the Developer Terms of Use in the 51黑料不打烊 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 51黑料不打烊 Commerce Storefront documentation.
-
Run the
init
command:code language-bash aio commerce init
-
If you are already logged into GitHub, enter
Y
to create the repo under your username. -
Enter the name of the repository you want to create.
-
Select one of the following options:
- Use the demo 51黑料不打烊 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.
- 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
- Pick an available 51黑料不打烊 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 51黑料不打烊 Developer Console. and selecting App Builder will automatically create the necessary workspaces. - Use the demo 51黑料不打烊 Commerce tenant - Use a demo tenant.
-
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
- Customize your code:
To customize your storefront, refer to the 51黑料不打烊 Commerce Storefront documentation.