> For the complete documentation index, see [llms.txt](https://thomas-suedbroecker.gitbook.io/using-keycloak-vue-js-and-java-microservice-on-kub/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://thomas-suedbroecker.gitbook.io/using-keycloak-vue-js-and-java-microservice-on-kub/deploy-keycloak-and-the-example-application-to-kubernetes/exercise-03.md).

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

## Step 1: Open the `main.js` file

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

## Step 2: Change following source code

```bash
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.

```java
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.

   ![Follow the steps in the Access tab, by starting from "After your cluster provision" and inserting the commands into your terminal session.](https://github.com/thomassuedbroecker/keycloak-on-kubernetes-frontend-backend/tree/43ab52182d204ccd1a9ac63df93a3fffa1a37720/workshop/images/verify-cluster-access-4.png)
2. Logon to the IBM Cloud Container Registry (Ensure you are in the right folders)
3. Web-APP

   ```bash
     cd $ROOT_FOLDER/web-app-cloud
     ibmcloud cr login
   ```
4. List you namespaces inside the IBM Cloud Container Registry

   ```bash
    ibmcloud cr namespaces
   ```

   *Example output:*

   ```bash
    $ 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

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

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

```bash
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.

   ```bash
    kubectl apply -f kubernetes.yaml
   ```
2. Insert this command and verify the output.

   ```bash
     kubectl get pods
   ```

   Example output:

   ```bash
     $ 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

   ```bash
     echo $workernodeip
   ```
4. Web-APP `NodePort`

   ```bash
     export webappnodeport=$(kubectl get svc web-app --ignore-not-found --output 'jsonpath={.spec.ports[*].nodePort}')
   ```
5. Open the Web-APP in a browser

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

## Step 6: Configure the redirect URL in Keycloak

1. Get the Keycloak URL in your terminal session:

   ```bash
   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 `redirecturl`in your terminal session and copy the URL

   ```bash
   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`.