Getting started
Creating a new project
3 min
In this guide you'll create a new App Builder Project based on my template. Once approved and published to production the app will show up in the App Builder Catalog in your organization.
The first step to creating an App Builder project is creating a project in the Developer Console.
- Go to the Adobe Developer Console and log in. Make sure you log into the right account domain for your organization.
- Navigate to Projects and click Create new Project. A dropdown appears, choose Project from template.
- Choose the App Builder template.
- Set the project title and app name for your project.
- By default it will create two workspaces, Production and Stage.
- Make sure the checkbox Include Runtime with each workspace is checked.
- Click Save.
- [Optional] Add the Adobe Experience Platform API to your project. If you need this, repeat the following steps for both Stage and Production.
- Click on + Add service in the workspace block. A dropdown appears, choose API.
- Filter by product Adobe Experience Platform, choose Experience Platform API and click Next.
- You can provide a custom Credential Name or leave it as the automatically generated name and click Next.
- Choose the IMS product profile your API should use and click Save configured API.
A template project has been created that you can use as a starting point for your new App Builder Project. In these steps you'll create a new Github repository based on this template.
- Go to Github and log in with SSO. You should be in the OneAdobe org.
- Navigate to team EMEA Technical Validation.
- Find the repository app-builder-template.
- In the top right, click the dropdown next to Fork and choose Create new fork.
- Give your new repository a unique name. Click Create fork.
- TO DO: Add steps to break fork relation?
- [Optional] Clone the repository locally.
Now that you have created a Developer Console project and created a project folder from the template we can connect the two.
- Install the AIO CLI if you haven't already. A guide for this can be found here .
- Open a terminal and run aio login. Make sure you log in to the right account domain for your organization. If you accidentally log into the wrong account, you can use aio logout and then aio login again.
- Run aio where. This should return the following: You are currently in: 1. Org: DEMO POT EMEA 2. Project: App Builder Template 3. Workspace: Stage
- Run aio console org list and find your project ID in the list. Alternatively you could find the ID in the URL of your developer console project “https://developer.adobe.com/console/projects/[YOUR_ORG_ID]/[YOUR_PROJECT_ID/overview”
- Run aio console org select [YOUR_ORG_ID]. It should return the following: Organization selected : [YOUR_ORG_NAME] You are currently in: 1. Org: [YOUR_ORG_NAME] 2. Project: <no project selected> 3. Workspace: <no workspace selected>
-
- Run aio console project list and find your project ID in the list. Alternatively you could find the ID in the URL of your developer console project “https://developer.adobe.com/console/projects/[YOUR_ORG_ID]/[YOUR_PROJECT_ID/overview”
- Run aio console project select [YOUR_PROJECT_ID]. It should return the following: Project selected : [YOUR_PROJECT_NAME] You are currently in: 1. Org: [YOUR_ORG_NAME] 2. Project: [YOUR_PROJECT_NAME] 3. Workspace: <no workspace selected>
- Run aio console workspace list and find the workspace ID for your Stage environment in the list. Alternatively you could find the ID in the URL of your developer console project https://developer.adobe.com/console/projects/[YOUR_ORG_ID]/[YOUR_PROJECT_ID]/workspaces/[YOUR_WORKSPACE_ID]/details
- Run aio console workspace select [YOUR_WORKSPACE_ID] It should return the following: Workspace selected : [YOUR_WORKSPACE_NAME] You are currently in: 1. Org: [YOUR_ORG_NAME] 2. Project: [YOUR_PROJECT_NAME] 3. Workspace: [YOUR_WORKSPACE_NAME]
- If the returned location is correct, run aio app use -m. This will prompt you with two options: A. Use the global Org / Project / Workspace configuration B. Switch to another Workspace in the current Project Choose A and hit enter.
- Check out the .env file in your project. It should have updated the AIO_runtime_namespace to [YOUR_ORG_ID]-[YOUR_PROJECT_INTERNALNAME]-[YOUR_WORKSPACE_NAME]
Now that your local project is linked to your Developer Console Project you can now start developing your Custom App.
- Run aio app run to run your app on the localhost. You can navigate to:
- https://localhost:9080 to access your app directly
- https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080 to access your app in the Experience Cloud Shell. The port (9080) could be different for you
- In your project files I added two config files that you can use to easily edit your project details and sidenav. Both contain example data to get you started.
- /src/dx-excshell-1/web-src/src/configs/project.json
- /src/dx-excshell-1/web-src/src/configs/sidenav.json
- The App uses react-router-dom, which is located in the /src/dx-excshell-1/web-src/src/components/App.js file.