From Portfolio Prototype to Deployable Frontend: A Minimal Checklist

Prototype UIs Break at Deployment Time

Portfolio and tutorial web projects often look finished locally but fail under real hosting constraints: bad cache headers, missing fallback routes, and no asset integrity checks.

Step 1: Add a production build gate

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview",
    "check": "npm run build && npm run test"
  }
}

Step 2: Verify static hosting fallback behavior

location / {
  try_files $uri /index.html;
}

Step 3: Track bundle growth over time

npm run build
npx source-map-explorer dist/assets/*.js

Pitfalls

• No route fallback for SPA navigation refresh.
• Unbounded image assets in the main bundle.
• No deployment smoke tests after publish.

Verification

• Hard refresh works on deep routes.
• Main bundle stays within your target budget.
• Contact forms and analytics still function after deploy.