App Builder IFrame | Community
Skip to main content
H
hansle2
January 28, 2025
Question

App Builder IFrame

  • January 28, 2025
  • 3 replies
  • 777 views

Is there any option for app builder to embed an iframe of an external application authenticated to the store similar to how Shopify & BigCommerce apps are developed, or is there a hard requirement to use Adobe I/O serverless functions for any backend logic, and CDN hosted JS for the frontend?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

tmj
Adobe Employee
tmjAdobe Employee
Adobe Employee
January 30, 2025

Hi @hansle2, I have forwarded your question to the right team, let's wait for their response.

Thanks
Manik

 

N
Adobe Employee
naomirobichaudAdobe Employee
Adobe Employee
January 30, 2025

Embedding an SPA into Commerce via App Builder requires the use of our UI SDK: https://developer.adobe.com/commerce/extensibility/admin-ui-sdk/

Those apps need to be developed using our App Builder stack - https://developer.adobe.com/app-builder/docs/guides/

    sarav_prakash
    Community Advisor
    sarav_prakashCommunity Advisor
    Community Advisor
    April 19, 2025

    Hi @hansle2 , there is no hard requirement to use AIO only for backend logic. Appbuilder is only infrastructure, providing serverless ability to deploy our own apps. In your case, you are wanting to build a  single page, loading an iframe. Steps are very easy

    1. Create a new app builder project from developer.adobe.com.
    2. Download its stage workspace json file

       

    3. From terminal, create new local project by running command `aio app init`
    4. Select your new App Builder project and its stage workspace
    5. From template, choose a ui template. ui should suffice, action or event is not required for you
    6. Now, we can delete rest of boilerplate code. Just keep the index.html.
    7. In the index.html add an example iframe.<!DOCTYPE html> <html lang="en"> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <iframe style="border-radius:12px" src="https://open.spotify.com/embed/episode/54J1NGQhNPWyWK3mQSDEaD?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" l oading="lazy"></iframe> </body> </html> ​Delete generated react code and js. Like this 

       

    8. Last step, after `npm i`,  just run `aio app run`. The app will start from https://localhost:9080 and iframe will load. You can `aio app deploy` and run from the AppBuilder runtime

    Now here, we are running a simple html from Appbuilder serverless. No integration or BE done. AppBuilder everytime, just serves the index.html. Try to build similar, playaround and add more flavors per your requirement. 

      Terms & ConditionsAccessibility statement

      Loading footer...