Deployment to Vercel

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• pages/_app.tsx
• pages/api/dispatch.ts
• README.md
• next.config.js
• pages/index.tsx

This document outlines the deployment architecture and configuration for the Heyme project on the Vercel platform. The application is built with Next.js, which is optimized for deployment on Vercel, leveraging its serverless infrastructure for API endpoints, analytics, and continuous deployment from a Git repository.

The deployment process involves building the Next.js application, deploying API routes as Serverless Functions, and serving the frontend from Vercel's global Edge Network. The project also integrates with Vercel Analytics for performance monitoring and traffic insights.

Build and Deployment Process

Vercel automates the deployment process by connecting directly to the project's GitHub repository. A new deployment is triggered on every git push. Vercel executes the build script defined in package.json to generate the production-ready application.

Sources: package.json:7-8

Build Scripts

The package.json file defines the scripts used by Vercel to build and start the application.

Script	Command	Description
build	next build	Compiles the Next.js application for production.
start	next start	Starts the production server. Vercel manages this process automatically.
preview	next build && next start	A local command to build and preview the production version.

Sources: package.json:6-9

Deployment Flow

The following diagram illustrates the high-level deployment flow on Vercel.

This diagram shows the automated process from a git push to the application being live on Vercel's network.
Sources: package.json:7

Serverless Functions

The project utilizes Vercel Serverless Functions for its backend logic. Any file inside the pages/api/ directory is automatically deployed as an isolated serverless function.

Sources: pages/api/dispatch.ts

Email Dispatch Function (/api/dispatch)

The primary serverless function is handleDispatchEmails, located at pages/api/dispatch.ts. This function is responsible for sending scheduled email notifications to users.

Function Logic:

1. Connects to the MySQL database.
2. Fetches all video records scheduled to be sent on the current day using the fetchAllVideosForToday function.
3. If no videos are found, it exits.
4. It iterates through the fetched videos, checking if they have already been sent.
5. For each unsent video, it constructs an email using a template from public/mails/email.html.
6. It sends the email using the Zeptomail service.
7. It updates the video's status to sent in the database to prevent re-sending.
8. Finally, it closes the database connection.

Sources: pages/api/dispatch.ts:37-97

The sequence diagram below details the interactions of the /api/dispatch function.

This diagram shows how a cron job triggers the dispatch function, which then interacts with the database and the Zeptomail service to send emails.
Sources: pages/api/dispatch.ts:40-96

Analytics and Monitoring

The application integrates with Vercel Analytics and Highlight.run for comprehensive monitoring.

Vercel Analytics

Vercel Analytics is enabled to provide traffic and performance insights. The <Analytics /> component from @vercel/analytics/react is included in the main App component.

// pages/_app.tsx:4,29
import { Analytics } from '@vercel/analytics/react'
// ...
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      {/* ... */}
      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
        <Component {...pageProps} />
      </ThemeProvider>
      <Analytics />
    </>
  )
}

Sources: pages/_app.tsx:4,29

Highlight.run

For more in-depth session replay and error monitoring, the project uses Highlight.run. It is initialized in pages/_app.tsx with a project-specific ID. The withHighlight higher-order component is also used to wrap API handlers like handleDispatchEmails for backend monitoring.

// pages/_app.tsx:5,14
import { H } from 'highlight.run'
// ...
H.init('4d7zk0eo')

Sources: pages/_app.tsx:5,14

// pages/api/dispatch.ts:9,97
import { withHighlight } from '../../highlight.config'
// ...
export default withHighlight(handleDispatchEmails)

Sources: pages/api/dispatch.ts:9,97

Environment Variables

The deployment relies on several environment variables that must be configured in the Vercel project settings. These variables are used to connect to external services like the database and email provider.

Variable Name	Description	Used In
ZEPTOMAIL_TOKEN	API token for the Zeptomail service.	pages/api/dispatch.ts
SITE_URL	The public URL of the deployed application.	pages/api/dispatch.ts
(Database credentials)	Variables for MySQL connection (host, user, etc.).	utils/server.ts (inferred)

Sources: README.md:37-41, pages/api/dispatch.ts:53,85

Summary

The Heyme application is deployed on Vercel, taking full advantage of the platform's seamless integration with Next.js. It uses a standard build process, leverages serverless functions for backend tasks like sending emails, and incorporates both Vercel Analytics and Highlight.run for robust monitoring. The configuration is straightforward, relying on environment variables for service integration, resulting in a scalable and maintainable deployment architecture.