Exercise 3 - Change code, build, save and deploy the Web-App

Step 1: Open the main.js file

echo $keycloakurl
echo $authorsurl
echo 
cd $ROOT_FOLDER/web-app-cloud/src
nano main.js

Step 2: Change following source code

cd $ROOT_FOLDER/web-app-cloud/src
nano main.js

Replace the [keycloakurl] with the value, you got before for in Step 1 and save the file. The authors url is only available after the deploment of the Authors service.

let initOptions = {
  url: '[keycloakurl]/auth', realm: 'cloudnativestarter', clientId: 'frontend', onLoad: 'login-required'
}
let urls = {
  api: 'http://[authorsurl]/api/v1/'
}
store.commit("setAPI", urls);

Step 3: Build and save the "Web-App" container image in the IBM Cloud Container Registry

Now we want to build and save the container image "Web-APP" in the IBM Cloud Container Registry.

1. Ensure you logon on to IBM Cloud.

   REMEMBER: You should know this from the prerequisites.

   You can follow the steps in the Access tab, by starting from After your cluster provision .. and inserting the commands into your terminal session.

   
2. Logon to the IBM Cloud Container Registry (Ensure you are in the right folders)

3. Web-APP

     cd $ROOT_FOLDER/web-app-cloud
     ibmcloud cr login

4. List you namespaces inside the IBM Cloud Container Registry

    ibmcloud cr namespaces

   Example output:

    $ Listing namespaces for account 'Thomas Suedbroecker's Account' in registry 'us.icr.io'...
    $
    $ Namespace   
    $ cloud-native-suedbro

5. Now upload the code and build the container image inside IBM Cloud Container Registry. We use the information from step 2, where we got the list of namespaces.

6. Web-APP

     $ ibmcloud cr build -f Dockerfile --tag $REGISTRY/$REGISTRY_NAMESPACE/web-app:1 .

Step 4: List the container images to verify the upload.

ibmcloud cr images

Step 5: Apply the deployment of the Web-App

1. Ensure you are in the $ROOT_FOLDER/web-app-cloud/deployment

   cd $ROOT_FOLDER/web-app-cloud/deployment
   nano kubernetes.yaml

2. Open the ../web-app-cloud/deployment/kubernetes.yaml file with a editor and replace the value for the container image location with the path we got from the IBM Container Registry and just replace the web-app:1 text, and add following statement imagePullPolicy: Always and save the file.

Before:

    image: web-app:1

Example after the change:

   spec:
      containers:
      - name: web-app
        image: de.icr.io/cloud-native-tsuedbro/web-app:1 
        ports:
        - containerPort: 80
      restartPolicy: Always

1. Now we apply the yaml to create the web-app Pod.

    kubectl apply -f kubernetes.yaml

2. Insert this command and verify the output.

     kubectl get pods

   Example output:

     $ NAME                      READY   STATUS    RESTARTS   AGE
     $ authors-7b6dd98db-wl9wc   1/1     Running   0          6m9s
     $ web-app-7b6dd98db-wl9wc   1/1     Running   0          6m9s

3. Cluster/Workernode IP

     echo $workernodeip

4. Web-APP NodePort

     export webappnodeport=$(kubectl get svc web-app --ignore-not-found --output 'jsonpath={.spec.ports[*].nodePort}')

5. Open the Web-APP in a browser

     export redirecturl=http://${workernodeip}:${webappnodeport}
     echo $redirecturl

Step 6: Configure the redirect URL in Keycloak

1. Get the Keycloak URL in your terminal session:

   echo $keycloakurl

2. Open Keycloak your browser

3. Login admin/admin and open the Cloud Native Starter realm

4. Select Clients

5. Open the authors-client-cloud-native-starter client

6. Get the redirecturlin your terminal session and copy the URL

   echo $redirecturl

7. Insert the [redirecturl]

   • Root URL: [redirecturl]

   • Valid Redirect URIs:

     • [redirecturl]/*

     • [redirecturl]//

8. Configure the Web Origins

   • Web Origins:

     • '*'

     • *

Step 7: Open the Web-App again

Step 8: Logon as user author-cloud-native-starter and password 1234.