Migrate to client rendering

.dockerignore

@@ -7,7 +7,6 @@
 #
 
 .git
-.next
 .results
 scripts
 *Dockerfile*

.env.declaration

@@ -0,0 +1,17 @@
+#
+# This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+#
+# SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+#
+# SPDX-License-Identifier: MIT
+#
+
+# File is needed for https://github.com/garronej/vite-envs, allowing
+# for dynamic configuration via environment variables in Vite
+VITE_PUBLIC_FIREBASE_API_KEY=''
+VITE_PUBLIC_FIREBASE_APP_ID=''
+VITE_PUBLIC_FIREBASE_AUTH_DOMAIN=''
+VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=''
+VITE_PUBLIC_FIREBASE_PROJECT_ID=''
+VITE_PUBLIC_FIREBASE_STORAGE_BUCKET=''
+VITE_PUBLIC_EMULATOR=''

.eslintrc.json

@@ -25,8 +25,6 @@
     "/out/**",
     "/coverage/**",
     "/public/authServiceWorker.js",
-    "**/jest.config.js",
-    "**/next.config.js",
     "**/postcss.config.js",
     "**/tailwind.config.js"
   ],
@@ -108,11 +106,14 @@
       "error",
       { "allowNumber": true, "allowBoolean": true }
     ],
-    "react/no-unescaped-entities": "off"
+    "react/no-unescaped-entities": "off",
+    // some tanstack router functions result are thrown, like notFound
+    "@typescript-eslint/only-throw-error": "off",
+    "@next/next/no-img-element": "off"
   },
   "overrides": [
     {
-      "files": ["app/**/*.ts?(x)", "**/*.stories.ts?(x)"],
+      "files": ["app/**/*.ts?(x)", "**/*.stories.ts?(x)", "vite.config.ts"],
       "rules": {
         "import/no-default-export": "off"
       }

.github/workflows/build-and-test.yml

@@ -43,9 +43,9 @@ jobs:
       testscript: test.sh
     secrets:
       ENV_FILE: |
-        NEXT_PUBLIC_FIREBASE_API_KEY='${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}'
-        NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN='${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}'
-        NEXT_PUBLIC_FIREBASE_PROJECT_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}'
-        NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET='${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}'
-        NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}'
-        NEXT_PUBLIC_FIREBASE_APP_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}'
+        VITE_PUBLIC_FIREBASE_API_KEY='${{ secrets.VITE_PUBLIC_FIREBASE_API_KEY }}'
+        VITE_PUBLIC_FIREBASE_AUTH_DOMAIN='${{ secrets.VITE_PUBLIC_FIREBASE_AUTH_DOMAIN }}'
+        VITE_PUBLIC_FIREBASE_PROJECT_ID='${{ secrets.VITE_PUBLIC_FIREBASE_PROJECT_ID }}'
+        VITE_PUBLIC_FIREBASE_STORAGE_BUCKET='${{ secrets.VITE_PUBLIC_FIREBASE_STORAGE_BUCKET }}'
+        VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID='${{ secrets.VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}'
+        VITE_PUBLIC_FIREBASE_APP_ID='${{ secrets.VITE_PUBLIC_FIREBASE_APP_ID }}'

.gitignore

@@ -17,13 +17,9 @@
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
-
 # production
 /build
-/public/authServiceWorker.js
+/dist
 
 # misc
 .DS_Store
@@ -44,7 +40,6 @@ admin-creds.json
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
 
 # lint
 eslint_report.json

Dockerfile

@@ -8,67 +8,24 @@
 #
 
 
-FROM node:18-alpine AS base
+FROM node:latest AS build
 
-# Install dependencies only when needed
-FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
+RUN mkdir /app
 WORKDIR /app
 
-# Install dependencies based on the preferred package manager
-COPY package.json package-lock.json ./
-RUN npm ci
-
-
-# Rebuild the source code only when needed
-FROM base AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-# Next.js collects completely anonymous telemetry data about general usage.
-# Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line in case you want to disable telemetry during the build.
-ENV NEXT_TELEMETRY_DISABLED 1
-
-ARG NEXT_PUBLIC_FIREBASE_API_KEY
-ARG NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
-ARG NEXT_PUBLIC_FIREBASE_PROJECT_ID
-ARG NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
-ARG NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
-ARG NEXT_PUBLIC_FIREBASE_APP_ID
-
+RUN npm ci
 RUN npm run build
 
-# Production image, copy all the files and run next
-FROM base AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-# Uncomment the following line in case you want to disable telemetry during runtime.
-# ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /app/public ./public
+FROM nginx:stable-alpine
 
-# Set the correct permission for prerender cache
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER nextjs
+RUN mkdir -p /var/www
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 
 EXPOSE 80
 
-ENV PORT 80
-# set hostname to localhost
-ENV HOSTNAME "0.0.0.0"
-
-CMD ["node", "server.js"]
+# https://github.com/garronej/vite-envs
+# enable env var configuration
+ENTRYPOINT ["sh", "-c", "/usr/share/nginx/html/vite-envs.sh && nginx -g 'daemon off;'"]

README.md

@@ -33,15 +33,15 @@ npm install
 Create an `.env.local` file or inject the following environment variables required for the Google Firebase Setup:
 
 ```
-NEXT_PUBLIC_FIREBASE_API_KEY=
-NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
-NEXT_PUBLIC_FIREBASE_PROJECT_ID=
-NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
-NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
-NEXT_PUBLIC_FIREBASE_APP_ID=
+VITE_PUBLIC_FIREBASE_API_KEY=
+VITE_PUBLIC_FIREBASE_AUTH_DOMAIN=
+VITE_PUBLIC_FIREBASE_PROJECT_ID=
+VITE_PUBLIC_FIREBASE_STORAGE_BUCKET=
+VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+VITE_PUBLIC_FIREBASE_APP_ID=
 ```
 
-3. Start the Next.js Application
+3. Start the Vite Application
 
 ```bash
 npm run dev
@@ -94,15 +94,6 @@ You need to configure the OpenID Connect Sign-in provider as follows:
 - Issuer (URL): `https://login.stanford.edu`
 - Client secret: Client ID obtained from your OIDC configuration from the [Stanford SAML and OIDC Configuration Manager](https://spdb-prod.iam.stanford.edu).
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
 ## License
 
 This project is licensed under the MIT License. See [Licenses](https://github.com/StanfordBDHG/ENGAGE-HF-Web-Frontend/tree/main/LICENSES) for more information.

app/ReactQueryClientProvider.tsx

@@ -0,0 +1,25 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { type ReactNode } from 'react'
+
+interface ReactQueryClientProviderProps {
+  children: ReactNode
+}
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: false },
+  },
+})
+
+export const ReactQueryClientProvider = ({
+  children,
+}: ReactQueryClientProviderProps) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)