Edit in GitHubLog an issue

Admin configuration and testing

The Adobe Commerce Admin UI SDK allows you to use a local server to view and test your Admin customizations before you submit your app to the Adobe Marketplace.

Configure the Admin

Navigate to Stores > Settings > Configuration > Adobe Services > Admin UI SDK and edit the Local testing screen. When you enable the local service, all calls are automatically redirected to the local server, instead of connecting to Adobe's App Registry. The values you specify must match the contents of your local server.js file.

Test with a sample app provides a sample server.js file.

Local server configuration

  1. Select Yes from the Enable Admin UI SDK menu.

  2. Select Yes from the Enable Local Testing menu.

  3. Set the Local Server Base URL that points to your localhost, including the port.

  4. The Mock Admin IMS Module menu determines whether to send mock or real authentication credentials for the Adobe Identity Management Service (IMS). Ensure this value is set to Yes for early-stage testing. Set the value to No when you are ready to test with real credentials.

  5. Set the Mock IMS Token. In the sample server.js file, this value is set to dummyToken.

  6. Set the Mock IMS Org ID. In the sample server.js file, this value is set to imsOrg.

  7. Save your configuration.

  8. Clear the cache.

    Copied to your clipboard
    bin/magento cache:flush

Clean the Admin UI SDK cache

The admin_ui_sdk cache type stores Admin customizations. As you develop these customizations, run the following command to ensure you are seeing the latest changes:

Copied to your clipboard
bin/magento cache:clean admin_ui_sdk

Test with a sample app

Prerequisites

  • An Adobe Commerce instance installed on the local machine.

Configuration

You can download a sample app from the Adobe Commerce Samples repository to gain insight on how the Admin SDK injects menus and pages into the Admin.

  1. Run the following command to clone and sync the repository:

    Copied to your clipboard
    git clone git@github.com:adobe/adobe-commerce-samples.git
  2. Change directories to the cloned repository's root directory.

  3. Create a server.js file in <repoRootDir>/admin-ui-sdk to define a local server:

    Copied to your clipboard
    const http = require('https');
    const fs = require('fs');
    const url = require('url');
    const options = {
    key: fs.readFileSync('key.pem'),
    cert: fs.readFileSync('cert.pem')
    };
    console.log('Server will listen at : https://localhost ');
    http.createServer(options, function (req, res) {
    res.writeHead(200, {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*'
    });
    console.log(url.parse(req.url,true).pathname);
    const json_response = [
    {
    "name": "test-extension",
    "title": "Test extension",
    "description": "No",
    "icon": "no",
    "publisher": "aQQ6300000008LEGAY",
    "endpoints": {
    "commerce/backend-ui/1": {
    "view": [{
    "href": "https://localhost:9080/index.html"
    }]
    }
    },
    "xrInfo": {
    "supportEmail": "test@adobe.com",
    "appId": "4a4c7cf8-bd64-4649-b8ed-662cd0d9c918"
    },
    "status": "PUBLISHED"
    }
    ]
    res.end( JSON.stringify(json_response) );
    }).listen(9090);
  4. Generate the key.pem certificate in the same directory.

    Copied to your clipboard
    openssl genpkey -algorithm RSA -out key.pem -pkeyopt rsa_keygen_bits:2048
  5. Generate the cert.pem certificate in the same directory.

    Copied to your clipboard
    openssl req -new -x509 -key key.pem -out cert.pem -days 365
  6. Run the local server:

    Copied to your clipboard
    node server.js
  7. Make sure you have access to the localhost server configuration by entering the following URL in your browser:

    https://localhost:9090

    The browser displays a JSON file similar to the following:

    Copied to your clipboard
    [
    {
    "name": "test-extension",
    "title": "Test extension",
    "description": "No",
    "icon": "no",
    "publisher": "aQQ6300000008LEGAY",
    "endpoints": {
    "commerce/backend-ui/1": {
    "view": [{
    "href": "https://localhost:9080/index.html"
    }]
    }
    },
    "xrInfo": {
    "supportEmail": "test@adobe.com",
    "appId": "4a4c7cf8-bd64-4649-b8ed-662cd0d9c918"
    },
    "status": "PUBLISHED"
    }
    ]

Custom menu example

  1. Change directories to <repoRootDir>/admin-ui-sdk/menu/custom-menu.

  2. Run the following command to load dependencies.

    Copied to your clipboard
    npm install
  3. Select your App Builder project.

    Copied to your clipboard
    aio console project select
  4. Select the App Builder workspace.

    Copied to your clipboard
    aio console workspace select
  5. Sync the App Builder project details.

    Copied to your clipboard
    aio app use
  6. Build your solution.

    Copied to your clipboard
    aio app build
  7. Run your custom menu extension locally.

    Copied to your clipboard
    aio app run
  8. Confirm that the Apps section appears on the main menu and the First App on App Builder option appears in the Apps menu in the Admin. Click First App on App Builder and confirm that the Fetched orders from Adobe Commerce page opens.

    Fetched orders from Adobe Commerce page

    First App on App Builder menu

Test using project workspaces

Use the following steps to test a specific workspace from your project:

  1. Deploy the app to the workspace.

    Copied to your clipboard
    aio app deploy

    After deployment, the command displays the URL to your app workspace under To view your deployed application:

  2. Change the values of the name and href fields in the json_response section of the server.js file to point to your workspace.

    Copied to your clipboard
    {
    "name": "app_name",
    "title": "Test extension",
    "description": "No",
    "icon": "no",
    "publisher": "aQQ6300000008LEGAY",
    "endpoints": {
    "commerce/backend-ui/1": {
    "view": [{
    "href": "https://<app_workspace_url>/index.html"
    }]
    }
    },
    "xrInfo": {
    "supportEmail": "test@adobe.com",
    "appId": "4a4c7cf8-bd64-4649-b8ed-662cd0d9c918"
    },
    "status": "PUBLISHED"
    }

    You can add multiple workspaces to the server to test several applications at once.

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2024 Adobe. All rights reserved.