feat(KUI-1542): update dependencies (upgrade node version from 18 to …

…20) & improve the code for running locally using docker (#390)

* feat(KUI-1542): improve the code for running locally using docker & update dependencies

* feat(KUI-1542): add Dockerfile-dev and update docker-compose.yml.in

* fix: remove the script for auto-generating Dockerfile-dev

* fix: fix a typo mistake in Dockerfile-dev

* fix: fix a typo mistake in Dockerfile-dev

* fix: fix a typo mistake in Dockerfile-dev

* feat: add fetch-all-env-variables to scripts

Dockerfile

@@ -1,4 +1,4 @@
-FROM kthregistry.azurecr.io/kth-nodejs-18:latest
+FROM kthregistry.azurecr.io/kth-nodejs-20:latest
 LABEL maintainer="KTH-studadm studadm.developers@kth.se"
 
 WORKDIR /application

README.md

@@ -72,6 +72,13 @@ npm install cross-env
 npm install concurrently
 ```
 
+### Environment variables
+The required environment variables to run this project for development are listed in the `.env.in` file. You can retrieve their corresponding values from the Azure portal and populate the environment variables accordingly. To fetch all the environment variables, use the following command:
+
+- Ensure you are logged in to Azure before running this command. You can log in by using the `az acr login` command. 
+
+- For running this command you need to be logge in on Azure for this you can run `az acr login` command
+
 ### Usage
 
 Start the service on [localhost:3000/student/kurser/kurs/:courseCode](http://localhost:3000/student/kurser/kurs/:courseCode).
@@ -125,6 +132,50 @@ Add to .vscode file launch.json:
 }
 ```
 
+## Run Locally Using Docker
+
+You can run the project locally using Docker for an isolated and consistent environment. Follow these steps:
+
+#### Build Docker Image
+
+First, build the Docker image by running the following command:
+
+If you are using mac change `docker build -f Dockerfile-dev -t "$IMAGE_NAME"` with `docker build --platform linux/arm64/v8 -f Dockerfile-dev -t "$IMAGE_NAME"`.
+
+
+```sh
+npm run docker:build
+```
+
+This will execute the `docker-build-image.sh` script in development mode `(dev)` this script will create Dockerfile-dev file which will be used for running the project locally using docker.
+
+#### Run Docker Container
+
+After the image has been built, you can start the Docker container using the following command:
+
+```sh
+npm run docker:run
+```
+
+This will execute the `docker-run-image.sh` script in development mode `(dev)`, running the application locally in Docker.
+
+The application now will be accessible at http://localhost:3000/student/kurser/kurs/:courseCode.
+
+- To run this project locally, ensure all required environment variables are set. You can do this by running the command: `npm run fetch-all-env-variables`.
+
+#### Alternative approach for running locally using Docker
+
+alternatively you can run the following command:
+
+```sh
+docker-compose up
+```
+
+Here you need to remove the .in at the end of the `docker-compose.yml.in`.
+
+
+- Run `az acr login --name kthregistry` before running the scripts.
+
 ## Deploy
 
 The deployment process is described in [Build, release, deploy](https://confluence.sys.kth.se/confluence/x/aY3_Ag). Technical details, such as configuration, is described in [How to deploy your 🐳 application using Cellus-Registy](https://gita.sys.kth.se/Infosys/cellus-registry/blob/master/HOW-TO-DEPLOY.md) and [🔧 How To Configure Your Application For The Pipeline](https://gita.sys.kth.se/Infosys/cellus-registry/blob/master/HOW-TO-CONFIGURE.md).

docker-build-image.sh

@@ -13,6 +13,7 @@ echoYellow "|    Building the Docker image for development env       |"
 echoYellow "|--------------------------------------------------------|\n"
 
 IMAGE_NAME="kursinfo-web-image"
+DOCKERFILE="Dockerfile-dev"
 
 
 if [ "$ENV" == "dev" ]; then
@@ -27,7 +28,7 @@ if [ "$ENV" == "dev" ]; then
 
   echo
   echoYellow "  3. Build Docker image: a name tag is $IMAGE_NAME\n"
-  docker build -f Dockerfile-dev -t "$IMAGE_NAME" .
+  docker build -f Dockerfile -t "$IMAGE_NAME" .
 
   echo
   echoYellow "  4. List images\n"

docker-compose.yml.in

@@ -41,4 +41,4 @@ services:
 
 
     ports:
-      - 3000:3000
+      - 3000:3000

fetch-env.sh

@@ -0,0 +1,65 @@
+#!/bin/bash
+
+# Accept RESOURCE_GROUP and APP_NAME as arguments
+RESOURCE_GROUP=$1
+APP_NAME=$2
+OUTPUT_FILE=".env"
+
+# Check if required arguments are provided
+if [ -z "$RESOURCE_GROUP" ] || [ -z "$APP_NAME" ]; then
+    echo "Usage: bash ./resolve-env.sh <RESOURCE_GROUP> <APP_NAME>"
+    exit 1
+fi
+
+# Function to fetch secrets from Azure Key Vault
+fetch_keyvault_secret() {
+    local secret_reference="$1"
+    local vault_name
+    local secret_name
+
+    # Extract the Key Vault name and secret name
+    vault_name=$(echo "$secret_reference" | sed -n 's/.*VaultName=\([^;]*\).*/\1/p')
+    secret_name=$(echo "$secret_reference" | sed -n 's/.*SecretName=\([^)]*\).*/\1/p')
+
+    if [ -z "$vault_name" ] || [ -z "$secret_name" ]; then
+        echo "Error parsing Key Vault reference: $secret_reference"
+        return 1
+    fi
+
+    # Fetch the secret value
+    az keyvault secret show --vault-name "$vault_name" --name "$secret_name" --query "value" -o tsv 2>/dev/null
+}
+
+# Fetch App Settings from Azure App Service
+echo "Fetching environment variables from App Service..."
+app_settings=$(az webapp config appsettings list --resource-group "$RESOURCE_GROUP" --name "$APP_NAME" --query "[].{name:name, value:value}" -o json)
+
+if [ -z "$app_settings" ]; then
+    echo "Failed to fetch app settings. Ensure the Azure CLI is configured and you have access to the App Service."
+    exit 1
+fi
+
+# Write to .env file
+echo "# Fetched Environment Variables" > "$OUTPUT_FILE"
+
+# Process each setting
+echo "$app_settings" | jq -c '.[]' | while read -r setting; do
+    name=$(echo "$setting" | jq -r '.name')
+    value=$(echo "$setting" | jq -r '.value')
+
+    # Check if the value is a Key Vault reference
+    if [[ "$value" == @Microsoft.KeyVault* ]]; then
+        echo "Fetching Key Vault reference for $name..."
+        resolved_value=$(fetch_keyvault_secret "$value")
+        if [ $? -ne 0 ]; then
+            resolved_value="ERROR_FETCHING_SECRET"
+        fi
+    else
+        resolved_value="$value"
+    fi
+
+    # Write to the .env file
+    echo "${name}=${resolved_value}" >> "$OUTPUT_FILE"
+done
+
+echo "Fetched environment variables written to $OUTPUT_FILE"

package.json

@@ -23,7 +23,8 @@
     "lint": "eslint \"{public,server}/**/*.{js,jsx}\"",
     "prepare": "husky",
     "start": "bash -c 'cat /KTH_NODEJS; NODE_ENV=production node app.js'",
-    "start-dev": "bash -c 'NODE_ENV=development concurrently --kill-others -n build,app \"npm run build-dev\" \"nodemon app.js\"'"
+    "start-dev": "bash -c 'NODE_ENV=development concurrently --kill-others -n build,app \"npm run build-dev\" \"nodemon app.js\"'",
+    "fetch-all-env-variables": "bash ./fetch-env.sh kursinfo-web-ref kursinfo-web-ref"
   },
   "dependencies": {
     "@kth/api-call": "^4.1.0",
@@ -102,7 +103,7 @@
     "webpack-cli": "^5.1.4"
   },
   "engines": {
-    "node": "18"
+    "node": "20"
   },
   "jshintConfig": {
     "maxerr": 5