You may either fork or use the mainstream repository to keep up with the latest changes. In this guide, we will use mainstream repo.
git clone git@github.com:adobe/amazon-sales-channel-app-builder.git <custom-directory>Navigate to the cloned directory and execute the following commands:
- Run
npm installto download dependencies and have the project ready. - Run
npm run buildto make sure the project builds correctly. This command will clean, compile and run theaio app build.
At the moment of writing this documentation, oAuth was not available for Eventing, so we moved forward with JWT. Therefore, we need to add the following services to our project:
- Add a new service
Adobe I/O Events for Adobe Commerce. - Select
Service Account (JWT)authentication. - Generate a new key-pair (or skip it if you already have one).
- Save configured API.
Repeat the process for I/O Management API.
Before proceeding, be sure you followed the Prerequisites guide.
Then, from the cloned directory, make a copy of the .env.dist file into .env and then run aio app use command.
> cp .env.dist .env
> aio app use
You are currently in:
1. Org: <no org selected>
2. Project: <no project selected>
3. Workspace: <no workspace selected>
? Switch to a new Adobe Developer Console configuration: A. Use the global Org / Project / Workspace configuration:
1. Org: <your org>
2. Project: <your project>
3. Workspace: <your workspace>
? The file /<project_path>/.env already exists: Merge
✔ Successfully imported configuration for:
1. Org: <your org>
2. Project: <your project>
3. Workspace: <your workspace>At this point the .env and .aio files should be populated. You can remove any leftover property like AIO_ims_contexts_<App_Builder_Reference> from the .env file.
Test your configuration by running npm run deploy to deploy your application into App Builder.
The credentials stored in the application are encrypted using an AES-256 algorithm. You'll need to generate a set of custom encryption keys and provide them to the .env file in order to secure authentication data.
| Key | Description |
|---|---|
| ENCRYPTION_KEY | 32 character long encryption key |
| ENCRYPTION_IV | Initialization vector |
The application needs to connect to an Adobe Commerce instance to retrieve the product catalog updates and to ingest Amazon orders. You'll need to fill the following variables inside the .env file:
| Key | Description |
|---|---|
| ADOBE_COMMERCE_BASE_URL | The base URL of your Adobe Commerce instance |
| ADOBE_COMMERCE_CONSUMER_KEY | The consumer key of the integration created in Adobe Commerce |
| ADOBE_COMMERCE_CONSUMER_SECRET | The consumer secret of the integration created in Adobe Commerce |
| ADOBE_COMMERCE_ACCESS_TOKEN | The access token of the integration created in Adobe Commerce |
| ADOBE_COMMERCE_ACCESS_TOKEN_SECRET | The access token secret of the integration created in Adobe Commerce |
Ensure that your Adobe Commerce instance is registered as an event provider.
More information: https://developer.adobe.com/commerce/events/get-started/configure-commerce/#subscribe-and-register-events
Then, register the observer.catalog_product_save_after event in your project in developer console.
- Add new service of type
Event. - Select your event provider.
- Choose the
observer.catalog_product_save_afterevent subscription. - Select the JWT credential.
- Finally, set a name for your event registration, select your Runtime action, that should be like
amazon-app/__secured_catalog-product-save-after-listener - <your project>-<your workspace>and save the event.
At this point, if you go to the Debug tracing area in your newly event created inside the developer console, you should be able to see any incoming event from your Adobe Commerce instance.
- Important: Use
npm run compileto compile typescript files inactions-srctoactions - Run
aio app runto start your local dev server.- App will run on
localhost:9080by default if the port is available. Otherwise, check the console logs for the correct port.
- App will run on
By default, the UI will be served locally but actions will be deployed and served from Adobe I/O Runtime. To start a
local serverless stack and also run your actions locally use the aio app run --local option.
- Run
aio app testto run unit tests for ui and actions - Run
aio app test --e2eto run e2e tests
-
You have two options to resolve your actions dependencies:
-
Packaged action file: Add your actions dependencies to the root
package.jsonand install them usingnpm install. Then set thefunctionfield inext.config.yamlto point to the entry file of your action folder. We will usewebpackto package your code and dependencies into a single minified js file. The action will then be deployed as a single file. Use this method if you want to reduce the size of your actions. -
Zipped action folder: In the folder containing the action code add a
package.jsonwith the action dependencies. Then set thefunctionfield inext.config.yamlto point to the folder of that action. We will install the required dependencies within that directory and zip the folder before deploying it as a zipped action. Use this method if you want to keep your action's dependencies separated.
-
While running your local server (aio app run), both UI and actions can be debugged. To start debugging, open the vscode debugger
and select the debugging configuration called WebAndActions.
Alternatively, there are also debug configs for only UI and each separate action.
npm run deploynpm run deployto compile, build and deploy all typescript actions on Runtime and static files to CDN.aio app undeployto undeploy the app.
To use typescript use .tsx extension for react components and add a tsconfig.json
and make sure you have the below config added
{
"compilerOptions": {
"jsx": "react"
}
}