Development

This guide provides basic information for software development using the checkout starter kit.

Prerequisites

Before you begin, make sure you've completed the initial setup of the starter kit.
See Initial configuration for more details.

Verify your application is initialized

When the App Builder application is initialized, you should see the following:

The project and workspace information is generated in .aio. You can verify your current location by running aio where.
Your .env is updated with App Builder credentials.

If any configuration is missing or outdated, run the following command to sync with the Adobe Developer Console project:

aio app use --merge
Copied to your clipboard
aio app use --merge

Running locally

The starter kit consists of two main parts, as defined in app.config.yaml:

application: The main app builder actions and event handlers of the starter kit.
commerce/backend-ui/1: UI-specific components and related actions for the Adobe Commerce Admin UI.

To run the project locally, use the following commands:

# Run the project locally
aio app dev

# Run the project locally but deploy to the runtime environment
aio app run
Copied to your clipboard
# Run the project locally
aio app dev

# Run the project locally but deploy to the runtime environment
aio app run

See aio app dev vs. aio app run to understand the differences between the two modes.

Deploy the application

To deploy the app using the Adobe I/O CLI, use the following commands:

aio app deploy --force-build --force-deploy
Copied to your clipboard
aio app deploy --force-build --force-deploy

Undeploy the application

To remove the app and clean up all deployed resources from Adobe I/O Runtime and web resources, use the following commands:

aio app undeploy
Copied to your clipboard
aio app undeploy

Linting and formatting

The starter kit uses Prettier and ESLint to enforce code style and formatting. The following commands are available for linting and formatting:

Fix linting

npm run lint:fix
Copied to your clipboard
npm run lint:fix

Fix format

npm run format:fix
Copied to your clipboard
npm run format:fix

Fix both linting and format

npm run code:fix
Copied to your clipboard
npm run code:fix

Use the following links to configure formatting for your IDE:

Debugging

For debugging applications created with the starter kit, refer to the App Builder debugging documentation.

Testing

The testing framework is in Jest and execution is based on the aio CLI.

Run unit tests for the UI and actions:

aio app test
Copied to your clipboard
aio app test

Run end-to-end tests:

aio app test --e2e
Copied to your clipboard
aio app test --e2e

Troubleshooting

This section provides solutions to common issues you may encounter while developing with the checkout starter kit.

AioCoreSDKError 403 Forbidden

If you encounter the error AioCoreSDKError [EventsSDKError]: [EventsSDK:ERROR_GET_ALL_PROVIDERS] Error: 403 - Forbidden when creating an event provider, perform the following steps:

Ensure you have added the I/O Management API during the initial configuration.

Verify that you have the following permissions in the Adobe Developer Console in the side-navigation menu under OAuth Server-to-Server > Scope:

["AdobeID","openid","read_organizations","additional_info.projectedProductContext","additional_info.roles","adobeio_api","read_client_secret","manage_client_secrets","event_receiver_api"]
Copied to your clipboard
["AdobeID","openid","read_organizations","additional_info.projectedProductContext","additional_info.roles","adobeio_api","read_client_secret","manage_client_secrets","event_receiver_api"]

If any permissions are missing, update your Adobe I/O CLI to the latest version. Then delete and re-add the I/O Management API service:

npm install -g @adobe/aio-cli
aio app delete service # Delete I/O Management API
aio app add service # Add I/O Management API again
Copied to your clipboard
npm install -g @adobe/aio-cli
aio app delete service # Delete I/O Management API
aio app add service # Add I/O Management API again