Deployment Guide
Relevant source files
The following files were used as context for generating this wiki page:This guide provides instructions for building, running, and deploying the Vinesight application. The project is built with Next.js and is optimized for deployment on the Vercel platform. Following these steps will ensure a correct and optimized production deployment.
The application is also configured as a Progressive Web App (PWA), enabling offline support and a native-like app experience on supported devices.
1. Prerequisites
Before you begin, ensure you have a compatible version of Node.js and a package manager like npm, yarn, pnpm, or bun installed on your system. The project is built using Next.js 15 and React 19.
Sources: README.md:5-13, package.json:34-35
2. Local Build and Execution
This section covers the commands required to build and run the application in both development and production modes locally.
Available Scripts
The package.json file defines several scripts for managing the application lifecycle.
| Script | Description |
|---|---|
dev | Starts the development server with Turbopack. |
dev:webpack | Starts the development server using Webpack instead of Turbopack. |
build | Creates an optimized production build of the application. |
start | Starts the production server after a build has been completed. |
lint | Runs ESLint to check for code quality and style issues. |
typecheck | Runs the TypeScript compiler to check for type errors. |
perf | A convenience script that runs build and start sequentially. |
Sources: package.json:5-13, AGENTS.md:4-8, README.md:5-13
Local Workflow
The following diagram illustrates the typical workflow for local development and testing of a production build.
This diagram shows the two main local workflows: the iterative development cycle and the process for testing a production build locally.
Sources: AGENTS.md:4-8, README.md:5-13, package.json:5-13
Development Mode
To run the application in development mode with hot-reloading, use the following command. The application will be accessible at http://localhost:3000.
npm run dev
This command utilizes Next.js's Turbopack for faster development server performance.
Sources: AGENTS.md:4, package.json:6, README.md:6
Production Build
To create a production-ready build, execute:
npm run build
This command compiles and optimizes the application, outputting the final assets into the .next directory. This build includes optimizations for performance, PWA service worker generation, and static site generation where applicable.
Sources: AGents.md:5, package.json:8
Running Production Locally
After a successful build, you can start a local production server to test the optimized application:
npm run start
This command serves the content from the .next directory and mimics a production environment.
Sources: AGENTS.md:8, package.json:9
3. Deployment to Vercel
The recommended method for deploying Vinesight is using the Vercel Platform, which is developed by the creators of Next.js and offers seamless integration.
Sources: README.md:22-24
Deployment Flow
The deployment process on Vercel is automated and triggered by commits to the connected Git repository.
This diagram shows how a git push triggers an automated build and deployment process on the Vercel platform.
Sources: README.md:22-26
4. Progressive Web App (PWA) Configuration
Vinesight is configured as a Progressive Web App (PWA) to provide offline capabilities and an installable, native-like experience. This is managed by next-pwa and defined in public/manifest.json.
Sources: AGENTS.md:12, package.json:41, src/app/layout.tsx:82
Manifest Details
The public/manifest.json file contains metadata that controls the PWA's appearance and behavior when installed on a user's device.
| Property | Value | Description |
|---|---|---|
name | VineSight - Grape Farming Digital Companion | The full name of the application. |
short_name | VineSight | The name displayed on the home screen. |
description | Scientific grape farming operations management app for Indian farmers | A brief description of the app's purpose. |
theme_color | #059669 | The color of the toolbar. |
background_color | #ffffff | The color of the splash screen background. |
display | standalone | Opens the app in its own window, without browser UI. |
orientation | portrait | Locks the app to a portrait orientation. |
start_url | / | The initial page loaded when the app starts. |
scope | / | The navigation scope of the PWA. |
lang | en | The primary language of the application. |
Sources: public/manifest.json:2-11
The build process, powered by next-pwa, automatically generates the necessary service worker files to enable offline functionality based on this configuration. The PWA manifest is linked in the main application layout.
Sources: src/app/layout.tsx:82, package.json:41