AgroPulse is a static single-page application. The build process compiles TypeScript and bundles everything with Vite into aDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/diarpicu2022-commits/frontend-AgroPulse/llms.txt
Use this file to discover all available pages before exploring further.
dist/ folder. That folder is then served by a CDN or static hosting provider — no Node.js server is required at runtime. The project ships with a vercel.json configured for Vercel.
Build commands
| Command | Script | Description |
|---|---|---|
npm run dev | vite --host | Start Vite dev server on port 3000, accessible on all network interfaces (useful for mobile testing) |
npm run build | tsc && vite build | Type-check then bundle to dist/ |
npm run preview | vite preview --host | Preview the production build locally |
npm run typecheck | tsc --noEmit | Type-check without building |
npm run build runs tsc before vite build. TypeScript errors will abort the build. Run npm run typecheck first to surface errors without waiting for the full bundle step.Vite build output
Vite is configured invite.config.ts to output to dist/ with esbuild minification and no sourcemaps:
Deploying to Vercel
vercel.json at the project root tells Vercel to rewrite every route to index.html, enabling client-side routing to work on direct URL access or browser refresh:
Install the Vercel CLI (optional)
You can deploy via the Vercel dashboard or the CLI. To use the CLI:
Connect your repository
In the Vercel dashboard, import your repository. Vercel will detect the Vite framework automatically.If deploying via CLI from the project directory:
Set build settings
Verify the following settings in the Vercel project configuration:
| Setting | Value |
|---|---|
| Framework preset | Vite |
| Build command | npm run build |
| Output directory | dist |
| Install command | npm install |
Add environment variables
In your Vercel project, go to Settings → Environment Variables and add each variable from
.env.example with its production value:VITE_API_URL— your live backend URL (e.g.https://agropulse-api.onrender.com)VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEYVITE_EMAILJS_SERVICE_IDVITE_EMAILJS_TEMPLATE_IDVITE_EMAILJS_PUBLIC_KEYVITE_GROQ_KEY,VITE_GITHUB_TOKEN,VITE_GEMMA_KEY(optional)
Backend cold-start (Render)
The AgroPulse REST backend is typically hosted on Render using a free-tier web service. Free-tier Render services spin down after 15 minutes of inactivity and take approximately 6 seconds to wake up on the next request. The frontend is built to handle this gracefully:- The HTTP client in
ApiService.tsapplies an 8-second request timeout before throwing a connection error. This gives Render enough time to wake the service before the request fails. - On a connection error, the UI falls back to locally cached data (
localStorage) so users see stale-but-useful data rather than a blank screen. - A status indicator in the dashboard informs users that the backend is starting up.
If you host the backend on a paid Render plan or another provider that does not have cold-start delays (Railway, Fly.io, a VPS), these accommodations have no negative impact — the 8-second timeout is never reached under normal operating conditions.
Local development
/api/* to http://localhost:8080 automatically (see vite.config.ts), so you do not need to set VITE_API_URL locally as long as your backend is running on port 8080.
For a full local stack, start the backend first, then the frontend:
http://localhost:3000 in your browser.