Lesson 2: Configure the app

As you log in when creating the application, most of the App Builder credentials get collected in your ENV file. However, using the developer tool requires additional credentials.

The developer tool used to test custom applications with the actual Asset Compute service requires a cloud storage container for hosting test files and for receiving and displaying renditions generated by applications.

Note: This is separate from the cloud storage of Adobe Experience Manager as a Cloud Service. It only applies for developing and testing with the Asset Compute developer tool.

You can use either S3 or Azure storage for this purpose by adding credentials of (only) one storage solution.

Copy
# S3 credentials
S3_BUCKET=
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_REGION=

# Azure Storage credentials
AZURE_STORAGE_ACCOUNT=
AZURE_STORAGE_KEY=
AZURE_STORAGE_CONTAINER_NAME=
Copied to your clipboard
# S3 credentials
S3_BUCKET=
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_REGION=

# Azure Storage credentials
AZURE_STORAGE_ACCOUNT=
AZURE_STORAGE_KEY=
AZURE_STORAGE_CONTAINER_NAME=

After that, add the absolute path to the private key file created while adding services to your App Builder Project:

Copy
ASSET_COMPUTE_PRIVATE_KEY_FILE_PATH=
Copied to your clipboard
ASSET_COMPUTE_PRIVATE_KEY_FILE_PATH=

Finally, you would need to download the file from the Adobe Developer Console. Go to the root of the workspace you are using and click on “Download All” in the upper-right corner. The file is downloaded with <namespace>-<workspace>.json as the filename. Rename it to console.json and move it in the root folder of your project.

Once all the credentials are properly configured, you can execute the application with the Asset Compute Developer Tool by the command aio app run. It deploys the action to Adobe I/O Runtime and start the development tool on your local machine, available at http://localhost:9000. You can then upload a test image, specify the rendition request, and then run the test to see the rendition result. Here is an example rendition request:

Copy
"renditions": [
    {
        "worker": "https://1234-projectA-workspaceB.adobeioruntime.net/api/v1/web/example-custom-worker-0.0.1/worker",
        "name": "custom_rendition.png"
    }
]
Copied to your clipboard
"renditions": [
    {
        "worker": "https://1234-projectA-workspaceB.adobeioruntime.net/api/v1/web/example-custom-worker-0.0.1/worker",
        "name": "custom_rendition.png"
    }
]

Looking at the action code in actions/<worker-name>/index.js, you can see what it does is simply copying the source file to generate a new rendition.

Copy
const { worker, SourceCorruptError } = require('@adobe/asset-compute-sdk');
const fs = require('fs').promises;

exports.main = worker(async (source, rendition) => {
    await fs.copyFile(source.path, rendition.path);
});
Copied to your clipboard
const { worker, SourceCorruptError } = require('@adobe/asset-compute-sdk');
const fs = require('fs').promises;

exports.main = worker(async (source, rendition) => {
    await fs.copyFile(source.path, rendition.path);
});

Last updated 5/21/2024

Was this helpful?

Yes

No