Deploying to Vercel/Netlify

Relevant source files

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

• package.json
• vite.config.js
• index.html
• src/main.jsx
• src/App.jsx

Introduction

This project is a React-based web application built using the Vite build tool. The deployment process involves transforming the source code, which utilizes modern JavaScript (ES Modules), React 18, and various animation libraries, into a set of optimized static assets. These assets are then hosted on cloud platforms such as Vercel or Netlify.

The application serves as a high-performance portfolio featuring 3D elements, smooth scrolling via Lenis, and complex animations. Understanding the build pipeline defined in the configuration files is essential for ensuring successful deployment to production environments.

Build and Script Configuration

The project defines specific scripts and dependencies required for the build process. Platforms like Vercel and Netlify detect these scripts automatically to execute the deployment pipeline.

Core Build Scripts

The package.json file contains the essential commands for the deployment lifecycle:

Script	Command	Purpose
dev	vite	Starts the local development server on port 3000.
build	vite build	Compiles the application into static production assets.
preview	vite preview	Previews the production build locally before deployment.

Sources: package.json:7-11, vite.config.js:7-9

Build Pipeline Flow

The following diagram illustrates how the source code is processed during a deployment to a static hosting provider:

This flow represents the standard CI/CD pipeline triggered by a git push to the repository. Sources: package.json:6-11

Project Architecture for Deployment

The application is structured as a Single Page Application (SPA) with a specific entry point and asset management system.

Entry Points

• HTML Entry: index.html acts as the container, providing the root div and loading the main module script.
• JavaScript Entry: src/main.jsx initializes the React 18 concurrent renderer and attaches the App component to the DOM.

Sources: index.html:11-13, src/main.jsx:6-11

Application Lifecycle and Global Styles

The App.jsx file manages the initialization of global services like the Lenis smooth scroll engine, while globals.css provides the foundational styling (Tailwind CSS) and ensures proper overflow handling across different browsers.

Dependency Requirements

For a successful deployment, the environment must support the following core dependencies:

• Runtime: Node.js (ES Module support enabled via "type": "module").
• Build Tool: Vite 4.x.
• Framework: React 18.2.0.
• External Assets: The application fetches 3D scene data from Spline URLs during runtime.

Sources: package.json:5, 13, 21, src/components/3D-Hero/Hero3D.jsx:13

Summary

Deploying the Moe Kyaw Aung Portfolio V2 to Vercel or Netlify involves executing the vite build command. The build process packages the React components, Framer Motion animations, and Tailwind CSS into static files. The platform then serves the index.html file, which orchestrates the loading of the JavaScript bundle and subsequent initialization of the 3D hero section and smooth scrolling features.