NOTICE: This post is related to <a href="https://business.adobe.com/products/experience-manager/developer-app-builder.html" target="_blank" rel="noopener">Adobe App Builder</a> which previosly went by "Project Firefly". <a href="https://www.adobe.com/sensei/generative-ai/firefly.html" target="_blank" rel="noopener">Learn more about the new Adobe Firefly, AI Art Generator here.&nbsp;</a>
In this post, I explain how to include resources in a zipped action folder when working with Project Firefly and Adobe I/O Runtime actions.&nbsp;
<h3>Use Case</h3>
There are a number of use cases that require using zipped action folders. At a high level, zipped action folders allow us to make a specific resource or resources exclusively available to an action.&nbsp; I'm going to refer to a previous post, <a title="Cloud Manager Slack Notifications with Project Firefly" href="../blog/adobe-cloud-manager-slack-notifications-with-project-firefly" target="_blank" rel="noopener">Cloud Manager Slack Notifications with Project Firefly</a>, to help me illustrate the use case of generating an access token for service-to-service authentication.
In the previous post, I used an environment variable to store a private key. The private key is needed to create the access token which is needed to authenticate with the Cloud Manager API.&nbsp; Using an environment variable to store a private key goes against best practice.&nbsp; A better approach is to store the private key in a file that is only available to be read by our action.
<h3>Create a new Action</h3>
Using the terminal, navigate to your code project and run the following commands:
<pre class="language-markup"><code>npm install jsrsasign --save</code></pre>
<pre class="language-markup"><code>aio app:action:add</code></pre>
The action creation wizard will walk you through generating a new action. Select,&nbsp;<code>Generic</code>&nbsp;as the action type and give the action an appropriate name (e.g.&nbsp;<code>zipped-resource</code>). Agree to overwrite the package.json and manifest.yml files when prompted.
Open the code project within an editor and open the index.js file for the new action. Replace the contents with the code below.
<pre class="language-javascript"><code>const fetch = require('node-fetch');
const { Core } = require('@adobe/aio-sdk')
const fs = require('fs');
const { getAccessToken } = require('./token');
const { errorResponse, getBearerToken, stringParameters, checkMissingRequestInputs } = require('./utils')

async function main (params) {
 const logger = Core.Logger('main', { level: params.LOG_LEVEL || 'info' })

 try {
 const requiredParams = ['SERVICE_API_KEY', 'CLIENT_SECRET', 'IMS_ORG_ID', 'TECHNICAL_ACCOUNT_ID']
 const requiredHeaders = []
 const errorMessage = checkMissingRequestInputs(params, requiredParams, requiredHeaders)

 if (errorMessage) {
 return errorResponse(400, errorMessage, logger)
 }
 
 const privateKey = fs.readFileSync(__dirname + '/private.key','UTF-8');
 const accessToken = await getAccessToken(params, privateKey);

 const response = {
 statusCode: 200,
 body: accessToken
 }

 return response;

 } catch (error) {
 logger.error(error)
 return errorResponse(500, 'server error', logger)
 }
}

exports.main = main
</code></pre>
Create a new file within the zipped-resource action folder called <code>token.js</code>. I'll reuse the same code from the previous post, but with a few minor changes to pass the private key into the module as a unique parameter instead of an argument derived from environment variables.&nbsp;
<pre class="language-javascript"><code>const jsrsasign = require("jsrsasign");
const fetch = require("node-fetch");
const { URLSearchParams } = require("url");

async function getAccessToken(params, privateKey) {
 const EXPIRATION = 60 * 60; // 1 hour

 const header = {
 alg: "RS256",
 typ: "JWT",
 };

 const payload = {
 exp: Math.round(new Date().getTime() / 1000) + EXPIRATION,
 iss: params.IMS_ORG_ID,
 sub: params.TECHNICAL_ACCOUNT_ID,
 aud: `https://ims-na1.adobelogin.com/c/${params.SERVICE_API_KEY}`,
 "https://ims-na1.adobelogin.com/s/ent_cloudmgr_sdk": true,
 };

 const jwtToken = jsrsasign.jws.JWS.sign(
 "RS256",
 JSON.stringify(header),
 JSON.stringify(payload),
 privateKey
 );

 const response = await fetch(
 "https://ims-na1.adobelogin.com/ims/exchange/jwt",
 {
 method: "POST",
 body: new URLSearchParams({
 client_id: params.SERVICE_API_KEY,
 client_secret: params.CLIENT_SECRET,
 jwt_token: jwtToken,
 }),
 }
 );

 const json = await response.json();
 return json["access_token"];
}

module.exports = {
 getAccessToken
}</code></pre>
Next, copy the <code>private.key</code> file into the zipped-resources action folder so that it is next to the index.js and token.js files. The private key should have been downloaded when the JWT credential was generated. Review <a title="Getting Started with Project Firefly" href="../blog/getting-started-with-project-firefly" target="_blank" rel="noopener">Getting Started with Project Firefly</a> if necessary to learn how to create a new JWT credential.&nbsp;&nbsp;
The <code>zipped-resource</code> action folder needs to contain all of the resources required by the action. Copy the <code>utils.js</code> file that was generated with the project and paste it into the zipped-resource action folder. For convenience, the code can also be copied below.
<pre class="language-javascript"><code>function stringParameters (params) {
 // hide authorization token without overriding params
 let headers = params.__ow_headers || {}
 if (headers.authorization) {
 headers = { ...headers, authorization: '&lt;hidden&gt;' }
 }
 return JSON.stringify({ ...params, __ow_headers: headers })
}

function getMissingKeys (obj, required) {
 return required.filter(r =&gt; {
 const splits = r.split('.')
 const last = splits[splits.length - 1]
 const traverse = splits.slice(0, -1).reduce((tObj, split) =&gt; { tObj = (tObj[split] || {}); return tObj }, obj)
 return traverse[last] === undefined || traverse[last] === '' // missing default params are empty string
 })
}

function checkMissingRequestInputs (params, requiredParams = [], requiredHeaders = []) {
 let errorMessage = null

 // input headers are always lowercase
 requiredHeaders = requiredHeaders.map(h =&gt; h.toLowerCase())
 // check for missing headers
 const missingHeaders = getMissingKeys(params.__ow_headers || {}, requiredHeaders)
 if (missingHeaders.length &gt; 0) {
 errorMessage = `missing header(s) '${missingHeaders}'`
 }

 // check for missing parameters
 const missingParams = getMissingKeys(params, requiredParams)
 if (missingParams.length &gt; 0) {
 if (errorMessage) {
 errorMessage += ' and '
 } else {
 errorMessage = ''
 }
 errorMessage += `missing parameter(s) '${missingParams}'`
 }

 return errorMessage
}

function getBearerToken (params) {
 if (params.__ow_headers &amp;&amp;
 params.__ow_headers.authorization &amp;&amp;
 params.__ow_headers.authorization.startsWith('Bearer ')) {
 return params.__ow_headers.authorization.substring('Bearer '.length)
 }
 return undefined
}

function errorResponse (statusCode, message, logger) {
 if (logger &amp;&amp; typeof logger.info === 'function') {
 logger.info(`${statusCode}: ${message}`)
 }
 return {
 error: {
 statusCode,
 body: {
 error: message
 }
 }
 }
}

module.exports = {
 errorResponse,
 getBearerToken,
 stringParameters,
 checkMissingRequestInputs
}
</code></pre>
Create a package.json file within the zipped-resource folder. Copy and paste the contents below into the package.json file.
<pre class="language-javascript"><code>{
 "name": "zipped-resource",
 "main": "index.js",
 "version": "0.0.1",
 "private": true,
 "dependencies": {
 "@adobe/aio-sdk": "^3.0.0",
 "@adobe/exc-app": "^0.2.21",
 "@adobe/jwt-auth": "^1.0.1",
 "cloudevents-sdk": "^1.0.0",
 "core-js": "^3.6.4",
 "jsrsasign": "^10.2.0",
 "node-fetch": "^2.6.0"
 },
 "engines": {
 "node": "^10 || ^12"
 }
}
</code></pre>
Using the terminal, navigate into the actions &gt; zipped-resources folder and run the following command to install the 3rd party dependencies for the action.
<pre class="language-markup"><code>npm install</code></pre>
The contents of the zipped-resources action folder should resemble the following.
<img src="https://i.ibb.co/wBwNcrT/filesystem-zipped-resources-action.png" alt="Zipped-Resources Action Folder Contents" width="100%" />
<h3>Update the Manifest</h3>
Open the project <code>manifest.yml</code> and make the following two changes:
<ol>
<li>Include the environment variable mappings for the <code>SERVICE_API_KEY</code>, <code>CLIENT_SECRET</code>, <code>IMG_ORG_ID</code> and <code>TECHNICAL_ACCOUNT_ID</code>. These are the same mappings defined in the previous post with the <code>PRIVATE_KEY</code> intentionally omitted.</li>
<li>Modify the function property path to point at the directory instead of the index.js file</li>
</ol>
<img src="https://i.ibb.co/3svvnM2/zipped-resource-action-manifest.png" alt="Manifest.yml Settings" width="100%" />
<h3>Try it Out</h3>
To see the application in action, return to the terminal and run one more command:
<pre class="language-markup"><code>aio app run</code></pre>
Select the zipped-resource action from the menu and confirm your access token was generated and returned.
<img src="https://i.ibb.co/KXD6Q3M/zipped-resource-action-access-token.png" alt="Action generated Access Token" width="100%" />

In this post I explain how to include resources in zipped action folders for Adobe I/O Runtime

Zipped Action Folder Resources in Project Firefly and Adobe I/O Runtime

Automating notifications is a common DevOps task. In this post, I'll explain how to send Adobe Cloud Manager pipeline status notifications to Slack using a Project Firefly headless application.
In the <a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" title="Getting Started with Project Firefly" href="../blog/getting-started-with-project-firefly" target="_blank" rel="noopener">Getting Started with Project Firefly</a> post, we created a Firefly project and used the Developer Console to add the Cloud Manager API, as well as a credential (JWT) to our project.&nbsp;
<h3>Slack API</h3>
To begin this integration, follow the instructions on the Slack website to create an <a title="slack documentation for incoming webhook" href="https://api.slack.com/messaging/webhooks" target="_blank" rel="noopener">incoming webhook</a>.&nbsp; 
<img src="https://i.ibb.co/nrbNcZz/retrieve-webhook-url.png" alt="retrieve webhook url in slack" width="100%" />
After your Slack App is created, make a note of the webhook URL, we will use it when coding the application.&nbsp;
<h3>Coding the Application</h3>
Open the <a title="AIO CLI documentation" href="https://github.com/adobe/aio-cli#aio-appadd" target="_blank" rel="noopener">AIO CLI documentation</a> and <a title="Cloud Manager API documentation" href="https://www.adobe.io/apis/experiencecloud/cloud-manager/api-reference.html#!AdobeDocs/cloudmanager-api-docs/master/swagger-specs/api.yaml" target="_blank" rel="noopener">Cloud Manager API documentation</a> in a browser tab for quick reference. Using the terminal, navigate to your code project and run the following command:
<pre class="language-markup"><code>aio app:add:action</code></pre>
The action creation wizard will walk you through generating a new action. Select, <code>Generic</code> as the action type and give the action an appropriate name (e.g. <code>notify-slack</code>). Agree to overwrite the package.json and manifest.yml files when prompted.
Open the code project within an editor and open the .env file. Notice the environment variables reflect the values that appear within the Developer Console. Add the following environment variables to the .env file.&nbsp;
<ul>
<li>PRIVATE_KEY=&lt;YOUR-PRIVATE-KEY&gt;</li>
</ul>
These environment variables will be made available to the application in the next step when we update the manifest.yml file.
<blockquote>
Note: It is not recommended to store your private key in an environment variable, for the sake of brevity I will in this tutorial, but in your production application you should read the private key from a file. Learn how to create <a title="Zipped Action Folder Resources in Project Firefly and Adobe I/O Runtime" href="../blog/zipped-action-folder-resources-in-project-firefly-and-adobe-io-runtime" target="_blank" rel="noopener">Zipped Action Folder Resources in Project Firefly and Adobe I/O Runtime</a>. 
</blockquote>
<img src="https://i.ibb.co/7SPGkZb/Cloud-Manager-Slack-Notification-Dot-Env-File.png" alt="Dot Env File" width="100%" />
Open the manifest.yml file and locate the entry for the <code>notify-slack</code> action. Items within the Inputs block will be made available to our application code within the <code>params</code> object. Environment variables (.env file) can be used within the manifest.yml file through the use of the $ symbol. Map the environment variables to the input properties as shown below.
<img src="https://i.ibb.co/6bCLxH9/Cloud-Manager-Slack-Notifications-Manifest-File.png" alt="Manifest File" width="100%" />&nbsp; From the terminal, run the following command to install the <a title="jsrasign" href="https://www.npmjs.com/package/jsrsasign" target="_blank" rel="noopener">jsrasign</a> dependency.
<pre class="language-markup"><code>npm install jsrsasign --save</code></pre>
Open the code project within an editor and create a new file within the actions &gt; notify-slack folder named token.js. The token.js module will be responsible for exchanging a JWT token for an OAuth 2.0 access token which we'll need to work with the Cloud Manager API. Paste the following code into token.js. Save and close the file.
<pre class="language-javascript"><code>const jsrsasign = require("jsrsasign");
const fetch = require("node-fetch");
const { URLSearchParams } = require("url");

async function getAccessToken(params) {
 const EXPIRATION = 60 * 60; // 1 hour

 const header = {
 alg: "RS256",
 typ: "JWT",
 };

 const payload = {
 exp: Math.round(new Date().getTime() / 1000) + EXPIRATION,
 iss: params.IMS_ORG_ID,
 sub: params.TECHNICAL_ACCOUNT_ID,
 aud: `https://ims-na1.adobelogin.com/c/${params.SERVICE_API_KEY}`,
 "https://ims-na1.adobelogin.com/s/ent_cloudmgr_sdk": true,
 };

 const jwtToken = jsrsasign.jws.JWS.sign(
 "RS256",
 JSON.stringify(header),
 JSON.stringify(payload),
 params.PRIVATE_KEY
 );

 const response = await fetch(
 "https://ims-na1.adobelogin.com/ims/exchange/jwt",
 {
 method: "POST",
 body: new URLSearchParams({
 client_id: params.SERVICE_API_KEY,
 client_secret: params.CLIENT_SECRET,
 jwt_token: jwtToken,
 }),
 }
 );

 const json = await response.json();
 return json["access_token"];
}

module.exports = {
 getAccessToken
}</code></pre>
Open the index.js file within the editor and replace the contents with the following code. Update the <code>SLACK_WEBHOOK</code> constant variable with the appropriate value for your Slack App.
<pre class="language-javascript"><code>const fetch = require('node-fetch')
const { Core } = require('@adobe/aio-sdk')
const { getAccessToken } = require('./token');
const { errorResponse, getBearerToken, stringParameters, checkMissingRequestInputs } = require('../utils')

const SLACK_WEBHOOK = 'https://hooks.slack.com/services/&lt;YOUR-WEBHOOK-URL&gt;';

async function sendNotification (params) {
 const accessToken = await getAccessToken(params);

 let type = params.event['@type'].indexOf('started') &gt; -1 ? 'STARTED' : 'ENDED';
 let id = params.event['activitystreams:object']['@id'];

 // Make GET Request to Cloud Manager API
 let pipelineRequest = await fetch(id, {
 'method': 'GET',
 'headers': { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}`, 'x-gw-ims-org-id': params.IMS_ORG_ID, 'x-api-key': params.SERVICE_API_KEY}
 });

 let pipeline = await pipelineRequest.json();
 let notification = `Cloud Manager Pipeline Notification \n Event Type: ${type} \n Status: ${pipeline.status} \n ID: ${id}`;

 //Make POST to Slack Webhook
 const message = await fetch(SLACK_WEBHOOK, {
 'method': 'POST',
 'headers': { 'Content-Type': 'application/json' },
 'body': JSON.stringify({
 'text': notification
 })
 })

 const response = {
 statusCode: 200,
 body: message
 }

 return response
}

async function main (params) {
 const logger = Core.Logger('main', { level: params.LOG_LEVEL || 'info' })

 try {
 const requiredParams = ['event', 'SERVICE_API_KEY', 'CLIENT_SECRET', 'IMS_ORG_ID', 'TECHNICAL_ACCOUNT_ID']
 const requiredHeaders = []
 const errorMessage = checkMissingRequestInputs(params, requiredParams, requiredHeaders)
 
 if (errorMessage) {
 return errorResponse(400, errorMessage, logger)
 }
 
 let response = await sendNotification(params);
 return response;

 } catch (error) {
 logger.error(error)
 return errorResponse(500, 'server error', logger)
 }
}

exports.main = main
</code></pre>
You should now have two modules within your actions &gt; notify-slack folder.
<img src="https://i.ibb.co/CBmKr0d/filesystem-notify-slack-modules.png" alt="Filesystem showing notify-slack modules" width="100%" />
From the terminal, run the following command to start the application.
<pre class="language-markup"><code>aio app run</code></pre>
Notice that the console output provides two URLs to view the application.&nbsp;
<ul>
<li>Local Application - Renders the application from a local HTTPS server
<ul>
<li><code>https://localhost:9080 </code></li>
</ul>
</li>
<li>Experience Cloud Shell - Renders the application within the Experience Cloud Shell with an authenticated session
<ul>
<li><code>https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080</code></li>
</ul>
</li>
</ul>
Confirm that the action is available from the menu.
<img src="https://i.ibb.co/ZMGSd3z/Slack-Notification-Firefly-Developer-Tool.png" alt="Firefly Developer Tool" width="100%" />&nbsp;
<h3>Registering I/O Event Listener</h3>
1) Return to the Developer Console and click the Add Event button within the production workspace of the project.
<img src="https://i.ibb.co/ZJGdsdj/Developer-Console-Add-Event-Cloud-Manager.png" alt="Developer Console Add Event Cloud Manager" width="100%" />
2) Select the Experience Cloud category and then select the Cloud Manager service.
<img src="https://i.ibb.co/VSTnMYf/Developer-Console-Add-Event-Cloud-Manager-Selection.png" alt="Select Cloud Manager" width="100%" />
3) Click the Next button. Select the events you want to subscribe to. For this demo, I selected the Pipeline Execution Started and Pipeline Execution Ended events.
<img src="https://i.ibb.co/f4N8t6w/Developer-Console-Event-Configuration.png" alt="Developer Console Configure Event Registration" width="100%" />
4) Click the Next button. Select the Service Account Credential to associate with the application.
<img src="https://i.ibb.co/Wc0ZpL6/Developer-Console-Event-Configuration-Service-Account-Credential-Selection.png" alt="Developer Console Select Service Account Credential" width="100%" />
5) Click the Next button. Enter a unique name for this event registration (e.g. <code>PipelineSlackNotification</code>). Select the action that we created earlier (e.g. <code>notify-slack</code>) from the Runtime action drop-down menu.
<img src="https://i.ibb.co/zxgfLZv/Developer-Console-Event-Runtime-Mapping.png" alt="Map Event Registration to Runtime Action" width="100%" />
6) Click the Save Configurated Events button. The Event Registration should reflect an active status.
<img src="https://i.ibb.co/jTBZ4tv/Developer-Console-Event-Registration-Active.png" alt="Registered Event is Active" width="100%" />
<h3>Building Cloud Manager Pipeline</h3>
1) Initiate a build on the Cloud Manager Pipeline
<img src="https://i.ibb.co/ZgSwxWd/Cloud-Manager-Build-Pipeline.png" alt="Build Cloud Manager Pipeline" width="100%" />
2) Open Slack channel and verify the notification was sent
<img src="https://i.ibb.co/5Mx7YL2/Cloud-Manager-Slack-Notification.png" alt="Slack Channel Notification" width="100%" />&nbsp;

In this post I show how to send Adobe Cloud Manager pipeline status notifications to Slack using a Project Firefly headless application