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

Cloud Manager Slack Notifications with Project Firefly

Project Firefly is a framework that allows developers to build &amp; deploy serverless applications that run within the Adobe Experience Cloud.&nbsp;Firefly supports both Headless and Single Page Applications.
&nbsp;
<blockquote>
Note: In order to get started with Firefly, your organization will need to register for the <a title="Developer Preview" href="https://adobeio.typeform.com/to/obqgRm" target="_blank" rel="noopener">Developer Preview</a> program. The remainder of this post will assume you have access.&nbsp;
</blockquote>
&nbsp;
<h3>Headless Applications</h3>
Headless Applications are created using NodeJS with Adobe I/O Runtime (Adobe's Serverless platform). These headless applications are perfect for a variety of use cases including:
<ul>
<li>Microservices</li>
<li>APIs</li>
<li>Service Integrations</li>
</ul>
<h3>Single Page Applications</h3>
Single Page Applications (SPAs) provide a user interface to Headless Applications.&nbsp; Firefly SPAs are created using <a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" title="React Spectrum" href="https://react-spectrum.adobe.com/react-spectrum/" target="_blank" rel="noopener">React Spectrum</a> which is a ReactJS implementation of Adobe&rsquo;s <a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" title="Spectrum" href="https://spectrum.adobe.com/" target="_blank" rel="noopener">Spectrum</a> design system.&nbsp;
&nbsp;
<h2>Application Creation</h2>
The quickest way to generate a Firefly application is by using the AIO CLI Tool.&nbsp;&nbsp;
<h3>AIO CLI Tool</h3>
The Adobe I/O <a title="Extensible CLI" href="https://github.com/adobe/aio-cli" target="_blank" rel="noopener">Extensible CLI</a> tool provides a common command-line interface for working with Firefly applications. You will need to install <a title="NodeJS" href="https://nodejs.org/en/" target="_blank" rel="noopener">NodeJS </a>&nbsp;(version 12) and NPM.&nbsp;
&nbsp;
<blockquote>
Tip: It's easy to manage multiple versions of NodeJS on a single machine with the help of <a title="Node Version Manager" href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener">NVM</a>.&nbsp;
</blockquote>
&nbsp;
After NodeJS and NPM are installed, open the terminal application and run the following commands.&nbsp;
1) Install the AIO CLI tool using NPM
<pre class="language-markup"><code>npm install -g @adobe/aio-cli</code></pre>
2) Verify the AIO CLI tool installed successfully
<pre class="language-markup"><code>aio -h</code></pre>
3) Make sure all plugins are up to date
<pre class="language-markup"><code>aio plugins:update</code></pre>
<h3>Creating the Firefly Application</h3>
Using the terminal, navigate to your project folder and initialize the Firefly application with the following command:
<pre class="language-markup"><code>aio app init</code></pre>
The application creation wizard will lead you step-by-step through the process of defining your organization, project name &amp; workspace, as well as selecting the features you want to initialize your application with.
The code project will be generated based on the preferences you specify, while completing the creation wizard.
To see your application in action, return to the terminal and run one more command:
<pre class="language-markup"><code>aio app run</code></pre>
Open your web browser and enter http://localhost:9080 into the address bar. You are officially up and running on Firefly.
<img src="https://i.ibb.co/bmtXn75/Firefly-App-Welcome-Screen.png" alt="Firefly Application Welcome Screen" width="100%" />
&nbsp;
<h2>Project Administration</h2>
In addition to the AIO CLI tool, you will use the Developer Console to manage your project, add and authorize APIs, as well as gain helpful insights.
In this section, we will use the Developer Console to add an API and credential to our project. Before we do, it's worthwhile to note some of the differences between using the AIO CLI tool and the Developer Console when creating projects.
<h3>Developer Console</h3>
The Developer Console is available at <a title="http://console.adobe.io" href="http://console.adobe.io" target="_blank" rel="noopener">http://console.adobe.io</a>. Using the Developer Console, it's possible to create a new Empty Project or a new Project from Template.
 From the Home page quick start menu, you have the option to create a new empty project. When an empty project is created, there are two things to be aware of:
<ul>
<li>The project name is generated automatically for you</li>
<li>Adobe I/O Runtime and workspaces need to be manually enabled and added to the project</li>
</ul>
The project name is used to define the Adobe I/O Runtime Namespace which we will soon see. It is always possible to edit the title of a project, the name of the project cannot be modified after creation.&nbsp;
<img src="https://i.ibb.co/7Y4Hggd/IO-Console.png" alt="Developer Console" width="100%" />
<img src="https://i.ibb.co/Jv8Zz5p/Developer-Console-Add-Runtime.png" alt="Developer Console add I/O Runtime" width="100%" />
The Create New Project button on the Project page allows you to create a new project from a template.
<img src="https://i.ibb.co/2cFBnST/Developer-Console-New-Template-Project.png" alt="Developer Console New Template Project" width="100%" />
<img src="https://i.ibb.co/cyd9cY7/Developer-Console-Firefly-Template-Selection.png" alt="Developer Console Firefly Template Selection" width="100%" />
When the Project Firefly template is used, the project name can be specified during setup. The Adobe I/O Runtime is enabled by default. Production and Stage workspace are also added to the project by default in the same way as when using the AIO CLI tool.&nbsp;
<img src="https://i.ibb.co/87nGwyw/Developer-Console-Firefly-Templated-Setup.png" alt="Developer Console Firefly Templated Setup" width="100%" />
<h3>Add an API</h3>
Now that we have reviewed the Developer Console and understood the options and implications of how a project is created, we can add an API and credential to the project.
1) Navigate to the Projects page and locate the project you created using the AIO CLI tool earlier.&nbsp;
<img src="https://i.ibb.co/4gHwrXy/Developer-Console-Project-Selection.png" alt="Developer Console Project Selection" width="100%" />
2) Select a workspace and click the Add Service button and select API from the drop-down menu.
<img src="https://i.ibb.co/vqDqB4s/Developer-Console-Add-API.png" alt="Developer Console Add API" width="100%" />
3) Select the Experience Cloud category and then select the Cloud Manager API.&nbsp;
<img src="https://i.ibb.co/jrJnbD7/Developer-Console-Cloud-Manager-API.png" alt="Developer Console Cloud Manager API" width="100%" />
4)&nbsp; For the final step we will generate a credential (JWT) and configure the API. Click Next to continue.&nbsp;
<img src="https://i.ibb.co/BnkRFNx/Developer-Console-Generate-Credential.png" alt="Developer Console Generate Credential" width="100%" />
5) Click Generate Keypair. Download and save the credential to your project folder.
<img src="https://i.ibb.co/XkzPjVP/Developer-Console-Download-Credentials.png" alt="Developer Console Download Credential" width="100%" />
6) Click Next to continue. Configuration options will vary depending on the API added to the project. For the Cloud Manager API, you will select the product profiles that should be associated with the credential and then save the configuration.
<img src="https://i.ibb.co/X2jyFBN/Developer-Console-Configure-API.png" alt="Developer Console Save API Configuration" width="100%" />
7) Return to your project workspace page and click the Download&nbsp; All button. This will generate a JSON representation of the project configuration. Save this to your project folder on your filesystem. We will use this to update our project code in the next and final step.
<img src="https://i.ibb.co/vsC6gX7/Developer-Console-Download-Project-Configuration-JSON.png" alt="Developer Console Download Project Configuration" width="100%" />
8) Open the terminal application and navigate to your project folder, then run the following command
<pre class="language-markup"><code>aio app use &lt;project-configuration-filename&gt;</code></pre>
The above command will tell Firefly to read the JSON configuration file downloaded in the previous step. Agree when prompted to overwrite the local .env and .aio files. This will bring your code project in sync with the project changes made within the Developer Console.&nbsp;
<h3>Summary</h3>
In this post, we reviewed what Project Firefly is and the technologies behind it. We also gained familiarity with the resources and tools that are used when working on Firefly projects like AIO CLI and Developer Console.&nbsp;
Now that the stage is set, in future posts, I will begin sharing Project Firefly solutions to address common use cases.&nbsp;

Building Cloud Native Applications with Project Firefly