Skill Maps

The Final Step: Putting Your App Online

You've built an amazing application. Now what? It's time to deploy it so the whole world can see it.

1. Build Process

Before deployment, you run npm run build. Vite takes your beautiful source code and:

  • Minifies: Removes all spaces and comments to make files tiny.
  • Tree Shaking: Removes unused code that you imported but never used.
  • Optimizes: Splits code into chunks for faster loading.
  • Hashes: Adds random hashes to filenames (e.g., app.a1b2c3.js) for cache busting.

2. Deployment Platforms

  • Vercel: Zero-config deployment for React apps. Connect your GitHub repo, and it deploys automatically on every push.
  • Netlify: Similar to Vercel, with great form handling and serverless functions.
  • GitHub Pages: Free hosting for static sites, perfect for portfolios.

3. Environment Variables

Never commit secrets to git! Use environment variables:

  • Development: .env.local (gitignored)
  • Production: Set in your hosting platform's dashboard
VITE_API_URL=https://api.example.com
VITE_STRIPE_KEY=pk_live_...

4. Performance Optimization

Before going live:

  • Lazy Loading: Use React.lazy() for code splitting.
  • Image Optimization: Use modern formats (WebP) and lazy loading.
  • Analytics: Add tools like Google Analytics or Vercel Analytics to monitor performance.

5. CI/CD: Automating Everything

Set up GitHub Actions to automatically:

  1. Run tests on every push
  2. Build the project
  3. Deploy to production only if tests pass This prevents broken code from ever reaching users.

Deployment is not the end — it's the beginning of your application's real life. Monitor it, improve it, and keep it secure.