--- title: Creating a new project slug: tvemea-app-builder-template/creating-a-new-project docTags: createdAt: 2025-08-22T11:15:29.634Z --- *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.* :::ExpandableHeading ### Create a developer console project *The first step to creating an App Builder project is creating a project in the Developer Console.* 1. Go to the [Adobe Developer Console](https://developer.adobe.com/) and log in. Make sure you log into the right account domain for your organization. 2. Navigate to **Projects** and click **Create new Project**. A dropdown appears, choose **Project from template**. 3. Choose the **App Builder** template. 4. Set the **project title** and **app name** for your project. 5. By default it will create two workspaces, **Production** and **Stage**. 6. Make sure the checkbox **Include Runtime with each workspace** is checked. 7. Click **Save**. 8. \[Optional] Add the **Adobe Experience Platform API** to your project. If you need this, repeat the following steps for both Stage and Production. 1. Click on **+ Add service **in the workspace block. A dropdown appears, choose **API**. 2. Filter by product **Adobe Experience Platform**, choose** Experience Platform API** and click **Next**. 3. You can provide a custom **Credential Name** or leave it as the automatically generated name and click **Next**. 4. Choose the IMS product profile your API should use and click **Save configured API**. ::: :::ExpandableHeading ### Download the project files *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.* 1. Go to [Github](https://www.github.com) and log in with SSO. You should be in the `OneAdobe` org. 2. Navigate to team `EMEA Technical Validation`. 3. Find the repository `app-builder-template`. 4. In the top right, click the dropdown next to **Fork** and choose **Create new fork**. 5. Give your new repository a unique name. Click **Create fork**. 6. ******TO DO\: Add steps to break fork relation?** 7. \[Optional] Clone the repository locally. ::: :::ExpandableHeading ### Initialize your AIO project *Now that you have created a Developer Console project and created a project folder from the template we can connect the two.* 1. Install the AIO CLI if you haven't already. A guide for this can be found [here](https://developer.adobe.com/runtime/docs/guides/tools/cli_install/). 2. 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. 3. 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 4. 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” 5. 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: \ 3\. Workspace: \ 6. 7. 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” 8. 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: \ 9. 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 10. 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] 11. 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. 12. 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] ::: :::ExpandableHeading ### Developing on your project *Now that your local project is linked to your Developer Console Project you can now start developing your Custom App.* 1. Run `aio app run` to run your app on the localhost. You can navigate to: 1. [https://localhost:9080](https://localhost:9080) to access your app directly 2. [https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080](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* 2. 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. 1. /src/dx-excshell-1/web-src/src/configs/**project.json** 2. /src/dx-excshell-1/web-src/src/configs/**sidenav.json** 3. The App uses react-router-dom, which is located in the /src/dx-excshell-1/web-src/src/components/**App.js** file. ::: :::ExpandableHeading{isOpen="true"} ### Publishing your project to Stage / Prod ::: :::ExpandableHeading{isOpen="true"} ### Submitting your App to the App Builder Catalog :::