Frontend Deployment

The frontend of the QA-Dashboard is a Next.js application. Deployment involves building the application for production and hosting the static and server-rendered assets. The project documentation outlines two primary methods for deployment: using the Vercel platform (recommended) or a manual deployment to AWS using S3 and CloudFront.

Proper configuration of environment variables is crucial for the deployed application to connect to the backend API and WebSocket services. The build process is standardized through npm scripts defined in the package.json file.

Sources: README.md:215-226, web/README.md:27-31

Build Process

The frontend application is built using a standard Next.js build command. This process compiles the React components, bundles JavaScript, optimizes assets, and generates static HTML files for production.

Sources: web/package.json:6

Build Command

The primary script for creating a production build is npm run build. This command executes next build.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}

Sources: web/package.json:4-9

The build process can be visualized as follows:

This diagram shows the sequence of events when the build command is executed.
Sources: web/package.json:6, web/README.md:5-12

Configuration

For the frontend to function correctly in a deployed environment, it must be configured with the correct backend service URLs. This is managed through environment variables.

Environment Variables

The frontend requires a .env.local file to define the base URLs for the API and WebSocket connections.

These variables are read in web/src/config/api.js to construct the full endpoint URLs.

Sources: README.md:124-127, web/src/config/api.js:2-3

Example .env.local for production:

NEXT_PUBLIC_API_BASE_URL=https://your-production-api.com
NEXT_PUBLIC_WS_BASE_URL=wss://your-production-api.com

Sources: README.md:124-127

Next.js Configuration

The next.config.mjs file contains the base configuration for the Next.js application. In this project, it is minimal and does not contain any deployment-specific settings that need modification.

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;

Sources: web/next.config.mjs

Deployment Options

The project documentation specifies two methods for deploying the frontend application.

1. Vercel (Recommended)

Vercel is the recommended platform for deploying the Next.js frontend, as it is created by the same team and offers a seamless deployment experience.

The deployment process involves using the Vercel CLI.

This diagram illustrates the steps for deploying the frontend application using the Vercel CLI.
Sources: README.md:218-222, web/README.md:27-31

The steps are:

1. Install the Vercel CLI globally: npm install -g vercel.
2. Run the vercel command from the web directory.
3. Follow the CLI prompts to link the project and deploy.
4. Set the NEXT_PUBLIC_API_BASE_URL and NEXT_PUBLIC_WS_BASE_URL environment variables in the Vercel project settings.

Sources: README.md:218-222, web/README.md:27-31

2. AWS S3 + CloudFront

An alternative deployment method is to host the built application on AWS. This involves building the project locally and uploading the static assets to an S3 bucket, which is then served via the CloudFront CDN.

The process is as follows:

1. Run npm run build to generate the production build in the .next directory.
2. Upload the contents of the build output to an AWS S3 bucket.
3. Configure AWS CloudFront to serve the content from the S3 bucket.

This diagram shows the manual deployment workflow for AWS S3 and CloudFront.
Sources: README.md:223-226