Skip to main content

Finished demo

We provide a finished version of the custom integration that you can get running in your preferred environment.

Start web apps​

This demo involves two web apps: Uniform configuration app and a demo app. You can run these apps in the environment of your choice.

  1. Open Stackblitz

  2. After you open StackBlitz you will see an error in the terminal that environment variables are not set. You must set the variables in apps/demo-monsterpedia/.env to match the settings that apply to your Uniform project.

  3. Changing the .env file should cause the container to restart. If it doesn't, enter the following command in the Stackblitz terminal:

    npm run dev:basic

  4. Open a new Stackblitz terminal.

    info

    You must open a new terminal because the default terminal is running the web apps.

  5. Enter the following command:

    npm run canvas:basic:push

  6. In the activity bar the plug icon indicates that 2 ports are in use. Click this icon.

  7. You will see links to the web apps running on the 2 ports. Click the link for Port 4030

  8. A new browser tab opens. Copy the host name. It will be something like the following. You will need this value in a later step.

    https://uniformdev-uniform-mesh-tutorials-######--4030.local.webcontainer.io/
    info

    An error will be displayed in the browser tab. This is expected behavior because the configuration app can only run inside the Uniform dashboard.

  9. Close the browser tab.

  10. Click the link for Port 4040

  11. A new browser tab opens. Copy the host name. It will be something like the following. You will need this value in a later step.

    https://uniformdev-uniform-mesh-tutorials-######--4040.local.webcontainer.io/
    info

    An error will be displayed in the browser tab. This is expected behavior because the composition that is being retrieved is currently in draft mode.

  12. Close the browser tab.

Register custom integration​

  1. Follow the steps to register your custom integration.
  2. Assign the custom integration to your project.

Confirm use cases work​

  1. In Uniform, navigate to Settings > Monsterpedia

  2. Click Test

  3. Navigate to Canvas > Compositions

  4. Click Home Page

  5. Navigate to Landing Page > Dragon Details

    info

    You will see that Ancient Gold Dragon is selected for the parameter Dragon. The dropdown list for this parameter is populated by a call to the API for the external system.

  6. Publish the composition.

  7. Open the demo app.

    info

    You will see details about the selected dragon.