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,39 @@ Compile and minify for production:
 $ npm run build
 ```
 
+## Docker
+
+The nginx container can be configured at runtime using environment variables:
+
+- `API_URL` (optional): absolute URL the browser should call for the API (recommended for Docker).
+- `FDP_HOST` (optional): backend host:port used by nginx proxy inside the container network.
+- `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 FDP_SCHEME=http \
+  -e API_URL=http://localhost:8081 \
+  fdp-client
+```
+
+Example: backend is on host machine:
+
+```
+docker run --rm -p 8081:80 \
+  -e FDP_HOST=host.docker.internal:8080 \
+  -e FDP_SCHEME=http \
+  -e API_URL=http://localhost:8081 \
+  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 type="module" 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,49 @@
 #!/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'"
+elif [ -n "$FDP_HOST" ]; then
+  FDP_SCHEME_VALUE="${FDP_SCHEME:-http}"
+  CONFIG_JS="$CONFIG_JS,apiURL:'${FDP_SCHEME_VALUE}://${FDP_HOST}'"
+fi
+
+CONFIG_JS="$CONFIG_JS};"
+echo -n "$CONFIG_JS" > ${config}
 
 # 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;'