Upgrade to vue js3

.eslintrc.js

@@ -35,8 +35,23 @@ module.exports = {
     'max-classes-per-file': 'off',
     'no-use-before-define': 'off',
     'vue/multi-word-component-names': 'off',
+    '@typescript-eslint/no-unused-vars': ['warn', {
+      argsIgnorePattern: '^_',
+      varsIgnorePattern: '^_',
+      caughtErrorsIgnorePattern: '^_',
+    }],
+    'vue/no-v-for-template-key': 'off',
+    'vue/html-button-has-type': 'off',
+    'vue/no-template-target-blank': 'off',
   },
   parserOptions: {
     parser: '@typescript-eslint/parser',
   },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: './tsconfig.json',
+      },
+    },
+  },
 }

Dockerfile

@@ -1,7 +1,7 @@
 ###### BUILD STAGE ######
 # https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html
 
-FROM node:16-alpine AS build-stage
+FROM node:20-alpine AS build-stage
 WORKDIR /app
 
 # install-layer
@@ -26,10 +26,8 @@ COPY --from=build-stage /app/src/scss src/scss
 COPY --from=build-stage /app/src/components src/components
 COPY --from=build-stage /app/src/views src/views
 COPY --from=build-stage /app/node_modules/bootstrap/scss src/~bootstrap/scss
-COPY --from=build-stage /app/node_modules/bootstrap-vue/src src/~bootstrap-vue/src
+COPY --from=build-stage /app/node_modules/bootstrap-vue-next/src src/~bootstrap-vue-next/src
 COPY --from=build-stage /app/node_modules/prismjs/themes src/~prismjs/themes
-COPY --from=build-stage /app/node_modules/vue-select/src/scss src/~vue-select/src/scss
-COPY --from=build-stage /app/node_modules/vue2-datepicker/scss src/~vue2-datepicker/scss
 
 # nginx
 COPY nginx/default.conf /etc/nginx/conf.d/default.conf

README.md

@@ -17,15 +17,26 @@ Install dependencies using:
 $ npm install
 ```
 
-Create `public/config.js` file. For local development, you need to set the apiURL to where the FDP server is running, usually:
+### Local development (no Docker)
+
+1) Start the FDP server (default `http://localhost:8080`).
+2) Create `public/config.js` and set `apiURL` to the FDP server:
 
 ```js
 // public/config.js
 window.config = {
-  apiURL: 'http://localhost:8080'
+  apiURL: 'http://localhost:8080',
 }
 ```
 
+3) Run the dev server:
+
+```
+$ npm run serve
+```
+
+The client will be available at `http://localhost:8081`.
+
 > **Tip:** If you run both, the server and the client locally, start the server first, because it needs to run on port 8080. The client will then be automatically started on port 8081.
 
 Compile and hot-reload for development:
@@ -40,6 +51,37 @@ Compile and minify for production:
 $ npm run build
 ```
 
+## Docker
+
+The nginx container can be configured at runtime using environment variables:
+
+- `API_URL` (optional): browser-facing API base URL. For Docker, use `/` to call same-origin and avoid CORS/internal DNS issues.
+- `FDP_HOST` (required for Docker proxy): backend `host:port` used by nginx inside the container network. Do not include `http://` or `https://`.
+- `FDP_SCHEME` (optional): `http` or `https` for the proxy (`http` default).
+- `PUBLIC_PATH` (optional): base path if serving under a subpath (e.g. `/app`).
+- `REBUILD_STYLES` (optional): set to any value to force rebuilding SCSS at container start.
+
+Example: backend is another container on the same network (`fdp` service):
+
+```
+docker run --rm -p 8081:80 \
+  --network fdppv1_default \
+  -e FDP_HOST=fdp:8080 \
+  -e API_URL=/ \
+  fdp-client
+```
+
+Example: backend is on host machine:
+
+```
+docker run --rm -p 8081:80 \
+  -e FDP_HOST=host.docker.internal:8080 \
+  -e API_URL=/ \
+  fdp-client
+```
+
+If the backend is HTTPS-only, set `FDP_SCHEME=https` and ensure the API URL is `https://...`.
+
 Run tests or linter:
 
 ```

public/index.html → index.html

@@ -5,15 +5,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
-    <script src="<%= BASE_URL %>config.js"></script>
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="/config.js" data-vite-ignore></script>
+    <link rel="icon" href="%BASE_URL%favicon.ico">
     <title>FAIR Data Point</title>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but fdp-client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

nginx/start.sh

@@ -1,23 +1,56 @@
 #!/bin/sh
 
+# normalize public path
+PUBLIC_PATH="${PUBLIC_PATH%/}"
+if [ -z "$PUBLIC_PATH" ]; then
+  PUBLIC_PATH="/"
+fi
+REWRITE_PATH="$PUBLIC_PATH"
+if [ "$REWRITE_PATH" = "/" ]; then
+  REWRITE_PATH=""
+fi
+
 # create config
 config=/usr/share/nginx/html/config.js
 
-echo -n "window.config={publicPath:'"$PUBLIC_PATH"'};" > ${config}
+CONFIG_JS="window.config={publicPath:'$PUBLIC_PATH'"
+
+if [ -n "$API_URL" ]; then
+  CONFIG_JS="$CONFIG_JS,apiURL:'$API_URL'"
+else
+  # Default browser requests to same-origin; nginx will proxy to FDP_HOST.
+  CONFIG_JS="$CONFIG_JS,apiURL:'$PUBLIC_PATH'"
+fi
+
+CONFIG_JS="$CONFIG_JS};"
+echo -n "$CONFIG_JS" > ${config}
+
+# normalize FDP_HOST for nginx proxy_pass (expects host[:port], no scheme/path)
+if [ -z "$FDP_HOST" ]; then
+  echo "FDP_HOST is required and must be set as host:port (for example: fdp:8080)." >&2
+  exit 1
+fi
+FDP_HOST="$(printf '%s' "$FDP_HOST" | sed 's#^http://##; s#^https://##; s#/.*$##')"
 
 # set correct FDP Host for proxy pass
 sed -i "s#\$FDP_HOST#"$FDP_HOST"#g" /etc/nginx/conf.d/default.conf
 
 # set correct Public Path
-sed -i "s#/app/#"$PUBLIC_PATH"/#g" /usr/share/nginx/html/js/*.js
-sed -i "s#/app/#"$PUBLIC_PATH"/#g" /usr/share/nginx/html/index.html
+if [ -d /usr/share/nginx/html/assets ]; then
+  find /usr/share/nginx/html/assets -name "*.js" -exec sed -i "s#/app/#${REWRITE_PATH}/#g" {} \;
+  find /usr/share/nginx/html/assets -name "*.css" -exec sed -i "s#/app/#${REWRITE_PATH}/#g" {} \;
+fi
+sed -i "s#/app/#${REWRITE_PATH}/#g" /usr/share/nginx/html/index.html
 
 # update default logo URL with the Public Path
 sed -i "s#/assets/fair-logo.png#"$PUBLIC_PATH"/assets/fair-logo.png#" /src/scss/_variables.scss
 
-# regenerate styles if there are any customizations or Public Path is set
-if [[ ! -z "$PUBLIC_PATH" || $(find /src/scss/custom -name "*.scss" | xargs cat | wc -c) -gt 0 ]]; then
-  find /usr/share/nginx/html/css -name "*.css" -exec sassc -I /src -t compressed /src/scss/main.scss {} \;
+# regenerate app styles only when custom overrides have content or explicitly requested
+if [ -n "$REBUILD_STYLES" ] || [ -n "$(find /src/scss/custom -type f -name '*.scss' -size +0c -print -quit)" ]; then
+  if [ -d /usr/share/nginx/html/assets ]; then
+    find /usr/share/nginx/html/assets \( -name "index-*.css" -o -name "style-*.css" \) \
+      -exec sassc -I /src -t compressed /src/scss/main.scss {} \;
+  fi
 fi
 
 nginx -g 'daemon off;'