Prerequisites
Before you begin, ensure you have the following installed:- Node.js (v18.0.0 or higher)
- npm (comes with Node.js)
- Git
Technology Stack
upLegal is built with:- Vite - Build tool and dev server
- TypeScript - Type-safe JavaScript
- React - UI framework
- shadcn-ui - Component library
- Tailwind CSS - Utility-first CSS framework
- Express - Backend server
- Supabase - Database and authentication
- MercadoPago - Payment processing
Installation
Configure environment variables
Create a
.env.local file in the root directory and configure the required environment variables.See Environment Variables for the complete list.Development Scripts
The following npm scripts are available:| Script | Command | Description |
|---|---|---|
dev | npm run dev | Start Vite development server on port 3001 |
build | npm run build | Build for production |
build:dev | npm run build:dev | Build in development mode (with sourcemaps) |
lint | npm run lint | Run ESLint to check code quality |
preview | npm run preview | Preview production build locally on port 8080 |
server | npm run server | Run the Express backend server (port 3000) |
start | npm run start | Run both backend server and Vite concurrently |
Development Workflow
Running Frontend Only
For frontend-only development:- Hot Module Replacement (HMR)
- Port: 3001
- API proxy configured to
localhost:3000
Running Full Stack
To run both frontend and backend:- Express backend server on port 3000
- Vite frontend on port 3001
Backend Server Only
To run just the backend:Development Environment
Vite Configuration
The Vite dev server is configured with:- Host:
::(listens on all interfaces) - Port: 3001
- HMR Port: 3002
- API Proxy:
/apiroutes proxied tohttp://localhost:3000 - Allowed Hosts: Includes ngrok domains for webhook testing
Hot Module Replacement
Vite provides instant HMR for:- React components
- CSS/Tailwind changes
- TypeScript modules
Path Aliases
The@ alias is configured to reference the src directory:
Alternative Development Options
GitHub Codespaces
Direct GitHub Editing
For quick fixes:- Navigate to the desired file in GitHub
- Click the “Edit” button (pencil icon)
- Make changes and commit directly
Troubleshooting
Port Already in Use
If port 3001 is already in use:Module Resolution Issues
Clear node_modules and reinstall:Environment Variables Not Loading
Ensure your.env.local file is in the project root and variables are prefixed with VITE_ for frontend access.