Build and Deployment
Relevant source files
The following files were used as context for generating this wiki page:This document outlines the technology stack, configuration, and processes for building and deploying the Grapevine website. The project is a Next.js application written in TypeScript, utilizing modern web development practices for a streamlined build and deployment workflow.
The entire process is managed through NPM scripts, which provide commands for development, production builds, and serving the application. The configuration is handled through standard Next.js files and custom modules for site-specific settings like SEO.
1. Technology Stack
The project is built upon a specific set of technologies that define its build environment and dependencies.
| Technology | Version/Details | Description | Source |
|---|---|---|---|
| Framework | Next.js 16.0.3 | The core React framework for building the application. | [package.json:15](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/package.json#L15), [README.md:5](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/README.md#L5) |
| Language | TypeScript 5 | Provides static typing for the JavaScript codebase. | [package.json:33](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/package.json#L33), [README.md:6](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/README.md#L6) |
| Styling | Tailwind CSS 4 | A utility-first CSS framework for styling components. | [package.json:32](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/package.json#L32), [README.md:7](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/README.md#L7) |
| Animations | Framer Motion 12.23.24 | A library for creating animations. | [package.json:12](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/package.json#L12), [README.md:8](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/README.md#L8) |
| Icons | Lucide React 0.554.0 | A library for SVG icons. | [package.json:13](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/package.json#L13), [README.md:9](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/README.md#L9) |
| Prerequisites | Node.js 18+ | The required runtime environment for the project. | [README.md:13](https://github.com/grapevinetravel/grapevine_website/blob/HEAD/README.md#L13) |
Sources: README.md:5-14, package.json:11-17, 28-33
2. Core Scripts
The project's lifecycle (development, building, and deployment) is managed through a set of NPM scripts defined in package.json.
| Command | Script | Description |
|---|---|---|
npm run dev | next dev | Starts the local development server at http://localhost:3000. |
npm run build | next build | Creates an optimized production build of the application. |
npm run start | next start | Starts the production server to serve the built application. |
npm run lint | eslint | Runs ESLint to analyze the code for potential errors. |
npm run format | prettier --write ... | Formats all project files using Prettier. |
npm run format:check | prettier --check ... | Checks if all project files are formatted correctly without making changes. |
Sources: package.json:5-10, README.md:24-31
The following diagram illustrates the primary workflow from development to production using these scripts.
This diagram shows the two main paths: local development using npm run dev and the production deployment process involving npm run build followed by npm run start.
Sources: package.json:5-10, README.md:19-22
3. Build Process
The production build is initiated by running npm run build, which executes the next build command. This process compiles the TypeScript code, bundles assets, and generates static pages and server-side components for production.
3.1. Build Configuration
The primary build configuration is managed through next.config.ts. In the current state of the repository, this file is present but contains no custom configuration, meaning the project relies on the default Next.js build behavior.
Sources: next.config.ts
3.2. Metadata and SEO
During the build, metadata for each page is generated. A central configuration for SEO and site-wide information is defined in lib/seo.ts.
The siteConfig object provides default values for metadata across the application.
| Property | Description | Example Value |
|---|---|---|
name | The site name. | "Grapevine" |
description | The default site description. | "Grapevine detects gaps..." |
url | The base URL of the application. | https://grapevine.travel |
ogImage | Path to the Open Graph image. | "/images/og-image.png" |
xHandle | The site's X (Twitter) handle. | "grapevine_trvl" |
keywords | Default keywords for SEO. | ["travel management", ...] |
Sources: lib/seo.ts:1-19
This configuration is consumed in the root layout (app/layout.tsx) to populate the <head> of every page with default and page-specific metadata. The generateOrganizationSchema function is also called here to inject structured data for SEO.
The diagram below shows how site configuration is injected into the root layout during the build process.
3.3. API Routes
The build process also prepares API routes. An example is the contact form submission endpoint. The front-end component components/contact-form.tsx makes a POST request to /api/contact.
This sequence shows the client-side ContactForm component interacting with a server-side API route, which is part of the application built by next build.
Sources: components/contact-form.tsx:88-95
4. Deployment
After a successful build, the application is deployed by running the production server.
4.1. Starting the Server
The command npm run start executes next start, which starts a Node.js server optimized to serve the files generated by the build process. This server is required for features like server-side rendering (SSR), API routes, and other dynamic functionalities of Next.js.
Sources: package.json:7, README.md:21-22
4.2. Environment Variables
The application URL is configured via an environment variable NEXT_PUBLIC_APP_URL. If this variable is not set, it defaults to https://grapevine.travel. This is used to construct absolute URLs for SEO and canonical links.
// lib/seo.ts:4
export const siteConfig = {
// ...
url: process.env.NEXT_PUBLIC_APP_URL || "https://grapevine.travel",
// ...
};
Sources: lib/seo.ts:4
Summary
The build and deployment for the Grapevine website are standardized around the Next.js framework and managed via NPM. The process is straightforward: npm run build creates a production-ready application, and npm run start serves it. Configuration is minimal, relying on Next.js defaults, with site-specific settings like metadata and SEO centrally managed in lib/seo.ts and applied during the build. The use of environment variables allows for flexible deployment across different environments.