DocumentationAEM as a Cloud ServiceUser Guide

SecurBank Sample App for the Universal Editor securbank

Last update: Tue Jun 04 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Admin
  • Developer

Learn about the Universal Editor with hands-on experience by using the SecurBank App, designed to showcase the power, flexibility, and usability of the Universal Editor to accelerate content creation.

Prerequisites prerequisites

  • You must be assigned to the AEM Administrator product profile to install the SecurBank app.
  • You must have Node.js version 20 or higher installed for local development.

Installing SecurBank installation

The installation of the SecurBank app is straight forward, but because it touches many areas of AEM as a Cloud Service a number of steps are involved. The following is an overview of the main steps.

  1. Create a sandbox program in Cloud Manager.
  2. Clone the program’s git repository and update with the SecurBank AEM project content.
  3. Run the pipeline to deploy the SecurBank AEM project.
  4. Retrieve Cloud Manager credentials for local web app development.
  5. Download and configure the SecurBank web app.
  6. Run the SecurBank web app.

The following sections detail the individual tasks required.

Create a sandbox program in Cloud Manager. create-sandbox-program

You will need a new Cloud Manager program where you can install SecurBank.

  1. Log into Cloud Manager at my.cloudmanager.adobe.com and select the appropriate organization

  2. Create a new sandbox program for the SecurBank app.

    • Use the default options when selecting Solutions & Add-Ons.
    • For details on how to create a sandbox program, please see the document Creating Sandbox Programs.

Clone the program’s git repository and update with the SecurBank AEM project content. clone-and-update

  1. Once the program is created, open it and on the Repositories tab, tap or click the Access Repo Info button to open the Repository Info dialog and view the credentials necessary to access the git repository for the sandbox environment.

  2. Using the credentials in the Repository Info dialog, clone the repository on your local machine.

  3. Locate the folder of the local clone, open it and delete all content except for the hidden/dot files.

  4. Retrieve the latest SecurBank AEM project code from GitHub at https://github.com/Adobe-Marketing-Cloud/summit-2024-l425-securbank by clicking Code and then Download ZIP in the dropdown.

  5. Decompress the contents of the zip file on your local file system and move it to the now empty folder of the local clone of the sandbox program.

  6. Using the terminal, switch to the folder of the cloned project and commit all the content and push it to git.

    1. git add --all
    2. git commit -m "Adding SecurBank app code"
    3. git push

Run the pipeline to deploy the SecurBank AEM project. run-pipeline

With the AEM project for SecurBank committed to the sandbox repository, it can be deployed with a pipeline.

  1. Return to the Overview tab of your sandbox program in Cloud Manager and run the full-stack non-production pipeline.

    • Uncheck all options for the pipeline run.
    • For more information about running pipelines, please see the document Managing Pipelines.

Retrieve Cloud Manager credentials for local web app development. retrieve-credentials

Before you can run the SecurBank app, you will need Cloud Manager credentials to connect the app to Cloud Manager.

  1. As the pipeline is running, return to the Overview tab in Cloud Manager, and tap or click the ellipsis button next to the environment name and select Developer Console.

  2. In the Developer Console select the Integrations tab then the Local Token tab and tap or click Get Local Development Token.

  3. A JSON file is produced with the access token. Copy only the token itself (the remaining JSON is not necessary) to a secure location for use in a future step before closing the Developer Console and returning to Cloud Manager.

  4. Back in Cloud Manager, on the Overview tab, right-click the URL of the environment to copy it and save it in a secure location for use in a future step.

Download and configure the SecurBank web app. download-web-app

Now you can download and configure the SecurBank web app.

  1. Retrieve the latest SecurBank app code from GitHub at https://github.com/Adobe-Marketing-Cloud/summit-2024-l425/tree/ue-z-final-with-events by clicking Code and then Download ZIP in the dropdown.

  2. Decompress the contents of the zip file on your local file system.

  3. Start your preferred code editor and open the hidden environment file in the SecurBank app project at summit-2024-l425-ue-z-final-with-events/react-app/.env.

  4. Make the following changes to the .env file and save the changes.

    • For REACT_APP_HOST_URI paste the value of the previously copied URL of your environment.
    • For REACT_APP_DEV_TOKEN paste the value of the previously copied local development token.

Run the SecurBank web app. run-web-app

With everything set up both in Cloud Manager and locally, you can run the SecurBank web app.

  1. At the command line of your local machine, navigate to the react-app folder of the SecurBank app project you downloaded and decompressed.

  2. In your react-app folder install the SecurBank app with the node -i command.

  3. Once installed, start the SecurBank app with the npm start command.

  4. If the installation and start were successful, you will see:

  • The following output in the terminal.

    code language-text 
    Compiled successfully!

You can now view securbank in the browser.

  Local:            https://localhost:3000
  On Your Network:  https://192.168.1.15:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

    • And a browser window open to the URL https://localhost:3000.

      • Note that this is for development purposes and as such, no valid certificate is provided. As such you may need to inform your browser to allow it to access the page.

Congratulations! You should now see the SecurBank app successfully running in your browser.

If the content does not yet appear, make sure that the Deploy to Dev pipeline that you ran completed successfully.

SecurBank app in the browser

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab