Switch frontend build process from Webpack to Vite

.github/workflows/frontend-ci.yml

@@ -26,7 +26,7 @@ jobs:
         run: yarn run lint --no-fix
 
       - name: Type-check Vue app
-        run: yarn run type
+        run: yarn run type-check
 
       - name: Build Vue app
         run: yarn run build
@@ -70,9 +70,9 @@ jobs:
       DANDI_ALLOW_LOCALHOST_URLS: 1
 
       # Web client env vars
-      VUE_APP_DANDI_API_ROOT: http://localhost:8000/api/
-      VUE_APP_OAUTH_API_ROOT: http://localhost:8000/oauth/
-      VUE_APP_OAUTH_CLIENT_ID: Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl
+      VITE_APP_DANDI_API_ROOT: http://localhost:8000/api/
+      VITE_APP_OAUTH_API_ROOT: http://localhost:8000/oauth/
+      VITE_APP_OAUTH_CLIENT_ID: Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl
 
       # E2E tests env vars
       CLIENT_URL: http://localhost:8085
@@ -82,7 +82,6 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: '16'
           cache: 'yarn'
           cache-dependency-path: web/yarn.lock
 
@@ -116,23 +115,23 @@ jobs:
 
       - name: Install E2E tests
         run: yarn install --frozen-lockfile
-        working-directory: web/test
+        working-directory: e2e
 
       - name: Lint E2E tests
         run: yarn run lint --no-fix --max-warnings=0
-        working-directory: web/test
+        working-directory: e2e
 
       - name: Run E2E tests
         run: |
           # start vue dev server and wait for it to start
-          yarn --cwd .. run serve 2> /dev/null &
+          yarn --cwd ../web/ run dev 2> /dev/null &
           while ! nc -z localhost 8085; do
             sleep 3
           done
 
           # start the dandi-api server
-          python ../../manage.py runserver &
+          python ../manage.py runserver &
 
           # run the E2E tests
           yarn run test
-        working-directory: web/test
+        working-directory: e2e

doc/design/apex-domain-netlify.md

@@ -7,7 +7,7 @@ Currently, the GUI is served at gui.dandiarchive.org, while the apex domain dand
 We've decided that our UI is stable enough to warrant serving it directly at dandiarchive.org, leaving just the task of serving a JSON file containing deployment information. Netlify seems capable of performing this task, and this document outlines the proposal to do so.
 
 ## Serving the Deployment JSON file
-Netlify cannot specify a different set of redirects for a different build context, so a custom plugin is required. Netlify does support custom JS plugins that hook into the build process and modify the Netlify configuration, so we can use that to specify a different redirect based on the `VUE_APP_DANDI_API_ROOT` environment variable. This redirect will proxy `dandiarchive.org/server-info` to `api.dandiarchive/api/server-info`, or the appropriate domains for staging. 
+Netlify cannot specify a different set of redirects for a different build context, so a custom plugin is required. Netlify does support custom JS plugins that hook into the build process and modify the Netlify configuration, so we can use that to specify a different redirect based on the `VITE_APP_DANDI_API_ROOT` environment variable. This redirect will proxy `dandiarchive.org/server-info` to `api.dandiarchive/api/server-info`, or the appropriate domains for staging.
 
 ## Backwards Compatibility
 

web/.env.development

@@ -1,3 +1,3 @@
-VUE_APP_DANDI_API_ROOT=http://localhost:8000/api/
-VUE_APP_OAUTH_API_ROOT=http://localhost:8000/oauth/
-VUE_APP_OAUTH_CLIENT_ID=Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl
+VITE_APP_DANDI_API_ROOT=http://localhost:8000/api/
+VITE_APP_OAUTH_API_ROOT=http://localhost:8000/oauth/
+VITE_APP_OAUTH_CLIENT_ID=Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl

web/.env.production

@@ -1,5 +1,5 @@
-VUE_APP_OAUTH_API_ROOT="https://api.dandiarchive.org/oauth/"
-VUE_APP_OAUTH_CLIENT_ID="Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl"
-VUE_APP_DANDI_API_ROOT="https://api.dandiarchive.org/api/"
-VUE_APP_SENTRY_DSN="https://[email protected]/5196549"
-VUE_APP_SENTRY_ENVIRONMENT="production"
+VITE_APP_OAUTH_API_ROOT="https://api.dandiarchive.org/oauth/"
+VITE_APP_OAUTH_CLIENT_ID="Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl"
+VITE_APP_DANDI_API_ROOT="https://api.dandiarchive.org/api/"
+VITE_APP_SENTRY_DSN="https://[email protected]/5196549"
+VITE_APP_SENTRY_ENVIRONMENT="production"

web/.eslintrc.js → web/.eslintrc.cjs

@@ -1,16 +1,18 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
 module.exports = {
   root: true,
   env: {
     node: true,
   },
-  plugins: [
-    'vuetify',
-  ],
   extends: [
+    'plugin:vue/essential',
+    'plugin:vuetify/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
     'eslint:recommended',
-    'plugin:vue/recommended',
-    '@vue/airbnb',
-    '@vue/typescript',
+    '@vue/eslint-config-typescript',
   ],
   rules: {
     camelcase: 'off',
@@ -37,7 +39,11 @@ module.exports = {
     'import/prefer-default-export': 'off',
     '@typescript-eslint/consistent-type-imports': 'error',
   },
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: '.'
+      }
+    },
   },
-};
+}

web/.gitignore

@@ -1,119 +1,30 @@
-# Byte-compiled / optimized / DLL files
-__pycache__/
-*.py[cod]
-*$py.class
-
-# C extensions
-*.so
-
-# Distribution / packaging
-.Python
-build/
-develop-eggs/
-dist/
-downloads/
-eggs/
-.eggs/
-lib/
-lib64/
-parts/
-sdist/
-var/
-wheels/
-*.egg-info/
-.installed.cfg
-*.egg
-MANIFEST
-
-# PyInstaller
-#  Usually these files are written by a python script from a template
-#  before PyInstaller builds the exe, so as to inject date/other infos into it.
-*.manifest
-*.spec
-
-# Installer logs
-pip-log.txt
-pip-delete-this-directory.txt
-
-# Unit test / coverage reports
-htmlcov/
-.tox/
-.coverage
-.coverage.*
-.cache
-nosetests.xml
-coverage.xml
-*.cover
-.hypothesis/
-.pytest_cache/
-
-# Translations
-*.mo
-*.pot
-
-# Django stuff:
+# Logs
+logs
 *.log
-local_settings.py
-db.sqlite3
-
-# Flask stuff:
-instance/
-.webassets-cache
-
-# Scrapy stuff:
-.scrapy
-
-# Sphinx documentation
-docs/_build/
-
-# PyBuilder
-target/
-
-# Jupyter Notebook
-.ipynb_checkpoints
-
-# pyenv
-.python-version
-
-# celery beat schedule file
-celerybeat-schedule
-
-# SageMath parsed files
-*.sage.py
-
-# Environments
-.env
-.venv
-env/
-venv/
-ENV/
-env.bak/
-venv.bak/
-
-# Spyder project settings
-.spyderproject
-.spyproject
-
-# Rope project settings
-.ropeproject
-
-# mkdocs documentation
-/site
-
-# mypy
-.mypy_cache/
-
-# pycharm
-**/.idea
-
-node_modules/
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Autogenerated file
+components.d.ts

web/public/index.html → web/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="/favicon.ico">
     <title>DANDI Archive</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
@@ -14,6 +14,7 @@
       <strong>We're sorry but the DANDI Archive doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

web/netlify.toml

@@ -4,30 +4,30 @@ command = "yarn run build"
 
 # Staging
 [context.master.environment]
-NODE_VERSION = "16" # Netlify defaults to node.js 10, but @types/node requires a more recent version
-VUE_APP_OAUTH_API_ROOT = "https://api-staging.dandiarchive.org/oauth/"
-VUE_APP_OAUTH_CLIENT_ID = "Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl"
-VUE_APP_DANDI_API_ROOT = "https://api-staging.dandiarchive.org/api/"
-VUE_APP_SENTRY_DSN = "https://[email protected]/5196549"
-VUE_APP_SENTRY_ENVIRONMENT = "staging"
+NODE_VERSION = "20"
+VITE_APP_OAUTH_API_ROOT = "https://api-staging.dandiarchive.org/oauth/"
+VITE_APP_OAUTH_CLIENT_ID = "Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl"
+VITE_APP_DANDI_API_ROOT = "https://api-staging.dandiarchive.org/api/"
+VITE_APP_SENTRY_DSN = "https://[email protected]/5196549"
+VITE_APP_SENTRY_ENVIRONMENT = "staging"
 
 # Deploy previews
 [context.deploy-preview.environment]
-NODE_VERSION = "16" # Netlify defaults to node.js 10, but @types/node requires a more recent version
-VUE_APP_OAUTH_API_ROOT = "https://api-staging.dandiarchive.org/oauth/"
-VUE_APP_OAUTH_CLIENT_ID = "Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl"
-VUE_APP_DANDI_API_ROOT = "https://api-staging.dandiarchive.org/api/"
-VUE_APP_SENTRY_DSN = "https://[email protected]/5196549"
-VUE_APP_SENTRY_ENVIRONMENT = "staging"
+NODE_VERSION = "20"
+VITE_APP_OAUTH_API_ROOT = "https://api-staging.dandiarchive.org/oauth/"
+VITE_APP_OAUTH_CLIENT_ID = "Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl"
+VITE_APP_DANDI_API_ROOT = "https://api-staging.dandiarchive.org/api/"
+VITE_APP_SENTRY_DSN = "https://[email protected]/5196549"
+VITE_APP_SENTRY_ENVIRONMENT = "staging"
 
 # Production
 [context.release.environment]
-NODE_VERSION = "16" # Netlify defaults to node.js 10, but @types/node requires a more recent version
-VUE_APP_OAUTH_API_ROOT = "https://api.dandiarchive.org/oauth/"
-VUE_APP_OAUTH_CLIENT_ID = "Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl"
-VUE_APP_DANDI_API_ROOT = "https://api.dandiarchive.org/api/"
-VUE_APP_SENTRY_DSN = "https://[email protected]/5196549"
-VUE_APP_SENTRY_ENVIRONMENT = "production"
+NODE_VERSION = "20"
+VITE_APP_OAUTH_API_ROOT = "https://api.dandiarchive.org/oauth/"
+VITE_APP_OAUTH_CLIENT_ID = "Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl"
+VITE_APP_DANDI_API_ROOT = "https://api.dandiarchive.org/api/"
+VITE_APP_SENTRY_DSN = "https://[email protected]/5196549"
+VITE_APP_SENTRY_ENVIRONMENT = "production"
 
 
 [[redirects]]

web/netlify/plugins/server-info-build/index.js

@@ -1,9 +1,9 @@
 module.exports = {
   // Use onPostBuild hook so that the dist/ folder exists
   onPostBuild: ({ netlifyConfig }) => {
-    let apiUrl = process.env.VUE_APP_DANDI_API_ROOT;
+    let apiUrl = process.env.VITE_APP_DANDI_API_ROOT;
     if (apiUrl === undefined) {
-      throw new Error('API URL not defined. Please define it with the VUE_APP_DANDI_API_ROOT environment variable.');
+      throw new Error('API URL not defined. Please define it with the VITE_APP_DANDI_API_ROOT environment variable.');
     }
 
     // Add redirect to server info