Create an App Builder project

Adobe I/O Events for Adobe Commerce allows you to send and monitor custom Adobe Commerce user-driven events. Follow the instructions on this page to create and configure a project for Adobe I/O Events.

Requirements

To get started with Adobe I/O Events, you must:

• Have an Adobe Developer account with System Administrator or Developer Role permissions. Getting started with Adobe Developer Console describes how to enroll in the Adobe developer program.

• Be familiar with Adobe I/O Runtime.

• Install the aio CLI.

• Have access to an Adobe Commerce on cloud infrastructure or to an on-premises instance.

Set up a project

Projects Overview describes the different types of projects and how to manage them. Here, we'll create a templated project.

1. Log in to the Adobe Developer Console and select the desired organization from the dropdown menu in the top-right corner.

2. Click Create new project > Project from template.

   

3. Select App Builder. The Set up templated project page displays.

   

4. Specify a project title and app name. Make sure the Include Runtime with each workspace checkbox is selected. Click Save. The Console creates a workspace.

   

5. In your workspace, click the Add service pop-up menu and select API.

   

6. On the Add an API page, filter on Adobe Services and select I/O Management API. Then click Next.

   

7. On the Configure API page, select the OAuth Server-to-Server option and click Save configured API.

   

   Note: You can set up server-to-server authentication using JSON Web Tokens (JWT). However, this method has been deprecated in favor of OAuth and must be replaced no later than January 1, 2025. See Service Account (JWT) Authentication for details on implementing this solution.

8. On the front page of your workspace, click the Add service pop-up menu and select API.

   

9. On the Add an API page, filter by Experience Cloud and select Adobe I/O Events for Adobe Commerce. Then click Next.

10. On the Configure API page, click Save configured API.

11. If you are using JWT authentication, unzip the downloaded config.zip file. The extracted config directory should contain a certificate_pub.crt and a private.key file. The private.key file is required to configure the Commerce Admin.

Download the workspace configuration file

The console can generate a JSON file that defines the configuration of your workspace. You will use this file to configure the Commerce Admin.

To download a .json file containing your workspace configuration:

1. Go to the overview page of your workspace.

2. Click the Download All button in the top-right corner.

   

   The <Workspace-name>.json file downloads automatically. In this example, the file is named 485PeachHare-283976-Stage.json.

Set up App Builder and define a runtime action

The first step to setting up your App Builder template is to set up your environment and create a runtime action. For details about this process, see Setting up Your Environment in the Adobe IO Runtime Guide and Create a templated project in the Developer Console Guide.

1. Create a project directory on your local filesystem and change to that directory.

   Copy
   mkdir myproject && cd myproject
   Copied to your clipboard
   mkdir myproject && cd myproject

2. Log in to Adobe IO from a terminal:

   Copy
   aio login
   Copied to your clipboard
   aio login

   Your web browser displays the login page.

3. Enter your Adobe ID credentials.

4. Close the browser tab and return to your terminal. Enter the following command to bootstrap your application:

   Copy
   aio app init
   Copied to your clipboard
   aio app init

   The terminal prompts you to select the path to your workspace.

   • Select your project's organization.

   • Select your project.

   • Select the DX Experience Cloud SPA v1 option.

   The command initializes a project with a default UI and creates a default Adobe I/O Runtime Action with an internal name of dx-excshell-1/generic. This action will be specified later when configuring your workspace to register events.

5. Launch App Builder by running the following command:

   Copy
   aio app run
   Copied to your clipboard
   aio app run

   The command displays the URL where you can access the default UI. Running the command enables the runtime action referenced in Subscribe and register events.

You've completed the basic setup of your project. The next step is to install Adobe I/O Events for Adobe Commerce.

Last updated 9/6/2023

Was this helpful?

Yes

No