feat!: migrate from Next.js to Vite

.env

@@ -1,5 +1,5 @@
-NEXT_PUBLIC_BASE_PATH=/flows-ide
+VITE_BASE_PATH=/flows-ide
 
 
-NEXT_PUBLIC_GLOBUS_CLIENT_ID="91847941-14e5-4dcd-acf9-63f53741def8"
-NEXT_PUBLIC_GLOBUS_SCOPES="https://auth.globus.org/scopes/eec9b274-0c81-4334-bdc2-54e90e689b9a/manage_flows"
+VITE_GLOBUS_CLIENT_ID="91847941-14e5-4dcd-acf9-63f53741def8"
+VITE_GLOBUS_SCOPES="https://auth.globus.org/scopes/eec9b274-0c81-4334-bdc2-54e90e689b9a/manage_flows"

.env.development

@@ -1,3 +1,3 @@
-NEXT_PUBLIC_GLOBUS_ENVIRONMENT="sandbox"
+VITE_GLOBUS_ENVIRONMENT="sandbox"
 # https://app.sandbox.globuscs.info/settings/developers/projects/9a0b94e6-07be-48d1-911e-6cdab241d18d/apps/0cc46409-940b-4bd4-b920-d6aceecf40cf
-NEXT_PUBLIC_GLOBUS_CLIENT_ID="0cc46409-940b-4bd4-b920-d6aceecf40cf"
+VITE_GLOBUS_CLIENT_ID="0cc46409-940b-4bd4-b920-d6aceecf40cf"

.github/dependabot.yml

@@ -19,7 +19,14 @@ updates:
           - "react-dom"
           - "@types/react"
           - "@types/react-dom"
-      next:
+      vite:
         patterns:
-          - "next"
-          - "eslint-config-next"
+          - "vite"
+          - "@vitejs/*"
+      eslint:
+        patterns:
+          - "eslint"
+          - "@eslint/*"
+          - "typescript-eslint"
+          - "eslint-plugin-*"
+          - "eslint-config-*"

.github/workflows/pages.yml

@@ -0,0 +1,53 @@
+# Build and deploy the Vite site to GitHub Pages.
+name: Deploy site to Pages
+
+on:
+  workflow_dispatch:
+  workflow_call:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/krypton
+          cache: "npm"
+      - name: Setup Pages
+        uses: actions/configure-pages@v6
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with Vite
+        run: npm run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          path: ./dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v5

.github/workflows/release-please.yml

@@ -25,4 +25,4 @@ jobs:
   deploy:
     if: ${{ needs.release-please.outputs.releases_created == 'true' }}
     needs: release-please
-    uses: ./.github/workflows/nextjs.yml
+    uses: ./.github/workflows/pages.yml

.gitignore

@@ -9,11 +9,9 @@
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
-
-# production
+# build output
+/dist
+/out
 /build
 
 # misc
@@ -33,10 +31,9 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+
+# vite
+vite.config.ts.timestamp-*
 
 # sst
 .sst
-
-# open-next
-.open-next

README.md

@@ -27,20 +27,21 @@ Examples
 
 ## Contributing
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [React](https://react.dev/) project built with [Vite](https://vite.dev/).
 
 ## Important Architecture Details
 
-- This project uses a `.env` file to [configure environment variables](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables)
-- The Next.js configuration (and feature set) should be limited to [Static Site Generation](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation) to ensure compatibility with GitHub Pages.
+- This project uses a `.env` file to [configure environment variables](https://vite.dev/guide/env-and-mode). Variables exposed to the client must be prefixed with `VITE_`.
+- The app is a fully static [multi-page build](https://vite.dev/guide/build#multi-page-app) (`index.html` and `authenticate.html`) to ensure compatibility with GitHub Pages. The `authenticate.html` entry handles the OAuth2 redirect.
+- The public base path is controlled by `VITE_BASE_PATH` (see `.env`), which maps to Vite's [`base`](https://vite.dev/config/shared-options#base) option. It defaults to `/flows-ide` for GitHub Pages; deployments served from the root (e.g. the SST `sandbox` stage) override it to `/`.
 
 ### Running the Development Server
 
 ```bash
 npm run dev
 ```
 
-The application will be available on the Next.js host – since the application assumes the default GitHub Pages run-time, the basepath is configured to `/flows-ide` (requests to `/` will result in a `404`).
+The application will be available on the Vite dev server host. Since the application assumes the default GitHub Pages run-time, the basepath is configured to `/flows-ide` (requests to `/` will result in a `404`).
 
 ## Deployment
 

authenticate.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Globus : Flows IDE</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/authenticate.tsx"></script>
+  </body>
+</html>

eslint.config.js

@@ -0,0 +1,45 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import prettier from "eslint-config-prettier";
+
+export default tseslint.config(
+  {
+    ignores: ["dist", ".sst", "public", "sst.config.ts", "sst-env.d.ts"],
+  },
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      // The Globus SDK / Flows definitions are intentionally loosely typed;
+      // preserve the leniency the previous `next/core-web-vitals` config had.
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrors: "none",
+        },
+      ],
+      "no-empty": ["error", { allowEmptyCatch: true }],
+    },
+  },
+  prettier,
+);

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="visualize and create flows" />
+    <title>Globus : Flows IDE</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>