# Deployment Guide ## 🚀 Deploy to a VPS with Nginx (Reverse Proxy) This project exports fully static assets in `out/`. You can serve them directly with Nginx. ### 1) Build static files ```bash npm run build ``` By default, the app is built for the root path `/`. If you want to serve it under a subpath (e.g. `/namecard`), build with: ```bash BASE_PATH=/namecard NEXT_PUBLIC_BASE_URL=https://example.com/namecard npm run build ``` ### 2) Upload to server ```bash scp -r out/ user@server:/var/www/namecard ``` ### 3) Nginx config (root path) ```nginx server { listen 80; server_name example.com; # your domain root /var/www/namecard; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` ### 4) Nginx config (subpath, e.g. /namecard) Build with `BASE_PATH=/namecard` and then: ```nginx server { listen 80; server_name example.com; location /namecard/ { alias /var/www/namecard/; try_files $uri $uri/ /namecard/index.html; } } ``` ### 5) Reload Nginx ```bash sudo nginx -t && sudo systemctl reload nginx ``` ## 🌐 Custom Domain Setup 1. **Configure DNS:** - Add A record pointing to your VPS IP address - Or CNAME if using a subdomain (e.g., `card.rooftop.my`) 2. **SSL Certificate:** - Use Let's Encrypt: `sudo certbot --nginx` - Auto-renewal for free SSL certificates ## 📱 PWA Configuration (Optional) To enable "Add to Home Screen" functionality: 1. **Create manifest.json:** ```json { "name": "Rooftop Energy Namecard", "short_name": "Rooftop", "description": "Digital namecard for Rooftop Energy staff", "start_url": "/", "display": "standalone", "background_color": "#0a0a0a", "theme_color": "#fcd913", "icons": [ { "src": "/logo.png", "sizes": "192x192", "type": "image/png" } ] } ``` 2. **Add to layout.tsx:** ```tsx ``` ## 🔧 Environment Variables Set at build time (locally or in CI): ``` # Base URL used for Open Graph/Twitter image URLs and absolute links NEXT_PUBLIC_BASE_URL=https://example.com # Optional: if serving under a subpath, set both BASE_PATH=/namecard NEXT_PUBLIC_BASE_URL=https://example.com/namecard ``` ## 📊 Performance Monitoring 1. **Web Analytics:** - Use Google Analytics or similar service - Monitor Core Web Vitals with PageSpeed Insights 2. **Server Monitoring:** - Monitor server resources (CPU, memory, disk) - Set up alerts for high resource usage ## 🚨 Troubleshooting ### Build Errors - **Node version:** Ensure Node.js 18+ is used - **Dependencies:** Run `npm install` locally first - **TypeScript errors:** Run `npm run type-check` locally ### Runtime Issues - **Logo not loading:** Check `public/logo.png` exists - **Styling issues:** Verify Tailwind CSS is building correctly - **Query params not working:** Check URL encoding ### Performance Issues - **Large bundle:** Check for unused dependencies - **Slow loading:** Optimize images and enable compression - **SEO issues:** Verify meta tags and Open Graph ## 📈 Post-Deployment Checklist - [ ] Logo displays correctly - [ ] All CTAs work (Call, Email, WhatsApp, LinkedIn) - [ ] vCard download functions - [ ] Copy details works - [ ] Mobile responsive design - [ ] URL query overrides work - [ ] Performance scores meet targets - [ ] Analytics tracking (if enabled) - [ ] Custom domain configured (if applicable) ## 🔄 Updates & Maintenance ### Regular Updates 1. **Dependencies:** Run `npm audit` and update packages 2. **Content:** Edit `src/config/staff.ts` for staff changes 3. **Logo:** Replace `public/logo.png` when needed ### Deployment Updates 1. Build locally: `npm run build` 2. Sync `out/` to your server: `rsync -az out/ user@server:/var/www/namecard` 3. Reload Nginx: `sudo systemctl reload nginx` --- **Need help?** Check the main README.md or contact the development team.