Environment Variables

Relevant source files

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

• README.md
• pages/api/dispatch.ts
• package.json
• pages/_app.tsx
• public/mails/email.html
• tests/api/dispatch.spec.ts

Introduction

Environment variables are crucial for the configuration of the Heyme application. They provide a way to manage settings for external services, database connections, and application-specific parameters without hardcoding them into the source code. This allows for different configurations across various environments (development, testing, production). The primary setup involves creating a .env.local file from an example template.

The application's architecture relies on several external services, including MySQL for data storage and Zeptomail for transactional emails. The credentials and configuration details for these services are managed through environment variables.

Sources: README.md:33-37, README.md:41-45

Setup

To configure the local development environment, you must create a local environment file by copying the example file.

1. Copy the example environment file:

   cp .env.example .env.local
   

2. Update the newly created .env.local file with your specific variable values.

This process ensures that sensitive keys and environment-specific settings are kept separate from the version-controlled codebase.

Sources: README.md:33-37

Identified Variables

The following variables have been identified from their usage within the codebase. The exact names are inferred from their context, as the .env.example file is not available for direct review.

Variable	File(s) Used In	Purpose
ZEPTOMAIL_TOKEN	pages/api/dispatch.ts	Authentication token for the Zeptomail API to send transactional emails.
SITE_URL	pages/api/dispatch.ts	The base URL of the application, used to construct links in emails (e.g., the "Watch your message" link).
MySQL Credentials	pages/api/dispatch.ts	Connection details (host, user, password, database) for the MySQL database, used by the knex library.
Highlight.io ID	pages/_app.tsx	The project ID for the Highlight.io session replay and error monitoring service. Note: This is currently hardcoded.

Sources: pages/api/dispatch.ts:54, pages/api/dispatch.ts:80, pages/api/dispatch.ts:45, pages/_app.tsx:16

Service Configuration

The environment variables are essential for connecting to the external services that the application depends on.

This diagram illustrates the services configured via environment variables.

The diagram shows that the main Next.js application connects to MySQL, Zeptomail, and Highlight.io using credentials and keys supplied through the environment.

Sources: README.md:41-45, package.json, pages/api/dispatch.ts:45,54, pages/_app.tsx:16

Usage in Email Dispatch

The /api/dispatch endpoint heavily relies on environment variables to perform its function of sending scheduled emails.

handleDispatchEmails Flow

The following sequence diagram details how environment variables are used within the handleDispatchEmails function to fetch video data, construct an email, and send it.

This diagram shows the process:

1. The API connects to the MySQL database using environment variables.
2. It fetches videos scheduled for the current day.
3. It initializes the Zeptomail client with ZEPTOMAIL_TOKEN.
4. For each video, it constructs a watch link using SITE_URL and sends the email via Zeptomail.

Sources: pages/api/dispatch.ts:42-95

Email Content Generation

The getEmailContent function dynamically populates an HTML email template. One of the key placeholders, {{REPLACE_WATCH_LINK_HERE}}, is replaced with a URL constructed using the SITE_URL environment variable.

// File: pages/api/dispatch.ts:11-20

export async function getEmailContent({ watchLink, greeting, body, outro }) {
  let emailContent = Fs.readFileSync(
    Path.resolve("public", "mails", "email.html")
  ).toString()

  emailContent = emailContent.replace("{{REPLACE_WATCH_LINK_HERE}}", watchLink)
  emailContent = emailContent.replace("{{REPLACE_GREETING_HERE}}", greeting)
  emailContent = emailContent.replace("{{REPLACE_BODY_HERE}}", body)
  emailContent = emailContent.replace("{{REPLACE_OUTRO_HERE}}", outro)

  return emailContent
}

The watchLink parameter passed to this function is created using process.env.SITE_URL.

Sources: pages/api/dispatch.ts:11-20, pages/api/dispatch.ts:80, public/mails/email.html:314, tests/api/dispatch.spec.ts

Summary

Environment variables are a cornerstone of the Heyme application's deployment and operational flexibility. They abstract away sensitive data and configuration details for critical services like MySQL and Zeptomail, enabling secure and maintainable deployments across different environments. The setup is straightforward, requiring developers to create a .env.local file and populate it with the necessary values for database access, email services, and application URLs.