web-build-deploylisted

# Web Build & Deploy (React) ## Vercel Deployment ### Quick Deploy ```bash # Install Vercel CLI npm i -g vercel # Deploy vercel # Deploy to production vercel --prod ``` ### Configuration (vercel.json) ```json { "buildCommand": "npm run build", "outputDirectory": "dist", "framework": "vite", "rewrites": [ { "source": "/(.*)", "destination": "/" } ], "headers": [ { "source": "/(.*)", "headers": [ { "key": "X-Content-Type-Options", "value": "nosniff" }, { "key": "X-Frame-Options", "value": "DENY" } ] } ] } ``` ### Environment Variables ```bash # Add via CLI vercel env add NEXT_PUBLIC_API_URL # Or in Vercel dashboard: Settings > Environment Variables # Access in code const apiUrl = process.env.NEXT_PUBLIC_API_URL; ``` ### Preview Deployments Every push to a branch creates a preview URL automatically: - `https://project-git-branch-username.vercel.app` --- ## Netlify Deployment ### Quick Deploy ```bash # Install Netlify CLI npm i -g netlify-cli # Login netlify login # Deploy preview netlify deploy # Deploy to production netlify deploy --prod ``` ### Configuration (netlify.toml) ```toml [build] command = "npm run build" publish = "dist" [[redirects]] from = "/*" to = "/index.html" status = 200 [[headers]] for = "/*" [headers.values] X-Frame-Options = "DENY" X-Content-Type-Options = "nosniff" [build.environment] NODE_VERSION = "18" ``` ### Environment Variables ```bash # Add