Creating a multicomponent application with odo

    This example describes how to deploy a multicomponent application - a shooter game. The application consists of a front-end Node.js component and a back-end Java component.

    Prerequisites

    • odo is installed.

    • You have a running cluster. Developers can use CodeReady Containers (CRC) to deploy a local cluster quickly.

    • Maven is installed.

    Create a project to keep your source code, tests, and libraries organized in a separate single unit.

    Procedure

    1. Log in to an OKD cluster:

    2. Create a project:

      1. $ odo project create myproject

      Example output

      1.  ✓  Project 'myproject' is ready for use
      2.  ✓  New project created and now using project : myproject

    Deploying the back-end component

    To create a Java component, import the Java builder image, download the Java application and push the source code to your cluster with odo.

    Procedure

    1. Import openjdk18 into the cluster:

      1. $ oc import-image openjdk18 \
      2. --from=registry.access.redhat.com/redhat-openjdk-18/openjdk18-openshift --confirm

    2. Tag the image as builder to make it accessible for odo:

      1. $ oc annotate istag/openjdk18:latest tags=builder

    3. Run odo catalog list components to see the created image:

      1. $ odo catalog list components

      Example output

      1. Odo Devfile Components:
      2. NAME                 DESCRIPTION                            REGISTRY
      3. java-maven           Upstream Maven and OpenJDK 11          DefaultDevfileRegistry
      4. java-openliberty     Open Liberty microservice in Java      DefaultDevfileRegistry
      5. java-quarkus         Upstream Quarkus with Java+GraalVM     DefaultDevfileRegistry
      6. java-springboot      Spring Boot® using Java                DefaultDevfileRegistry
      7. nodejs               Stack with NodeJS 12                   DefaultDevfileRegistry
      9. Odo OpenShift Components:
      10. NAME        PROJECT       TAGS                                                                           SUPPORTED
      11. java        openshift     11,8,latest                                                                    YES
      12. dotnet      openshift     2.1,3.1,latest                                                                 NO
      13. golang      openshift     1.13.4-ubi7,1.13.4-ubi8,latest                                                 NO
      14. httpd       openshift     2.4-el7,2.4-el8,latest                                                         NO
      15. nginx       openshift     1.14-el7,1.14-el8,1.16-el7,1.16-el8,latest                                     NO
      16. nodejs      openshift     10-ubi7,10-ubi8,12-ubi7,12-ubi8,latest                                         NO
      17. perl        openshift     5.26-el7,5.26-ubi8,5.30-el7,latest                                             NO
      18. php         openshift     7.2-ubi7,7.2-ubi8,7.3-ubi7,7.3-ubi8,latest                                     NO
      19. python      openshift     2.7-ubi7,2.7-ubi8,3.6-ubi7,3.6-ubi8,3.8-ubi7,3.8-ubi8,latest                   NO
      20. ruby        openshift     2.5-ubi7,2.5-ubi8,2.6-ubi7,2.6-ubi8,2.7-ubi7,latest                            NO
      21. wildfly     openshift     10.0,10.1,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,8.1,9.0,latest     NO

    4. Create a directory for your components:

      1. $ mkdir my_components && cd my_components

    5. Download the example back-end application:

      1. $ git clone https://github.com/openshift-evangelists/Wild-West-Backend backend

    6. Change to the back-end source directory:

      1. $ cd backend

    7. Check that you have the correct files in the directory:

      1. $ ls

      Example output

      1. debug.sh  pom.xml  src

    8. Build the back-end source files with Maven to create a JAR file:

      1. $ mvn package

      Example output

      1. ...
      2. [INFO] --------------------------------------
      3. [INFO] BUILD SUCCESS
      4. [INFO] --------------------------------------
      5. [INFO] Finished at: 2019-09-30T16:11:11-04:00
      6. [INFO] Final Memory: 30M/91M
      7. [INFO] --------------------------------------

    9. Create a component configuration of Java component-type named backend:

      Example output

      1.  ✓  Validating component [1ms]
      2.  Please use `odo push` command to create the component with source deployed

      Now the configuration file config.yaml is in the local directory of the back-end component that contains information about the component for deployment.

      1. $ odo config view

      Example output

    11. Push the component to the OKD cluster.

      1. $ odo push

      Example output

      1. Validation
      2. ✓  Checking component [6ms]
      4. Configuration changes
      5. ✓  Initializing component
      6. ✓  Creating component [124ms]
      8. Pushing to component backend of type binary
      9. ✓  Checking files for pushing [1ms]
      10. ✓  Waiting for component to start [48s]
      11. ✓  Syncing files to the component [811ms]
      12. ✓  Building component [3s]

      Using odo push, OKD creates a container to host the back-end component, deploys the container into a pod running on the OKD cluster, and starts the backend component.

    12. Validate:

      • The status of the action in odo:

        1. $ odo log -f

        Example output

        1. 2019-09-30 20:14:19.738  INFO 444 --- [           main] c.o.wildwest.WildWestApplication         : Starting WildWestApplication v1.0 onbackend-app-1-9tnhc with PID 444 (/deployments/wildwest-1.0.jar started by jboss in /deployments)

      • The status of the back-end component:

        1. $ odo list

        Example output

        1. APP     NAME        TYPE          SOURCE                             STATE
        2. app     backend     openjdk18     file://target/wildwest-1.0.jar     Pushed

    To create and deploy a front-end component, download the Node.js application and push the source code to your cluster with odo.

    Procedure

    1. Download the example front-end application:

      1. $ git clone https://github.com/openshift/nodejs-ex frontend

    2. Change the current directory to the front-end directory:

      1. $ cd frontend

    3. List the contents of the directory to see that the front end is a Node.js application.

      1. $ ls

      Example output

      1. README.md       openshift       server.js       views
      2. helm            package.json    tests

    4. Create a component configuration of Node.js component-type named frontend:

      1. $ odo create --s2i nodejs frontend

      Example output

      1.  ✓  Validating component [5ms]
      2. Please use `odo push` command to create the component with source deployed

    5. Push the component to a running container.

      1. $ odo push

      Example output

      1. Validation
      2.  ✓  Checking component [8ms]
      4. Configuration changes
      5.  ✓  Initializing component
      6.  ✓  Creating component [83ms]
      8. Pushing to component frontend of type local
      9.  ✓  Checking files for pushing [2ms]
      10.  ✓  Waiting for component to start [45s]
      11.  ✓  Syncing files to the component [3s]
      12.  ✓  Building component [18s]
      13.  ✓  Changes successfully pushed to component

    Linking both components

    Components running on the cluster need to be connected to interact. OKD provides linking mechanisms to publish communication bindings from a program to its clients.

    Procedure

    1. Link the current front-end component to the back end:

      Example output

      1.  ✓  Component backend has been successfully linked from the component frontend
      3. Following environment variables were added to frontend component:
      4. - COMPONENT_BACKEND_HOST
      5. - COMPONENT_BACKEND_PORT

    Procedure

    1. Navigate to the frontend directory:

      1. $ cd frontend

    2. Create an external URL for the application:

      1. $ odo url create frontend --port 8080

      Example output

      1.  ✓  URL frontend created for component: frontend
      3. To create URL on the OpenShift  cluster, use `odo push`

    3. Apply the changes:

      1. $ odo push

      Example output

      1. Validation
      2.  ✓  Checking component [21ms]
      4. Configuration changes
      5.  ✓  Retrieving component data [35ms]
      6.  ✓  Applying configuration [29ms]
      8. Applying URL changes
      9.  ✓  URL frontend: http://frontend-app-myproject.192.168.42.79.nip.io created
      11. Pushing to component frontend of type local
      12.  ✓  Checking file changes for pushing [1ms]
      13.  ✓  No file changes detected, skipping build. Use the '-f' flag to force the build.

    4. Open the URL in a browser to view the application.

    Modifying the running application

    Procedure

    1. Change the local directory to the front-end directory:

      1. $ cd frontend

    2. Monitor the changes on the file system using:

      1. $ odo watch

    3. Edit the index.html file to change the displayed name for the game.

      odo pushes the changes to the front-end component and prints its status to the terminal:

      1. File /root/frontend/index.html changed
      2. File  changed
      3. Pushing files...
      4.  ✓  Waiting for component to start
      5.  ✓  Copying files to component
      6.  ✓  Building component

    4. Refresh the application page in the web browser. The new name is now displayed.

    Use the odo app delete command to delete your application.

    Procedure

    1. List the applications in the current project:

      1. $ odo app list

      Example output

      1.     The project '<project_name>' has the following applications:
      2.     NAME
      3.     app

    2. List the components associated with the applications. These components will be deleted with the application:

      1. $ odo component list

      Example output

      1.     APP     NAME                      TYPE       SOURCE        STATE
      2.     app     nodejs-nodejs-ex-elyf     nodejs     file://./     Pushed

    3. Delete the application:

        Example output