Local Environment Setup
Relevant source files
The following files were used as context for generating this wiki page:
This document outlines the procedures and configurations required to set up and run the Moe Kyaw Aung portfolio project in a local development environment. The project is built using React and Vite, leveraging modern web technologies for high-performance rendering and smooth animations.
Sources: package.json:1-35, vite.config.js:1-9
Project Requirements and Dependencies
The project relies on Node.js and the Vite build tool. It uses several specialized libraries for 3D rendering, animations, and smooth scrolling.
Core Dependencies
| Dependency | Version | Description |
|---|---|---|
react | ^18.2.0 | Core UI library |
vite | ^4.4.5 | Build tool and development server |
@splinetool/react-spline | ^3.0.20 | 3D scene integration |
framer-motion | ^10.16.4 | Animation framework |
lenis | ^1.0.4 | Smooth scrolling engine |
gsap | ^3.12.2 | High-performance animations |
Sources: package.json:14-28
Development Workflow
The development environment is powered by Vite. The following diagram illustrates the initialization flow from the entry point to the rendered application.
The application starts at index.html, which loads the main.jsx module. This module then injects the React application into the #root div.
Sources: index.html:11-13, src/main.jsx:1-12
Local Server Configuration
The development server is configured to run on a specific port to ensure consistency across development environments.
export default defineConfig({
plugins: [react()],
server: {
port: 3000
}
})
Sources: vite.config.js:4-8
Execution Scripts
The project includes standard scripts for managing the lifecycle of the application.
| Script | Command | Purpose |
|---|---|---|
dev | vite | Starts the local development server at http://localhost:3000 |
build | vite build | Compiles the application for production |
preview | vite preview | Serves the production build locally for testing |
Sources: package.json:7-11, vite.config.js:7
Environment Runtime Features
Upon launching the local environment, several systems are initialized to handle the project's visual requirements.
Smooth Scroll (Lenis)
The application initializes a Lenis instance within the root App component. This affects how the local browser handles scroll events, providing a custom easing function.
Sources: src/App.jsx:7-20
Styling and Assets
The environment requires tailwindcss for processing styles. Global styles are defined in src/styles/globals.css, which sets the default background color to #0a0a0a and configures the smooth scroll behavior for the lenis class.
Sources: src/styles/globals.css:1-17, src/styles/globals.css:26-34
Summary
Setting up the local environment involves installing dependencies via a package manager and executing the Vite development server. The environment is pre-configured to handle 3D Spline scenes and smooth scrolling through integrated React hooks and global CSS configurations.
Sources: package.json:7, src/App.jsx:7-18, src/styles/globals.css:12-15