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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.