Content Fragment Extension Queries | Community
Skip to main content
M
Mahesh_Gunaje
Level 7
March 24, 2025
Solved

Content Fragment Extension Queries

  • March 24, 2025
  • 1 reply
  • 777 views

Hello Team,

 

I have few queries related to Content Fragment Editor extension. I am new to App Builder, CF Editor Extension project.

 

1: Pipeline build deployment:

I have these Adobe IO Runtime workspaces: Local, Dev, Stage, Production.

Local is used for POC purpose. deployed the extension project here(using the command: aio app deploy). Able to test using the url:

https://experience.adobe.com/?devMode=true&ext=https://123456-sample-local.adobeio-static.net&repo=author-p123456-e66666.adobeaemcloud.com#/@xyz/aem/cf/editor/ ... so on

How to do deployment using pipeline? How to provide environment details.

 

2: Testing after deployment to Dev, Stage

Now, my testing team, authroing team wants to test the feature in dev, stage environemnt. Do they need to use URL with devMode?

example: 

https://experience.adobe.com/?devMode=true&ext=https://123456-sample-Dev.adobeio-static.net&repo=author-p123456-e66666.adobeaemcloud.com#/@xyz/aem/cf/editor/ ... so on

 

https://experience.adobe.com/?devMode=true&ext=https://123456-sample-Stage.adobeio-static.net&repo=author-p123456-e66666.adobeaemcloud.com#/@xyz/aem/cf/editor/ ... so on

Or is there any better way to test?

 

cc @daniel-strmecki  @sarav_prakash  @amitvishwakarma  @amanath_ullah 

Thanks in advance

    Best answer by sarav_prakash

    Hi @mahesh_gunaje , sure, lets breakdown the steps per environment

     

    Step Local Stage Production
    Development Develop extension as web action. Refer here. -do- -do-
    Deployment run command `aio app run` Setup AIO CI-CD pipeline. Refer here.. You ll create a github action. When commit is pushed into stage branch, the action should deploy into AIO stage workspace. For .env, use Github Secrets. I have used Azure vault KV and reading from vault. Same as stage. `aio app deploy` command to deploy to production. Additional step is to approve from Adobe App Registry. Follow here.
    Testing

    Test with URL https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080

     

    Similar to local, test from URL https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://245265-562turquoiseshrimp-stage.adobeio-static.net/index.html

     

    		 No extra querystring required. Upon launching CF editor, the extensions will load

     

    So to reply to your questions,

    1. Pipeline deployment, please refer here. 

    2. Testing, till stage environment, testing is by manually adding query string. For production, we use Adobe App Registry to load the extensions directly. 

    1 reply

    sarav_prakash
    Community Advisor
    sarav_prakashCommunity AdvisorAccepted solution
    Community Advisor
    March 24, 2025

    Hi @mahesh_gunaje , sure, lets breakdown the steps per environment

     

    Step Local Stage Production
    Development Develop extension as web action. Refer here. -do- -do-
    Deployment run command `aio app run` Setup AIO CI-CD pipeline. Refer here.. You ll create a github action. When commit is pushed into stage branch, the action should deploy into AIO stage workspace. For .env, use Github Secrets. I have used Azure vault KV and reading from vault. Same as stage. `aio app deploy` command to deploy to production. Additional step is to approve from Adobe App Registry. Follow here.
    Testing

    Test with URL https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080

     

    Similar to local, test from URL https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://245265-562turquoiseshrimp-stage.adobeio-static.net/index.html

     

    		 No extra querystring required. Upon launching CF editor, the extensions will load

     

    So to reply to your questions,

    1. Pipeline deployment, please refer here. 

    2. Testing, till stage environment, testing is by manually adding query string. For production, we use Adobe App Registry to load the extensions directly. 

      M
      Mahesh_GunajeAuthor
      Level 7
      March 24, 2025

      Thanks @sarav_prakash  for your quick help.

       

      As usual, few queries from my side:

      1: I have tested in local, dev, stage. (by appending the devMode details)

      Now, I have deployed to production. then Approval process. Done.

      Feature works fine for my prod sites. Now, if I open the dev, qa or stage portal content fragment, I will see the changes here too without using the devMode in URL. Am I right? 

       

      Note: I was referring to this link: https://medium.com/tech-learnings/aem-cloud-enabling-dynamic-data-fields-in-the-new-content-fragment-editor-a3b6f6d70b19

      Note: This is "member only article" So, adding the necessary points here.

      Approval Process: Submit an internal approval request for the extension.
      A System Administrator within the organization must approve the request. Once approved, the extension will be enabled across all environments.

       

      As discussed, once the extension is approved, it will be enabled across allenvironments. There is no direct way to control this behavior, but you can modifythe logic in src/aem-cf-console-admin-1/websrc/src/components/ExtensionRegistration.js to restrict the extension to specificenvironments if needed.

      Queries: Is this right approach to control this behaviour? I mean feature should be available only in my prod site (For other lower environment, I need to use devMode in the URL.

       

      Thanks

       

       

        M
        Mahesh_GunajeAuthor
        Level 7
        March 24, 2025

        Hi @sarav_prakash 

         

        Forgot to mention few points in above query.

        1: Is it good to write conditions in my Content Framgent Extension project to control the logic "only for production"?. Not sure, if I write this condition, will it work for lower env. (by including devMode in the URL ?) 

         

         

        To restrict the extension to specificenvironments if needed: I think, this is because to control the rate limit of Adobe IO runtime project?

         

        Edited previous query here: As per above code snippet, I think its possible  to restrict my  CF extension logic only to the necessary web app(i mean prod).

        In above snapshot, <CUSTOMER_AEM_HOST> environment variable is used. Is it possible to setup this variable per each environement? If yes, whereI can do?

         

        Thanks

          Terms & ConditionsAccessibility statement

          Loading footer...