|
1 | 1 | --- |
2 | 2 | title: Admin configuration and testing |
3 | | -description: |
| 3 | +description: Learn how to configure the Admin to enable local testing of your Admin customizations. |
4 | 4 | --- |
5 | 5 |
|
6 | 6 | # Admin configuration and testing |
| 7 | + |
| 8 | +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. |
| 9 | + |
| 10 | +## Configure the Admin |
| 11 | + |
| 12 | +Navigate to **Stores** > Settings > **Configuration** > **Adobe Services** > **Admin UI SDK** and edit the **General Configuration** 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. |
| 13 | + |
| 14 | +[Test with a sample app](#test-with-a-sample-app) provides a sample `server.js` file. |
| 15 | + |
| 16 | + |
| 17 | + |
| 18 | +1. Select **Yes** from the **Enable local service** menu. |
| 19 | + |
| 20 | +1. Set the **Base URL** that points to your localhost, including the port. |
| 21 | + |
| 22 | +1. Set the **IMS Token**. In the sample `server.js` file, this value is set to `dummyToken`. |
| 23 | + |
| 24 | +1. Set the **IMS Org Id**. In the sample `server.js` file, this value is set to `imsOrg`. |
| 25 | + |
| 26 | +1. Save your configuration. |
| 27 | + |
| 28 | +1. Clear the cache. |
| 29 | + |
| 30 | + ```bash |
| 31 | + bin/magento cache:flush |
| 32 | + ``` |
| 33 | + |
| 34 | +## Test with a sample app |
| 35 | + |
| 36 | +You can download a sample app from the [Commerce UI test extension repository](https://github.com/magento/app-builder-samples) to gain insight on how the Admin SDK injects menus and pages into the Admin. |
| 37 | + |
| 38 | +1. Run the following command to clone and sync the repository: |
| 39 | + |
| 40 | + ```bash |
| 41 | + git clone git@github.com:magento/app-builder-samples.git |
| 42 | + ``` |
| 43 | + |
| 44 | +1. Change directories to the cloned repository's root directory. |
| 45 | + |
| 46 | +1. Create a `server.js` file to define a local server: |
| 47 | + |
| 48 | + ```js |
| 49 | + const http = require('https'); |
| 50 | + const fs = require('fs'); |
| 51 | + const url = require('url'); |
| 52 | + |
| 53 | + const options = { |
| 54 | + key: fs.readFileSync('key.pem'), |
| 55 | + cert: fs.readFileSync('cert.pem') |
| 56 | + }; |
| 57 | + |
| 58 | + console.log('Server will listen at : https://localhost '); |
| 59 | + http.createServer(options, function (req, res) { |
| 60 | + res.writeHead(200, { |
| 61 | + 'Content-Type': 'application/json', |
| 62 | + 'Access-Control-Allow-Origin': '*', |
| 63 | + 'Access-Control-Allow-Headers': '*' |
| 64 | + }); |
| 65 | + let json_response; |
| 66 | + |
| 67 | + console.log(url.parse(req.url,true).pathname); |
| 68 | + if (url.parse(req.url,true).pathname == "/config") { |
| 69 | + json_response = { |
| 70 | + baseUrl: "https://localhost.adobe.io:9090/", |
| 71 | + apiKey: "apiKey", |
| 72 | + auth: { |
| 73 | + schema: "Bearer", |
| 74 | + imsToken: "dummyToken" |
| 75 | + }, |
| 76 | + imsOrg: "imsOrg", |
| 77 | + version: 1, |
| 78 | + service: "commerce", |
| 79 | + extensionPoint: "backend-ui" |
| 80 | + } |
| 81 | + } else { |
| 82 | + json_response = [{ |
| 83 | + "name": "test-extension", |
| 84 | + "title": "Test extension", |
| 85 | + "description": "No", |
| 86 | + "icon": "no", |
| 87 | + "publisher": "aQQ6300000008LEGAY", |
| 88 | + "endpoints": { |
| 89 | + "commerce/backend-ui/1": { |
| 90 | + "view": [{ |
| 91 | + "href": "https://localhost:9080/" |
| 92 | + }] |
| 93 | + } |
| 94 | + }, |
| 95 | + "xrInfo": { |
| 96 | + "supportEmail": "test@adobe.com", |
| 97 | + "appId": "4a4c7cf8-bd64-4649-b8ed-662cd0d9c918" |
| 98 | + }, |
| 99 | + "status": "PUBLISHED" }] |
| 100 | + } |
| 101 | + //console.log(json_response); |
| 102 | + res.end( JSON.stringify(json_response) ); |
| 103 | + }).listen(9090); |
| 104 | + ``` |
| 105 | + |
| 106 | +1. Run the local server: |
| 107 | + |
| 108 | + ```bash |
| 109 | + node server.js |
| 110 | + ``` |
| 111 | + |
| 112 | +1. Make sure you have access to the localhost server configuration by entering the following URL in your browser: |
| 113 | + |
| 114 | + `https://localhost:9090/config` |
| 115 | + |
| 116 | + The browser displays a JSON file similar to the following: |
| 117 | + |
| 118 | + ```json |
| 119 | + { |
| 120 | + "baseUrl":"https://localhost:9090/", |
| 121 | + "apiKey":"apiKey", |
| 122 | + "auth":{ |
| 123 | + "schema":"Bearer", |
| 124 | + "imsToken":"dummyToken" |
| 125 | + }, |
| 126 | + "imsOrg":"imsOrg", |
| 127 | + "version":1, |
| 128 | + "service":"commerce", |
| 129 | + "extensionPoint":"backend-ui" |
| 130 | + } |
| 131 | + ``` |
| 132 | + |
| 133 | +1. Run your extension locally. |
| 134 | + |
| 135 | + ```bash |
| 136 | + aio app run |
| 137 | + ``` |
| 138 | + |
| 139 | +1. Check that the **First App on App Builder** option has been added to the **Marketing** menu in the Admin and that selecting the option takes you to the **Fetched orders from Adobe Commerce** page. |
| 140 | + |
| 141 | +  |
| 142 | + |
| 143 | +  |
0 commit comments