Now using vite

.eslintrc.cjs

@@ -0,0 +1,28 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    // note we must disable the base rule as it can report incorrect errors
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -1,27 +1,25 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
-# dotenv
-.env.*
-
-# dependencies
-/node_modules
+# Dependencies
+node_modules
+dist
+dist-ssr
+*.local
 
-# testing
-/coverage
+# Logs
+logs
+*.log
 
-# production
-/build
+# Dotenv
+.env.*
 
-# misc
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-
-/.idea
-/auth.json
-
-# Configurations for testing
-/public/config
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierignore

@@ -0,0 +1,5 @@
+# Ignore artifacts:
+dist
+coverage
+docs/api
+public

CHANGES.md

@@ -77,14 +77,14 @@
   We support server configuration and auth configuration variables:
   ```bash
     # Server configuration
-    REACT_APP_SERVER_ID=my_server
-    REACT_APP_SERVER_NAME=My Server
-    REACT_APP_SERVER_URL=http://127.0.0.1:8181
+    XCV_SERVER_ID=my_server
+    XCV_SERVER_NAME=My Server
+    XCV_SERVER_URL=http://127.0.0.1:8181
 
     # Authentication configuration
-    REACT_APP_OAUTH2_AUTHORITY=https://my.authority.eu
-    REACT_APP_OAUTH2_CLIENT_ID=kjJKs5n7kj5k7fo9l3
-    REACT_APP_OAUTH2_AUDIENCE=https://my.audience.eu/api/
+    XCV_OAUTH2_AUTHORITY=https://my.authority.eu
+    XCV_OAUTH2_CLIENT_ID=kjJKs5n7kj5k7fo9l3
+    XCV_OAUTH2_AUDIENCE=https://my.audience.eu/api/
   ```
 
 ## Changes in version 1.0.0
@@ -381,7 +381,7 @@
 
   Note, this new feature must be enabled in `.env`:
   ```
-  REACT_APP_ALLOW_DOWNLOADS=1
+  XCV_ALLOW_DOWNLOADS=1
   ```
 * The opacity of polygon fill colours has been made part the 
   app's branding.
@@ -433,9 +433,9 @@ _Fixed a problem during release process. No code changes._
 * Users can now login (and sign on) if the viewer is build with OAuth2 settings, if any, given 
   in a `.env.local` file (#22): 
   ```bash
-  REACT_APP_OAUTH2_DOMAIN=MY_DOMAIN
-  REACT_APP_OAUTH2_CLIENT_ID=MY_CLIENT_ID
-  REACT_APP_OAUTH2_AUDIENCE=MY_AUDIENCE
+  XCV_OAUTH2_DOMAIN=MY_DOMAIN
+  XCV_OAUTH2_CLIENT_ID=MY_CLIENT_ID
+  XCV_OAUTH2_AUDIENCE=MY_AUDIENCE
   ``` 
 * Now displaying dataset attributions when clicking the lower right info button in the map.
 * Added a new panel to display information about the selected dataset, variable, and place (#114).
@@ -461,8 +461,8 @@ _Fixed a problem during release process. No code changes._
 * Added Help-icon providing a sub-menu with User Manual (coming soon) and the obligatory imprint.
 * Developers can now overwrite the branding's xcube web API server setting, if any, given in a `.env.local` file:
   ```bash
-  REACT_APP_BRANDING=MY_BRANDING
-  REACT_APP_XCUBE_API=http://localhost:8080
+  XCV_BRANDING=MY_BRANDING
+  XCV_XCUBE_API=http://localhost:8080
   ```  
   This eases testing of yet undeployed xcube web API versions in the viewer. 
 
@@ -571,4 +571,4 @@ Fixed translation of legal agreement.
 
 ## Changes in version 0.1
 
-Initial development version.
+Initial development version.

public/index.html → index.html

@@ -1,7 +1,7 @@
 <!--
   ~ The MIT License (MIT)
   ~
-  ~ Copyright (c) 2019-2021 by the xcube development team and contributors.
+  ~ Copyright (c) 2019-2024 by the xcube development team and contributors.
   ~
   ~ Permission is hereby granted, free of charge, to any person obtaining a copy of
   ~ this software and associated documentation files (the "Software"), to deal in
@@ -34,36 +34,14 @@
             name="viewport"
             content="minimum-scale=1, initial-scale=1, width=device-width"
     />
-    <link rel="icon" href="%PUBLIC_URL%/images/favicon.ico"/>
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/images/logo192.png"/>
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="icon" href="/images/favicon.ico"/>
+    <link rel="apple-touch-icon" href="/images/logo192.png"/>
+    <link rel="manifest" href="/manifest.json"/>
     <title>xcube Viewer</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
-<!--
-  This HTML file is a template.
-  If you open it directly in the browser, you will see an empty page.
-
-  You can add webfonts, meta tags, or analytics to this file.
-  The build step will place the bundled scripts into the <body> tag.
-
-  To begin the development, run `npm start` or `yarn start`.
-  To create a production bundle, use `npm run build` or `yarn build`.
--->
+<script type="module" src="/src/index.tsx"></script>
 </body>
 </html>