Migrating Apps to DX Experience Cloud v1 SPAs
Overview
This tutorial documents one way to migrate App Builder applications originally initialized as standalone applications to DX Experience Cloud v1 Single-Page Applications (SPAs). Although this can be done by modifying only the project's configuration, following this tutorial will allow your application to closely mirror those initialized as DX Experience Cloud v1 SPAs.
Who is this tutorial for?
This tutorial is for Developers who can't view an application in Adobe Experience Cloud and may have initialized it as a standalone application. Applications built with App Builder can only be accessed through the App Builder Catalog in Adobe Experience Cloud if they have been initialized as DX Experience Cloud v1 SPAs.
How can I tell if my project is a standalone application?
Standalone applications will not have the App Builder ExcShell
sub-heading in Adobe Exchange; compare:
Standalone application
DX Experience Cloud v1 SPA
Understanding the difference
The Extension Migration Guide details the differences between standalone applications and DX Experience Cloud v1 SPAs, provides an overview of the directory structure for DX Experience Cloud v1 SPAs )under New file structure), and shows how to configure extension points.
Migration steps
Modify the local directory:
- Create a new
src/dx-excshell-1
folder - Move
web-src
,test
,e2e
,actions
undersrc/dx-excshell-1
- Create a new
Add the extension configuration:
Create
src/dx-excshell-1/ext.config.yaml
Copy the contents of
app.config.yaml
tosrc/dx-excshell-1/ext.config.yaml
Delete the
application
tag insrc/dx-excshell-1/ext.config.yaml
Shift the contents of
src/dx-excshell-1/ext.config.yaml
left one tab spaceAdd an
operations
tag at the top ofsrc/dx-excshell-1/ext.config.yaml
with the following contents:Copied to your clipboardoperations:view:- type: webimpl: index.htmlReplace the contents of
app.config.yaml
with:Copied to your clipboardextensions:dx/excshell/1:$include: src/dx-excshell-1/ext.config.yaml
Revoke the application - necessary only if application is published:
- If Admin:
- Navigate to Adobe Exchange
- Select Manage in the top toolbar
- Select Approved Apps in the top sub-toolbar
- Find the application in the list and click Revoke
- Click Revoke
- If not Admin:
- Request that Admin revoke
- Wait for Admin to revoke
- If Admin:
Re-initialize application
- Run
aio app init
- Select the organization
- Select the project
- Select All Templates
- Select the @adobe/generator-app-excshell template
- Overwrite package.json
- Overwrite .env
- Run
Deploy the application
- Run
aio app deploy
- Run
Submit the application for approval
- Navigate to the Adobe Developer Console
- Select the project
- Select the Production workspace
- Find and click Submit for Approval
- Fill out the relevant submission details
- Find and click Submit
Approve application
- If Admin
- Navigate to Adobe Exchange
- Select Manage in the top toolbar
- Select Apps Pending Review in the top sub toolbar
- Find your application in the list, click Review
- Note: Application should have
App Builder ExcShell
sub-heading
- Note: Application should have
- Fill in approval notes, click Approve
- If not Admin
- Request approval by Admin
- Wait for approval
- If Admin
The application should now be in the App Builder Catalog in Adobe Experience Cloud.
Next steps
Explore migration details in the Extension Migration Guide.
Return to the Guides Index.