Expand my Community achievements bar.

App builder Todo App Sample - local development


Level 3



I am researching Adobe App Builder and I am working with a sample ToDo app tutorial: https://developer.adobe.com/app-builder/docs/resources/todo-app/


This app is using IMS profile and allows to create user todo list. When I run this app with aio app run it shows me two options to view my deployed application: via localhost and via experience.adobe.com


When I open the app via experience.adobe.com domain I have the IMS profile available (I am logged in to the site) and the app works fine but when I access the app via localhost this is not available which means that I can not work on the app this way.


My questions:

1. How should I work with this locally? Should I only use the app via https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080 url ?

2. Is there a way to provide user context to the local env ?

3. How could we automate testing apps build for App builder? I just wonder how could we set up Cypress or any other framework along with App builder site. 





Topics help categorize Community content and increase your ability to discover relevant content.

1 Reply


Level 1

1. You are correct, the localhost server is only here to provide the files for the Unified Shell (experience.adobe.com). The Unified Shell is indeed connected to our Identity Manager (IMS) which will inject your access token to you application. Accessing directly your localhost app, you will be able to access only content that do not require an IMS access token, like if you use only public APIs or provide your own credentials for a 3rd party service.


2. The way to provide the user context is the Unified Shell.


3. Using jest for testing is pretty effective. Most template on AIO comes with some basic testing: unit testing with mocks that can be run anywhere and end-to-end testing with the deployed app in the e2e folder.

I am not familiar with Cypress, but from a quick read-over the docs, I would go with the following strategy. You should create an AppBuilder project with multiple workspaces, Production and Staging by default. You coud deploy your latest version of the code in Staging and there run your Cypress tests, if they pass you could then deploy to production. I don't know wether you could run that Cypress testing in GitHub Actions though.