Skip to main content

Provide Frontend through Applications

Tags:
🎯context

You want to deploy your built frontend through an application in the Workbench and provide a route for it so that it is ready to use.

Description​

This How-To will teach you how you can add your frontend component built with the Workbench to your application. Additionally it will explain how to define proper routing through custom configuration of your component so that the deployed UI gets accessible in the browser.

Preconditions​

  • You have developed your frontend as a Basic service project in IBM DevOps Solution Workbench
  • You have successfully executed a release pipeline for the frontend project and have a released component available in the component repository of IBM DevOps Solution Workbench
  • You have created an Application Composition Project and defined a deployment target

Steps​

Add frontend component to Application​

  1. Open your Application Composition Project in the Solution Designer.

  2. Go to Composition on the left sidebar.

  3. Go to your deployment target of choice.

  4. Click on Add component.

  5. Choose the component repository where your component is released to.

  6. Add the released version of your frontend component to your application.

Define route for deployed frontend​

To make the UI accessible in your browser, you will have to specify the route for the deployed frontend. This is done by adding a custom configuration to the component.

  1. Open the action "Configure component" of your frontend component and find the routes configuration in the yaml editor.

  2. To enable routing properly, you need to overwrite the existing configuration. To do so, please add the following lines to the field "Custom Configuration":

    routes:
        root: true

  3. Click on "Save" to store the configuration.

  4. Trigger the deploying of the Application by clicking on the "Commit" Button.

Your frontend will be available at the following URL: https://<your-deployment-target>.<your-host>/<application-acronym>/<project-acronym>/

❗️info

For single deployments of frontends, there is at the moment no capability in the Solution Designer to configure the route. To provide a route for the UI, you will manually have to create a route for the frontend in the OpenShift console.
However, it is recommended to use applications to deploy services.

🌟Congratulations!

You have successfully deployed your frontend in an application in the Workbench and provided a route for it.