Deployment on Vercel
Relevant source files
The following files were used as context for generating this wiki page:
This document provides a technical overview of the deployment process for the frontend-luan-van project on the Vercel platform. The project is a Next.js application, and its deployment is tightly integrated with Vercel, leveraging an automated workflow that syncs changes from v0.app to GitHub, which then triggers a deployment on Vercel.
The project is live and deployed on Vercel. The deployment includes integration with Vercel-specific services like Vercel Analytics for monitoring user traffic and behavior. The configuration relies on standard Next.js build processes and environment variables managed within the Vercel dashboard.
Sources: README.md:1-6, README.md:139-142
Deployment Workflow
The deployment process is fully automated, starting from development in v0.app and ending with a live deployment on Vercel. Changes made in the v0.app interface are automatically pushed to the GitHub repository. Vercel is connected to this repository and automatically deploys the latest version from the main branch upon every push.
Sources: README.md:144-147
The following diagram illustrates the automated deployment pipeline.
This diagram shows the automated flow from the v0.app development environment to the live Vercel deployment, via GitHub.
Sources: README.md:144-147
Vercel Integration
The project leverages several features of the Vercel platform for a seamless deployment and monitoring experience.
Vercel Analytics
The application integrates Vercel Analytics to gather performance metrics and user insights. The @vercel/analytics package is included as a dependency and the Analytics component is rendered in the root layout of the application.
Sources: package.json:39, app/layout.tsx:7, 33
// File: app/layout.tsx
import { Analytics } from "@vercel/analytics/next"
// ...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>): JSX.Element {
return (
<html lang="en">
<body className={`font-sans antialiased`} suppressHydrationWarning>
<Providers>
{children}
<Toaster />
<Analytics />
</Providers>
</body>
</html>
)
}
This code snippet from the root layout shows the integration of the Vercel Analytics component.
Sources: app/layout.tsx:7, 27-35
Live Deployment URL
The project is continuously deployed and is accessible at a public URL hosted on Vercel.
Sources: README.md:141
Build and Configuration
Vercel uses the project's configuration files to build and deploy the Next.js application.
Build Process
The build process is initiated by Vercel's CI/CD pipeline, which executes the build script defined in package.json. This script runs next build, compiling the Next.js application for production.
| Script | Command | Description |
|---|---|---|
build | next build | Compiles the Next.js application for production. |
Sources: package.json:5
Environment Variables
The application relies on environment variables for configuration, which must be set in the Vercel project settings. A critical variable is NEXT_PUBLIC_API_URL, which defines the base URL for the backend API that the frontend communicates with.
| Variable | Description | Example Value | Source File |
|---|---|---|---|
NEXT_PUBLIC_API_URL | The base URL of the backend API. | http://localhost:3000 (default) | lib/api-client.ts |
Sources: lib/api-client.ts:21
The apiClient instance uses this variable to configure its baseURL.
// File: lib/api-client.ts:20-24
export const API_CONFIG = {
BASE_URL: process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000",
TIMEOUT: 10000,
RETRY_COUNT: 3,
RETRY_DELAY: 1000,
};
Sources: lib/api-client.ts:20-25
Continuous Integration and Testing
The project is set up for end-to-end (E2E) testing with Playwright. The testing configuration accounts for running tests in a Continuous Integration (CI) environment, such as the one provided by Vercel.
E2E Testing in CI
The Playwright configuration specifies different retry settings for local development versus a CI environment. In CI, tests are configured to retry up to 2 times on failure, making the test suite more robust against intermittent issues.
- Retries (dev): 0
- Retries (CI): 2
Sources: E2E_TESTING.md:41
The package.json file contains the script to execute these tests, which would be run as part of the Vercel deployment checks.
| Script | Command |
|---|---|
test:e2e | playwright test |
Sources: package.json:9
Summary
The deployment of the frontend-luan-van project is a highly automated and modern process centered around Vercel. By integrating with v0.app and GitHub, development changes are seamlessly pushed, built, and deployed. The use of Vercel Analytics provides valuable insights into the production application, while the CI-aware testing strategy ensures application reliability with each deployment. The entire workflow is designed for efficiency and robustness, leveraging the strengths of the Next.js framework on the Vercel platform.
Sources: README.md, app/layout.tsx