Change build to use Vite and Typescript

.gitignore

@@ -1,25 +1,30 @@
-.DS_Store
-node_modules
-/dist
-
-
-/tests/e2e/logs/
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo
+.prettierrc.json
+.vscode/

.nvmrc

@@ -0,0 +1 @@
+v22.3.0

Dockerfile

@@ -1,35 +1,29 @@
-FROM node:23.1.0-slim as ui-builder
+FROM node:22.3-slim as ui-builder
 
 RUN mkdir /usr/src/app
-RUN echo "deb http://archive.debian.org/debian stretch main" > /etc/apt/sources.list \
-    && apt-get -y update \
-    && apt-get -y upgrade \
-    && apt-get install -y chromium
-
 ENV PATH /usr/src/app/node_modules/.bin:$PATH
-ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
 
 COPY package.json /usr/src/app/package.json
 
 WORKDIR /usr/src/app
 
-RUN npm install --legacy-peer-deps && \
-    npm install -g @vue/cli
+RUN npm install
 
 COPY . /usr/src/app
 
-RUN npm run postinstall && \
-    npm run build && \
+RUN npm run build && \
     mkdir /tmp/app && \
     cp -rp /usr/src/app/dist /tmp/app && \
     rm -fr /usr/src/app
 
 FROM nginx
 
-COPY ./docker/entrypoint.sh /docker-entrypoint.d/entrypoint.sh
-RUN chmod +x /docker-entrypoint.d/entrypoint.sh
-
 COPY ./docker/nginx.conf /etc/nginx/nginx.conf
 COPY  --from=ui-builder /tmp/app/dist /usr/share/nginx/html
 EXPOSE 80
+
+# After copying in the base env.js file, use entrypoint.sh to override the values
+COPY ./docker/entrypoint.sh /docker-entrypoint.d/entrypoint.sh
+RUN chmod +x /docker-entrypoint.d/entrypoint.sh
+
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,55 +1,74 @@
 # wis2box-ui
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
-npm run serve
+npm run dev
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
-### Run your end-to-end tests
+### Preview production build
+
 ```
-npm run test:e2e
+npm run preview
+```
+
+### Run unit tests
+
+```
+npm run test:unit
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
+npm run format
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## Multilingual (i18n) Support
+
 wis2box-ui has multilingual support via [vue i18n](https://vue-i18n.intlify.dev/).
 
 ### Contributing to i18n
-To add a supported locale to wis2box-ui, create a branch of wis2box-ui and navigate to `wis2box-ui/src/locales/`. From there, create a copy of `_template.json` with the name of the new locale as the name of the file (i.e. `en.json`, `en-US.json`, etc...). Create entries for the empty double quoted fields and submit a pull request back into the main branch. The default language of wis2box-ui is Enligsh (en).
+
+To add a supported locale to wis2box-ui, create a branch of wis2box-ui and navigate to `wis2box-ui/src/locales/`. From there, create a copy of `_template.json` with the name of the new locale as the name of the file (i.e. `en.json`, `en-US.json`, etc...). Create entries for the empty double quoted fields and submit a pull request back into the main branch. The default language of wis2box-ui is English (en).
 
 #### To create an entry for German (de):
+
 ```
 git clone https://github.com/wmo-im/wis2box-ui.git
 cd ./src/locales
 cp _template.json de.json
 ```
+
 At this point, you can cross reference language support with a command like:
+
 ```
 cat en.json
 ```
+
 Then to edit the german locale:
+
 ```
 vi de.json
 ```
 
-
 ## Releasing
 
 ```bash
@@ -66,12 +85,12 @@ git push --tags
 
 ### Code Conventions
 
-* [@vue/cli-plugin/eslint](https://cli.vuejs.org/core-plugins/eslint.html)
+- [@vue/cli-plugin/eslint](https://cli.vuejs.org/core-plugins/eslint.html)
 
 ### Bugs and Issues
 
 All bugs, enhancements and issues are managed on [GitHub](https://github.com/wmo-im/wis2box-ui/issues).
 
 ## Contact
 
-* [Tom Kralidis](https://github.com/tomkralidis)
+- [Tom Kralidis](https://github.com/tomkralidis)

docker/entrypoint.sh

@@ -1,13 +1,20 @@
 #!/bin/sh
 
-env="
-window.VUE_APP_URL='${WIS2BOX_URL}'\n
-window.VUE_APP_OAPI='${WIS2BOX_API_URL}'\n
-window.VUE_APP_MQTT='${WIS2BOX_MQTT_URL}'\n
-window.VUE_APP_WAF='${WIS2BOX_URL}/data/'\n
-window.VUE_APP_BASEMAP_URL='${WIS2BOX_BASEMAP_URL:-https://\{s\}.tile.openstreetmap.org/\{z\}/\{x\}/\{y\}.png}'\n
-window.VUE_APP_BASEMAP_ATTRIBUTION='${WIS2BOX_BASEMAP_ATTRIBUTION:-&copy; <a href=\"https://osm.org/copyright\">OpenStreetMap</a> contributors}'\n
-window.VUE_APP_CLUSTER='${WIS2BOX_UI_CLUSTER}'\n
-window.VUE_APP_LANG='${WIS2BOX_UI_LANG}'
-"
-echo $env >> /usr/share/nginx/html/env.js
+# if essential env vars are not set then error
+if [ -z "$WIS2BOX_API_URL" ]; then
+    echo "env var 'WIS2BOX_API_URL' is not set. Set this to connect to the wis2box backend"
+    exit 1
+fi
+
+# Apply env var overrides
+# All env vars are strings with the exception of WIS2BOX_UI_CLUSTER
+# which is compared with the string true to convert it into a boolean at runtime
+env="window.VUE_APP_URL='${WIS2BOX_URL}'
+window.VUE_APP_OAPI='${WIS2BOX_API_URL}'
+window.VUE_APP_WAF='${WIS2BOX_URL}/data/'
+window.VUE_APP_BASEMAP_URL='${WIS2BOX_BASEMAP_URL:-https://\{s\}.tile.openstreetmap.org/\{z\}/\{x\}/\{y\}.png}'
+window.VUE_APP_BASEMAP_ATTRIBUTION='${WIS2BOX_BASEMAP_ATTRIBUTION:-&copy; <a href=\"https://osm.org/copyright\">OpenStreetMap</a> contributors}'
+window.VUE_APP_CLUSTER=('${WIS2BOX_UI_CLUSTER}' === 'true' || '${WIS2BOX_UI_CLUSTER}' === 'True')
+window.VUE_APP_LANG='${WIS2BOX_UI_LANG:-en}'"
+
+echo "$env" > /usr/share/nginx/html/env.js

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

eslint.config.js

@@ -0,0 +1,25 @@
+import pluginVue from 'eslint-plugin-vue'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+import pluginVitest from '@vitest/eslint-plugin'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  ...pluginVue.configs['flat/essential'],
+  ...vueTsEslintConfig(),
+
+  {
+    ...pluginVitest.configs.recommended,
+    files: ['src/**/__tests__/*'],
+  },
+  skipFormatting,
+]

global.d.ts

@@ -0,0 +1,19 @@
+// global.d.ts
+export {}
+
+import languageAbbreviation from '@/locales/i18n'
+
+// Type definitions for global variables that
+// we load via the environment variable env.js file in the public folder
+// and then access them via the global window object
+declare global {
+  interface Window {
+    VUE_APP_URL: string // URL for the frontend itself
+    VUE_APP_BASEMAP_URL: string // URL to the base map
+    VUE_APP_OAPI: string // API URL to the wis2box API
+    VUE_APP_BASEMAP_ATTRIBUTION: string // Attribution text displayed at the bottom of the base map
+    VUE_APP_LANG: languageAbbreviation // The language to use in the UI
+    VUE_APP_WAF: string //xml page that describes the s3 and the associated metadata 
+    VUE_APP_CLUSTER: boolean // cluster the stations on the map instead of having each one as a separate marker
+  }
+}

index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WIS 2.0 in a box - Home</title>
+  <meta name="description"
+    content="WIS 2.0 node in a box provides a platform with the capabilities for centres to integrate their data holdings and publish them to the WMO Information System with a plug and play capability supporting data publishing, discovery and access.">
+  <meta name="author" content="wis2box">
+  <meta property="og:title" content="WIS 2.0 node in a box">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://github.com/wmo-im/wis2box">
+  <meta name="og:description"
+    content="WIS 2.0 node in a box provides a platform with the capabilities for centres to integrate their data holdings and publish them to the WMO Information System with a plug and play capability supporting data publishing, discovery and access.">
+</head>
+
+<body>
+  <div id="app"></div>
+  <!-- env.js must be loaded first before main.ts and thus cannot be a module -->
+  <script src="/env.js"></script>
+  <script type="module" src="/src/main.ts"></script>
+  <meta property="og:image" content="/assets/img/logo.png">
+</body>
+
+</html>