feat: replaced vue frontend with nextjs

frontend/.dockerignore

@@ -1,7 +1,3 @@
 node_modules
-npm-debug*
-.nuxt
-dist
-tests
-.output
-content/documentation/**
+.next
+.env

frontend/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_SWITCHBOARD_HOST=https://ph-switchboard-nginx-prod-c84ebf8c6e3b.herokuapp.com
+NEXT_PUBLIC_SWITCHBOARD_GRAPHQL_ENDPOINT=$NEXT_PUBLIC_SWITCHBOARD_HOST/drives

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/.gitignore

@@ -1,10 +1,38 @@
-node_modules
-*.log*
-.nuxt
-.nitro
-.cache
-.output
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
 .env
-dist
-*.sqlite
-content/documentation

frontend/Dockerfile

@@ -1,50 +1,33 @@
-# see https://docs.docker.com/engine/reference/builder/#understand-how-arg-and-from-interact
-ARG NODE_VERSION=node:20.11.0
+FROM node:lts-alpine AS deps
 
-FROM $NODE_VERSION AS dependency-base
-
-# create destination directory
-RUN mkdir -p /app/frontend
-WORKDIR /app/frontend
-
-# copy the app, note .dockerignore
-COPY frontend/package.json .
-COPY frontend/package-lock.json .
-COPY frontend/scripts ./scripts
-RUN npm ci
-
-FROM dependency-base AS production-base
-
-# build will also take care of building
-# if necessary
-COPY frontend /app/frontend
-COPY api /app/api
-
-WORKDIR /app/api
+WORKDIR /opt/app
+COPY package.json pnpm-lock.yaml ./
 RUN npm install -g pnpm
-ENV NODE_ENV=production
 RUN pnpm install
 
-WORKDIR /app/frontend
-ARG API_BASE=""
-ENV API_BASE=${API_BASE}
-ARG API_GQL_ENDPOINT=/wundergraph/graphql
-ENV API_GQL_ENDPOINT=${API_BASE}
-RUN npm run build
+# Rebuild the source code only when needed
+# This is where because may be the case that you would try
+# to build the app based on some `X_TAG` in my case (Git commit hash)
+# but the code hasn't changed.
+FROM node:lts-alpine AS builder
 
-FROM $NODE_VERSION AS production
-
-COPY --from=production-base /app/frontend/.output /app/frontend/.output
-
-# Service hostname
-ENV NUXT_HOST=0.0.0.0
+ENV NODE_ENV=production
+ARG SWITCHBOARD_HOST="https://ph-switchboard-nginx-prod-c84ebf8c6e3b.herokuapp.com"
+ENV NEXT_PUBLIC_SWITCHBOARD_HOST=${SWITCHBOARD_HOST}
+WORKDIR /opt/app
+COPY . .
+COPY --from=deps /opt/app/node_modules ./node_modules
+RUN npm install -g pnpm
+RUN pnpm build
 
-# Service version
-ARG NUXT_APP_VERSION
-ENV NUXT_APP_VERSION=${NUXT_APP_VERSION}
+# Production image, copy all the files and run next
+FROM node:lts-alpine AS runner
 
-# Run in production mode
+ARG X_TAG
+WORKDIR /opt/app
 ENV NODE_ENV=production
-
-# start the app
-CMD [ "node", "/app/frontend/.output/server/index.mjs" ]
+COPY --from=builder /opt/app/next.config.mjs ./
+COPY --from=builder /opt/app/public ./public
+COPY --from=builder /opt/app/.next ./.next
+COPY --from=builder /opt/app/node_modules ./node_modules
+CMD ["node_modules/.bin/next", "start"]

frontend/README.md

@@ -1,39 +1,36 @@
-# Powerhouse Switchboard Frontend
+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).
 
-The UI part of the system that intends to provide user-friendly wrapper over the API in order to easily do common things: signin/signup, create API tokens, use graphql playground, explore data stored in the database.
+## Getting Started
 
-## Development Setup
+First, run the development server:
 
-0. `node -v` to check that your Node is LTS (currently version 18.*)
-1. Set up _required_ environment variables [outlined below](#environment-variables) (if there any)
-2. `npm install` to install dependencies
-4. `npm run dev` to run application in development mode (make sure api service is already running)
-5. View hot-reloaded UI on [http://localhost:3000](http://localhost:3000)
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-Other commands include:
-- `npm run typecheck` for typechecking
-- `npm run lint` for linting
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-### Environment variables
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-Note: you can set environment variables directly or define them in the `frontend/.env` file.
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-- `API_BASE` (optional, default `http://localhost:3001`): relative path or the url under which `api` service is running. For example, if the `api` service is running on port 4000, the value should be `http://localhost:4000`. However, if the `api` is sharing the origin with the `frontend` service via reverse-proxy, providing relative path is enough (e.g.: `/backend`)
+## Learn More
 
-## Production
+To learn more about Next.js, take a look at the following resources:
 
-You can build application for production using `npm run build` and then locally preview production build via `npm run preview`.
+- [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.
 
-## Health endpoint
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-Endpoint available at `/healthz` path. Provides response if frontend is currently running.
+## Deploy on Vercel
 
-## Documentation page
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-One of the frontend's features is to display documentation about document model package. The documentation is generated using `scripts/generateDocs.ts` script from the `@acaldas/document-model-libs` npm package installed by the API service. Meaning that whenever the API updates the `@acaldas/document-model-libs` package, the documentation will be automatcially updated during build (before `npm run build`). To run the generation manually:
-
-1. `(cd ../api && npm install)` to install api dependencies including `@acaldas/document-model-libs` package
-2. `npm install` to install frontend dependencies
-3. Generate documentation file that will be served by the frontend using `npm run generateDocs`
-4. Start frontend via `npm run dev` (see [Development Setup](#development-setup) section above)
-5. Open http://localhost:3000/documentation
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.