Edit in GitHubLog an issue

Creating your First Project Firefly Application

In this tutorial, we'll guide you through the following steps to give you an introduction on how to set up and develop a Project Firefly Application.

  1. Setting up Local Environment
  2. Creating a new Project on Adobe Developer Console
  3. Signing in from the CLI
  4. Bootstrapping new App using CLI
  5. Anatomy of a Project Firefly Application
  6. Developing the Application
  7. Deploying the Application

If you run into any issues during development, please first refer to the Common Issues section on this page. If that does not resolve your issue, please refer to our Support Channels.

1. Setting up Local Environment#

Please always ensure your local environment and tooling is up to date to avoid any possible issues. The instructions can be located at Setting up Your Environment. Ideally while setting up your environment, you requested access to Project Firefly as described at How to Get Access to Project Firefly and your request has been approved. If your request has not yet been approved, you may want to wait before proceeding with the steps in this document.

2. Creating a new Project on Developer Console#

Adobe Developer Console gives you access to APIs, SDKs and developer tools to build on, integrate, and extend Adobe products. In Project Firefly, you would need access to Adobe I/O Runtime credentials which would be used for deploying your application, and access to API credentials if you want to access any Adobe APIs in your application.

Follow the instructions to set up your project:

  1. Navigate to Adobe Developer Console. Adobe Developer Console

  2. Use the Org Switcher on the upper right corner to ensure or to select the Org you want to use. Org Switcher

  3. Once you are in the correct organization, Under Quick Start, click on the option to Create project from template. Note that if you don't have the Create project from template option, it might be because your request to access Project Firefly has not yet been approved. If you already submitted a request, you may want to wait for it to be approved. If you have not yet submitted a request, you might want to do that, as described at How to Get Access to Project Firefly.

  4. Select Project Firefly from the list of templates. Select Template

  5. Enter Project Title and App Name for your templated project.

    Copied to your clipboard
    1- `Project Title` is used to identify this project within [Adobe Developer Console](/console) and in [CLI](https://github.com/adobe/aio-cli). A default value is suggested on this screen, but we recommend using a meaningful and distinguishable project title.
    2- `App Name` will be used as a unique identifier for your application and this value cannot be changed once project set up is complete.
    3- By default, the "Include Runtime with each workspace" checkbox is checked, which means each workspace that is created is automatically provisioned with a unique [Adobe I/O Runtime](/apis/experienceplatform/runtime) namespace allowing each developer to work within their own [Adobe I/O Runtime](/apis/experienceplatform/runtime) environment. If you deselect the checkbox and do not opt for automatic inclusion of [Adobe I/O Runtime](/apis/experienceplatform/runtime), you will need to enable it manually for each individual workspace. You cannot auto-add [Adobe I/O Runtime](/apis/experienceplatform/runtime) to all workspaces after the initial set up is complete.

    You can manually remove Adobe I/O Runtime from individual workspaces later if you determine that it is not needed.

    Copied to your clipboard
    1- Click `Save` when ready.
    2![Select Template](../images/console-4.png)
  6. You should see a new project generated with 2 default Workspaces.

    • Workspaces can be used to manage different deployment environments (dev, qa, stage, prod) for your application and to provide individual working environment for each developer on the project. Workspace is where you will connect services and get the credential details needed to connect to Adobe APIs. Connected services can differe from workspace to workspace, and the credentials used within each workspace is not shared across workspaces.
    • Each Project Firefly project has two default workspaces: Production and Stage. You can add more workspaces as needed. The Production workspace is special, as it is used for the submission and distribution flow. When you’re ready to deploy your app, you will submit it for approval from the Production workspace. Project Preview
  7. Create a new workspace or select an workspace to start adding APIs and Events that you would need for your application. Workspace

To read more about Adobe Developer Console, please refer to Console Documentation.

3. Signing in from CLI#

Once you have your project set up in Adobe Developer Console, it is time to move onto your local environment. You can always go back to Adobe Developer Console to modify your project later.

  1. On your machine, navigate to the Terminal and enter

    Copied to your clipboard
    $ aio login
  2. A browser window should prompt open, asking you to sign in with your Adobe ID. If the window did not automatically open, you can also copy paste the URL printed in your browser to log in.

    Copied to your clipboard
    1$ aio login
    2Visit this url to log in:
    3https://aio-login.adobeioruntime.net/api/v1/web/default/applogin?xxxxxxxx
  3. Once you've logged in, you can close the browser window and go back to your Terminal. You would see a string printed in the terminal. This is your user token. It is automatically stored in CLI config, allowing the CLI to use the token to talk to Adobe Developer Console.

    Copied to your clipboard
    eyJ4NXUiOixxxxxxxxxxxxxxxxxxx
  4. You would now be able to start building Project Firefly Applications with the CLI.

4. Bootstrapping new App using the CLI#

There are two sample flows listed below as we understand some developers may not have access to Adobe Developer Console as entitled Enterprise Organization users but still want to look at the project or to import credentials later.

4.1 Developer is Logged in as Enterprise Organization user#

4.1.1 Initializing your project with Extension Points#

  1. In your Terminal, navigate to where you want to initialize your project and type in the following command in your Terminal:

    Copied to your clipboard
    aio app init <app_name>

    You will be prompted with a few questions about how you want your app to be boostrapped and configured:

  2. Select Organization that you'd like to use for this new Project Firefly Application. Navigate through the list to find the project and workspace you just created. If you have a lot of organizations, you can also start typing in keywords to shorten the list.

    Copied to your clipboard
    1$ aio app init helloworld
    2Retrieving information from Adobe Developer Console..
    3? Select Org Adobe IO DEV
  3. Once you have selected org, project and workspace, next, you will be prompted to select the product you would like to extend:

    Copied to your clipboard
    1? Which extension point(s) do you with to implement?
    2select components to include (Press <space> to select, <a> to toggle all, <i> to invert selection)
    3❯◉ Firefly Experience Cloud Shell
    4 ◉ AEM Asset Compute v1
  4. You will then be prompted to select the Project you'd like to use for this new Project Firefly Application. Navigate through the list to find the project you just created. If you have a lot of projects, you can also start typing in keywords to shorten the list.

    Copied to your clipboard
    ? Select Project Demo Project SAXU
  5. Once you complete this select, you should see the build process kicking off with necessary npm dependencies are getting installed.

    Copied to your clipboard
    1create package.json
    2create manifest.yml
    3create .aio
    4create README.md
    5
    6.......
    7
    8found 0 vulnerabilities
    9
    10✔ App initialization finished!
  1. Now your project is initialized! Go into the folder you just created, and you can see a number of files generated.

    Copied to your clipboard
    1$ cd helloworld
    2$ ls
    3README.md src app.config.yaml package-lock.json test
    4e2e node_modules package.json web-src
  2. Note that you still can add/remove the extension points, back-end actions, SPA front-end or Github workflows from your application later by respectively using the aio app <add|delete> ext, aio app <add|delete> action, aio app <add|delete> web-assets and aio app <add|delete> ci commands within your application folder.

4.1.2 Initializing an empty project#

  1. In your Terminal, navigate to where you want to initialize your project and type in the following command in your Terminal:

    Copied to your clipboard
    aio app init <app_name> --no-extensions

    You will be prompted with a few questions about how you want your app to be boostrapped and configured:

  2. Select Organization, Project and Workspace that you'd like to use for this new Project Firefly Application. Navigate through the list to find the project and workspace you just created. If you have a lot of organizations / projects / workspaces, you can also start typing in keywords to shorten the list. Upon completing the selection, the CLI automatically downloads a console.json file that contains all the credentials from your workspace to be used in your Project Firefly project.

    Copied to your clipboard
    1$ aio app init helloworld
    2Retrieving information from Adobe Developer Console..
    3? Select Org Adobe IO DEV
    4? Select Project Demo Project SAXU
    5? Select Workspace saxudevenv
    6 create console.json
  3. Once you have selected org, project and workspace, next, you will be asked to select app features to enable:

    Copied to your clipboard
    1You are about to initialize the project 'demoproject'
    2Generating code in: /Users/sarahxxu/Dropbox/Development/helloworld
    3? Which Adobe I/O App features do you want to enable for this project?
    4select components to include (Press <space> to select, <a> to toggle all, <i> to invert selection)
    5❯◉ Actions: Deploy Runtime actions
    6 ◉ Events: Publish to Adobe I/O Events
    7 ◉ Web Assets: Deploy hosted static assets
    8 ◉ CI/CD: Include GitHub Actions based workflows for Build, Test and Deploy

    Each option indicates a feature you can enable for your Project Firefly Application. You can select one or all of the options depending on the application you intend to build. We recommend that you select all for now to fully explore all the options.

    • Actions: Deploy Runtime actions: adding the boilerplate for backend serverless actions on Adobe I/O Runtime
    • Events: Publish to Adobe I/O Events: adding the boilerplate for a serverless action that publishes Custom I/O Events
    • Web Assets: Deploy hosted static assets: adding the boilerplate for frontend React-Spectrum SPA and static assets
    • CI/CD: Include GitHub Actions based workflows for Build, Test and Deploy: adding the boilerplate for Github Actions supporting CI/CD process of the application
  4. If you included Actions in your last selection, you will be asked to select one or more sample actions to be generated along with the new app.

    Copied to your clipboard
    1```
    2? Which type of sample actions do you want to create?
    3select type of actions to generate (Press <space> to select, <a> to toggle all, <i> to invert selection)
    4❯◯ Adobe Analytics
    5 ◯ Adobe Experience Platform: Realtime Customer Profile
    6 ◉ Generic
    7```
    8
    9These sample actions help you quickly get started and show best practices for integrating with [Adobe APIs](/apis) using [SDK](https://github.com/adobe/aio-sdk) in your applications.

    Note that you may not see all the options listed below on your command line, because we make recommendations based on what credentials you have added in the selected workspace. Similar to the last step, you can select one or all of the options listed:

    Copied to your clipboard
    1- **Adobe Target**: including dependencies and examples of accessing the [Adobe Target API](https://developers.adobetarget.com/api/#admin-apis)
    2- **Adobe Analytics**: including dependencies and examples of accessing the [Adobe Analytics 2.0 API](https://adobedocs.github.io/analytics-2.0-apis/)
    3- **Adobe Audience Manager: Customer Data**: including dependencies and examples of accessing the [Adobe Audience Manager Customer Data API](https://docs.adobe.com/content/help/en/audience-manager/user-guide/api-and-sdk-code/api.html)
    4- **Adobe Campaign Standard**: including dependencies and examples of accessing the [Adobe Campaign Standard (ACS) API](https://docs.adobe.com/content/help/en/campaign-standard/using/working-with-apis/get-started-apis.html)
    5- **Adobe Experience Platform: Realtime Customer Profile**: including dependencies and examples of accessing the [Realtime Customer Profile API of Adobe Experience Platform](/apis/experienceplatform/home/api-reference#!acpdr/swagger-specs/real-time-customer-profile.yaml)
    6- **Generic**: a generic back-end action with hello world flow that can be reused and modified e.g. for simple serverless computing or 3rd party API integration
  5. If you included Web Assets under Adobe I/O App features you will be given two choices. One to include React Spectrum based UI template or a Vanilla HTML/JS one

    Copied to your clipboard
    1? Which type of UI do you want to add to your project? select template to generate (Use arrow keys)
    2❯ React Spectrum 3 UI
    3 Raw HTML/JS UI
    • The React Spectrum 3 UI template will add a React based UI with React Spectrum components included.
    • The Raw HTML/JS UI will add a Valinna HTML/JS/CSS UI with Spectrum CSS styles included.

    Both the templates comes with boilerplate code needed to integrate your Project Firefly application with Adobe Experience Cloud

  1. We'll ask you to define the name for the instance of each selected sample actions. You can keep the default name or specify your own.

    Copied to your clipboard
    1? We are about to create a new sample action that interacts with the Adobe Analytics API
    2how would you like to name this action? analytics
    3? We are about to create a new sample action that interacts with the Adobe Experience Platform: Realtime Customer Profile
    4how would you like to name this action? customer-profile
    5? We are about to create a new sample action that showcases how to access an external API
    6how would you like to name this action? (generic)
  2. Once you complete this select, you should see the build process kicking off with necessary npm dependencies are getting installed.

    Copied to your clipboard
    1create package.json
    2create manifest.yml
    3create .aio
    4create README.md
    5
    6.......
    7
    8found 0 vulnerabilities
    9
    10✔ App initialization finished!
  1. Now your project is initialized! Go into the folder you just created, and you can see a number of files generated.

    Copied to your clipboard
    1$ cd helloworld
    2$ ls
    3README.md console.json manifest.yml package-lock.json test
    4actions e2e node_modules package.json web-src
  2. Note that you still can add/remove the back-end actions, SPA front-end or Github workflows from your application later by respectively using the aio app <add|delete> action, aio app <add|delete> web-assets and aio app <add|delete> ci commands within your application folder.

4.2 Developer is not Logged in as Enterprise Organization user#

Developer with a Console config file#

This flow is intended for developers who do not have access to Adobe Developer Console as entitled Enterprise Organization users, likely due to permission issues, but can get credentials that are tied to a Project Firefly workspace from an entitled Enterprise Organization administrator or developer.

For this flow to work, the developer should ask someone with access to set up a project and a workspace following the last few sections. With the workspace correctly set up, the credentials can downloaded by authorized Adobe Developer Console users through the Download all button in Workspace overview.

Workspace Download

  1. In your Terminal, navigate to where you want to initialize your project and type in the following command:

    Copied to your clipboard
    aio app init <app_name> --import <path_to_config_file>
  2. Select project configuration options (see section above)

  3. When your project is initialized, go into the folder you just created, and you can see a number of files generated.

    Copied to your clipboard
    1$ cd helloworld
    2$ ls
    3README.md e2e node_modules package.json web-src
    4actions manifest.yml package-lock.json test
  4. When you generate a project with a downloaded configuration file without logging into Adobe Developer Console on your CLI, everything should be the same. We use the values from the downloaded file to pre-populated values in your .env and .aio. The only difference you will notice is the missing config.json file because that's the file you used to generate this project.

Developer without any credentials#

This flow is intended for developers who have no access or credentials whatsoever but still want to look at the code.

  1. In your Terminal, navigate to where you want to initialize your project and type in the following command in your Terminal:

    Copied to your clipboard
    aio app init <app_name> -y

    The -y flag allows user to skip all questions and generates a sample project with only the generic sample action.

  2. You should still be able to see similar files generated, but none of the config files will be pre-polulated.

    Copied to your clipboard
    1$ cd helloworld
    2$ ls
    3README.md e2e node_modules package.json web-src
    4actions manifest.yml package-lock.json test
  3. You will not be able to run or to deploy your application by default because there is no credential provided.

5. Anatomy of a Project Firefly Application#

Now that your project is initialized, let's open the project in your favorite IDE. We recommend using VSCode. You can easily open the project by entering code <app-name>, or opening VSCode -> Open... -> select app folder.

You should be able to see these folders and files in your project:

  1. src: Instead of one folder for all actions and all web-src, you will see individual folders under src for each Extension point you have selected. For instance, a dx-excshell-1 folder for your Experience Cloud SPA actions and frontend resources.
    • Under each folder, you should be able to see both the actions and the frontend code when application. In addition, you should be able to see ext.config.yaml. This file contains all the action and extension configuration for the extension point where it's located. This individual configuration allows for more flexibility in defining and managing individual extension points. You can see that this file is also imported to app.config.yaml as that's the master config file.
    • The action definition in this file shoud adhere to the OpenWhisk deployment YAML specification.
    • Once defined, the CLI use this file to deploy or redeploy actions. You might see values like $CUSTOMER_PROFILE_TENANT listed under environments in this file. These are environment variables that you can define in your .env file.
  2. test: this folder is intended for back-end action unit tests and integration tests
  3. e2e: this folder is intended for end-to-end tests
  4. app.config.yaml: this is the master configuration file. It follows the same principle as the individual ext.config.yaml, and compiles these individual file into one comprehensive config upon application build.
  5. lib: this folder will contain all the shared utility actions across different extension points.
  6. package.json: this file describes project definition and various metadata relevant to the project.
    • It is used to give information to npm that allows it to identify the project as well as handle the project's dependencies. Learn more here.
  7. .aio: this file contains config variables that are useful for the CLI to facilitate the app, e.g. supported API services. This file can be committed to a source code versioning system.
    • You can manually update the file or use the aio config commands to add or to remove configurations. Learn more about the Config Plugin.
  8. .env: this file contains environment variables that are useful for the app during development, e.g. Adobe I/O Runtime credentials and Adobe Product API tenant specifics (API key, secrets, etc.)
    • The environment variables defined here can be used in the application (e.g. in ext.config.yaml or app.config.yaml). If you've set up credentials for the selected workspaces, you should be able to see some of those values prepopulated upon initialization, like AIO_runtime_auth and AIO_runtime_namespace.
    • This file is automatically included in .gitignore. It is not intented be shared given the credentials and secrets listed.

6.Developing the Application#

6.1 Running the Application#

To run the application locally, use one of the following commands:

Copied to your clipboard
aio app run --local

This will deploy the actions to a local OpenWhisk instance, which the CLI will autmomatically download and install. The SPA will be run on the local machine.

Copied to your clipboard
aio app run

This will deploy the actions to Adobe I/O Runtime, while running the UI part on the local machine.

(First time users) Accepting the Certificate#

If you are using this application for the first time, you will see a message similar to

Copied to your clipboard
1success: generated certificate
2A self signed development certificate has been generated, you will need to accept it in your browser in order to use it.
3Waiting for the certificate to be accepted.... timed out

This message pops up because we use a development SSL certificate for secure communication. Understand more about the purpose of this certificate here.

If you see this message, please navigate to https://localhost:9080, you should see a screen similar to this. Certification

Click on Advanced, the nex screen may vary from browser to browser, but you should see a screen like this, where you can click on Proceed to localhost (unsafe) to accept the certificate. Certification

You may need to exit the current process and run aio app run again.

Proceeding to the Application on localhost#

For users who have accepted the certificate in the past, your should see the following process running in your Teminal instead. You can see that your backend actions are being deployed to Adobe I/O Runtime (or to the local OpenWhisk instance if the --local option has been used.

Copied to your clipboard
1$ aio app run
2> Local Dev Server
3ℹ using remote actions
4ℹ redeploying actions..
5......
6ℹ writing credentials to tmp wskdebug config '.wskdebug.props.tmp'..
7ℹ injecting backend urls into frontend config
8ℹ starting local frontend server ..
9ℹ local frontend server running at https://localhost:9080
10ℹ setting up vscode debug configuration files..
11ℹ press CTRL+C to terminate dev environment

There are two URLs printed:

Copied to your clipboard
1To view your local application:
2 -> https://localhost:9080
3To view your deployed application in the Experience Cloud shell:
4 -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080

The first URL allows you to see your standalone application on localhost (by default, but the port is configurable). The second URL places your local application in the context of the Experience Cloud UI for preview.

While most changes in your code get updated in real-time when your application is running, the .env file is not amongst them. Running the application depends on .env file to provide necessary credentials, so the file is unmodifiable while the app is running. When your app is running, the .env file is backed up, and a new one is written with specific values. When you exit the process, the original .env is restored.

As indicated in the message, when you are done, you can press CTRL+C to terminate the local development environment.

To have the application running local completely, which means the actions will run on a local deployed (standalone) version of OpenWhisk instead of on Adobe I/O Runtime, use aio app run --local. Some additional dependencies are required if you have not installed them yet, see Optional tools section in Setting up Your Environment if you want to set them up manually.

Usually, we recommend running your applications with deployed Adobe I/O Runtime actions, as your application should run on Adobe I/O Runtime in production. However, if you need to build complex actions or sequencing, the --local flag is handy in allowing you to further debug the application locally. Please see the Debugging the Application section below for more info.

6.2 Trying the Sample Application#

When you access https://localhost:9080, you should see the sample application deployed. Hello World

This simple SPA contains links to documentation and allows you to run your backend actions for tests. To try it, use the selection box to pick the action you'd like to invoke. You can also pass request headers and parameters from the corresponding input fields in the SPA UI.

All actions require Authorization and x-gw-ims-org-id in the headers by default. In your project code, if you navigate to manifest.yml, you can see that a require-adobe-auth annotation is set to true for all the sample actions. Having this flag enabled enforces a valid user token be used to invoke this action. We recommend always having this enabled for security reasons. You can learn more about this in our Security Overview.

  1. With the require-adobe-auth annotation set to true, you need to pass in a valid user token and corresponding organization ID to invoke your action. You can easily retrieve the token from your CLI by typing in aio login, and the org ID (look for some_hash@AdobeOrg) from the workspace details on Adobe Developer Console or from the URL of Adobe Admin Console (make sure that you have the correct organization selected in the top right corner). You can also list all the organizations you belong to and their org ID from your CLI by typing in aio console org list.

  2. Put the token and org ID into this following format. {"Authorization":"Bearer <token_from_cli>","x-gw-ims-org-id":"<org-id-from-console>"}

  3. Go back to your browser, and put the joined value in the headers input field. You should now be able to invoke actions that does not require additional params (like generic). Hello World

Note: If you open your application in the Experience Cloud Shell using the second link provided by the CLI, your Experience Cloud Shell user token will automatically be available to the SPA UI and passed by this one to the underlying Adobe I/O Runtime actions of your application. This is a very useful feature of our SPA UI template, which integrates for you with the client-side API of the Experience Cloud Shell.

The other sample actions require futher paramaters to be invoked. For instance, if you try to invoke analytics with only the authorization header, you would see an error similar to "error": "missing parameter(s) 'apiKey,companyId'". This is because these sample actions use Adobe API that requires those params before it can be invoked.

  1. Each sample action requires different params. Some only needs an API key, some also requires the tenant ID or more information. Go into the action code in actions folder to learn more.
  2. The API key is a common required field. If you have the service added in the current workspace, it is easily retrievable in .env or console.json file.
  3. Other fields are not accessible directly through the CLI, like tenant ID for Target and for Campaign Standard or company ID for Adobe Analytics. Please refer to product documentation to locate these value for your Org.
  4. Once you have these parameters handy, construct them in the expected format {"key": "value"} and paste into the params. You should now be able to invoke these actions.

6.3 Debugging the Application#

We integrated our CLI with an open source project wskdebug to support our debug functionalities. This tool allows you to develop and debug OpenWhisk actions in your favorite IDE or debugger with a fast feedback loop. It features:

  • Full debugging of actions of the respective language runtime
  • Automatic code reloading
  • LiveReload for web actions
  • Auto-invoking of actions on code changes
  • Or running any shell command such as a curl request on code changes

Please visit our Debugging Firefly Apps Codelab to set up your local environment and go through step-by-step instructions.

If the local development is run without the --local option, the action you are debugging is running directly on Adobe I/O Runtime. When the --local option is used, the actions are debugged in the standalone OpenWhisk instance running locally. In both cases, Docker is required on your local machine so that the remote or locally mounted actions get proxied in the local Docker container. Learn more about what you can do in debug mode.

6.4 Retrieving Logs for the Application#

To see your application logs, use the command aio app logs. By default, only the logs of the latest activation is fetched. If you want to see a more extensive list of logs, use the --limit flag to define the number of recent activations to be fetched.

Read more at Managing Application Logs

6.5 Testing the Application#

The bootstrapped application comes with sample implementations for both unit and end-to-end tests. You can execute these tests locally by using aio app test and aio app test -e, which will respectively run the unit and end-to-end tests against the bootstrapped codebase.

Of course, as you will modify and extend the code of your application, you will also need to update the tests accordingly.

We are using jestJS for the unit tests of the CLI, SDK and bootstrapped application. It is however possible to change the implementation to your preferred framework.

CI/CD for Project Firefly Applications also explains how to execute these tests in the context of a CI/CD pipeline.

7 Deploying the Application#

Once the application is in a good shape, it can be fully deployed to your development workspace. This is achievable with a single command.

Copied to your clipboard
aio app deploy

This command may take a minute or two as behind the scenes the CLI is building and deploying:

  • The actions defined in manifest.yml into Adobe I/O Runtime
  • The frontend built files and assets into our out-of-the-box CDN

The CLI output details this process:

Copied to your clipboard
1> Build actions
2ℹ dist/actions/analytics.zip
3...
4
5> Build static files
6ℹ dist/web-src-prod/index.html
7...
8
9> Deploy actions
10ℹ Info: Deploying package [demoproject-0.0.1]...
11...
12
13> Deploy static files
14ℹ index.html
15
16...
17
18Your deployed actions:
19 -> demoproject-0.0.1/__secured_analytics
20...
21
22To view your deployed application:
23 -> https://<namespace>.adobeio-static.net/<packagename>/index.html
24To view your deployed application in the Experience Cloud shell:
25 -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://<namespace>.adobeio-static.net/<packagename>/index.html
26Well done, your app is now online 🏄

Note the last section of the output To view your deployed application. There are 2 urls of the app shown by default, which allow access either to the CDN host or Experience Cloud Shell. In the latter case, The URL format of the app should follow https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=<your-app-url>.

You can also undeploy your app with aio app undeploy. To learn more about deployment, please refer to Deployment Overview. To automate your build, deploy and build process with our out-of-the-box CI/CD GitHub actions, please refer to CI/CD for Project Firefly Applications.

Common Issues#

  1. When in doubt, please first ensure your CLI and all plugins are up to date. For the CLI, you can check the version through aio -v and compare it with npm show @adobe/aio-cli version. If your CLI is outdated, update it by running npm install -g @adobe/aio-cli. After that, you can simply run aio update to ensure all core plugins are updated.

  2. Validation error. If you see the following error, it is because you did not pass in an authorization header to an action expecting one. See Trying the Sample App section above or learn more about this in our Security Overview.

    Copied to your clipboard
    {"error": "cannot validate token, reason: missing authorization header"}
  3. Missing param error. If you see the following error, it is because you did not pass in required params to an action expecting one. See Trying the Sample App section above.

    Copied to your clipboard
    {"error": "missing parameter(s) 'apiKey,companyId'"}`

Next steps#

For more code examples and use cases, please refer to the Resources page.

Copyright © 2021 Adobe. All rights reserved.