This App Builder example pulls Content Fragments from AEM and displays them in different layouts.
![cfpreview-screenshot](https://private-user-images.githubusercontent.com/1145871/248755389-6db75824-cd26-43cb-b686-e26b03ba8e21.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1OTIwMjUsIm5iZiI6MTcyNDU5MTcyNSwicGF0aCI6Ii8xMTQ1ODcxLzI0ODc1NTM4OS02ZGI3NTgyNC1jZDI2LTQzY2ItYjY4Ni1lMjZiMDNiYThlMjEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjVUMTMxNTI1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzhhODM0ZjY4MmEzY2EyZDI5M2NlM2E0ZmY3MjU5NGE0NmUxYTdjOGVmZTZmMjc1NmIxZmM1NTliMzVjMTZiZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.xWSRXqd9EJn5hWY40-DwjV47ywNeMe6JQg2E4SabSxQ)
- Populate the
.env
file in the project root and fill it as shown below - Within the AEM UI, configure a Persisted Query that returns that conforms with the default data in App.js
- Edit the Content Fragment Model Default Preview URL Pattern to point to the path to this deployed app. eg https://experience.adobe.com/#/@myorg/custom-apps/myappname?cf=${contentFragment.path}&variation=${contentFragment.variation}
aio app run
to start your local Dev server- App will run on
localhost:9080
by default
By default the UI will be served locally but actions will be deployed and served from Adobe I/O Runtime. To start a
local serverless stack and also run your actions locally use the aio app run --local
option.
aio app deploy
to build and deploy all actions on Runtime and static files to CDNaio app undeploy
to undeploy the app
You can generate this file using the command aio app use
.
# Specify your secrets here and rename to .env
# This file must not be committed to source control
## Adobe I/O Runtime credentials
AIO_runtime_auth=XXXXXXXXXXXXXXXXXXXX
AIO_runtime_namespace=XXXXXX
AIO_runtime_apihost=https://adobeioruntime.net
## Used in App.js & Sidebar.js
AEM_AUTHOR=https://author-pXXXXX-eXXXXXX.adobeaemcloud.com
## Used in App.js
AEM_PersistedQuery=/graphql/execute.json/XXXXXXX/OfferByPath
#Used in Sidebar.js
AEM_CF_Editor_Path=https://experience.adobe.com/?repo=author-pXXXXX-eXXXXXX.adobeaemcloud.com#/@XXXXXX/aem/cf/editor/editor
AEM_CF_Admin_Path=https://experience.adobe.com/?repo=author-pXXXXX-eXXXXXX.adobeaemcloud.com#/@XXXXXX/aem/cf/admin/
## Used in Layouts
AEM_DM=https://XXXXX.scene7.com/is/image/XXXXXX/