Skip to main content

​
Build Process

Music Store uses Vite as its build tool for fast and optimized production builds.

​
Build Configuration

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

​
Building for Production

1

Install dependencies

npm install
2

Run the build command

npm run build
This creates a dist/ folder with optimized production files.
3

Preview the build locally

npm run preview
Test the production build on your local machine before deploying.
The build process:
  • Bundles all JavaScript and CSS
  • Optimizes images and assets
  • Minifies code for smaller file sizes
  • Generates source maps for debugging
  • Creates a static site in the dist/ folder

​
Deployment Platforms

Vercel provides zero-configuration deployment for Vite projects.
1

Install Vercel CLI

npm install -g vercel
2

Login to Vercel

vercel login
3

Deploy

vercel
Follow the prompts to configure your project.
4

Deploy to production

vercel --prod
Vercel benefits:
  • Automatic deployments from Git
  • Preview deployments for pull requests
  • Instant rollbacks
  • Built-in analytics
  • Edge network for fast global delivery

​
Netlify

Netlify is another excellent platform for deploying Vite apps.
1

Install Netlify CLI

npm install -g netlify-cli
2

Login to Netlify

netlify login
3

Initialize site

netlify init
4

Deploy

netlify deploy --prod

​
Netlify Configuration

Create a netlify.toml file in your project root:
netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
The redirects section ensures React Router works correctly by redirecting all routes to index.html.

​
Other Platforms

GitHub Pages

Free hosting for public repositories. Requires additional configuration for SPAs.

Cloudflare Pages

Fast global CDN with unlimited bandwidth on the free tier.

AWS S3 + CloudFront

Scalable cloud hosting with full control and customization.

Firebase Hosting

Google’s hosting platform with easy integration with Firebase services.

​
Environment Variables

Music Store uses Supabase for the backend, which requires environment variables.

​
Local Development

Create a .env file in the project root:
.env
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
Vite requires environment variables to be prefixed with VITE_ to expose them to the client.

​
Production Environment Variables

  1. Go to your project settings on Vercel
  2. Navigate to Environment Variables
  3. Add your variables:
    • VITE_SUPABASE_URL
    • VITE_SUPABASE_ANON_KEY
  4. Redeploy your project
Security:
  • Never commit .env files to Git
  • Add .env to .gitignore
  • Use different keys for development and production
  • Rotate keys if they’re exposed

​
Build Optimization

​
Asset Optimization

Vite automatically optimizes assets during build:
  • JavaScript: Minified and tree-shaken
  • CSS: Minified and extracted
  • Images: Optimized and hashed for caching
  • Fonts: Inlined or optimized

​
Code Splitting

Vite automatically code-splits your app. To manually split: 
import { lazy, Suspense } from 'react';

const Categoria = lazy(() => import('./pages/Categoria'));

function App() {
  return (
    <Suspense fallback={<Loader />}>
      <Categoria />
    </Suspense>
  );
}

​
Analyze Bundle Size

Install the Rollup Visualizer plugin: 
npm install --save-dev rollup-plugin-visualizer
Update vite.config.js:
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    react(),
    visualizer({ open: true })
  ],
})
Run the build to see the bundle visualization.

​
Performance Tips

Lazy Load Routes

Use React.lazy() to split routes into separate chunks

Optimize Images

Use modern formats (WebP, AVIF) and responsive images

Minimize Dependencies

Audit and remove unused npm packages

Enable Compression

Use gzip or brotli compression on your server

​
Deployment Checklist

1

Test the build locally

npm run build && npm run preview
Ensure everything works in production mode.
2

Set environment variables

Configure all required environment variables on your hosting platform.
3

Configure redirects

Set up redirects for client-side routing (React Router).
4

Test on multiple devices

Verify responsive design and functionality on mobile and desktop.
5

Monitor performance

Use tools like Lighthouse, WebPageTest, or your hosting platform’s analytics.
6

Set up CI/CD

Configure automatic deployments from your Git repository.

​
Continuous Deployment

​
GitHub Actions with Vercel

Create .github/workflows/deploy.yml:
.github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
      
      - name: Deploy to Vercel
        run: vercel --prod --token=${{ secrets.VERCEL_TOKEN }}
Add secrets to your GitHub repository settings under Settings > Secrets and variables > Actions.

​
Troubleshooting

​
Common Issues

Problem: Getting 404 errors when refreshing routes other than home.Solution: Configure your hosting platform to redirect all routes to index.html.For Netlify, add this to netlify.toml:
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
For Vercel, create vercel.json:
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}
Problem: Environment variables are undefined in production.Solution:
  • Ensure variables are prefixed with VITE_
  • Add variables to your hosting platform’s environment settings
  • Redeploy after adding environment variables
Problem: Build is too large and loads slowly.Solution:
  • Lazy load routes and heavy components
  • Analyze bundle with rollup-plugin-visualizer
  • Remove unused dependencies
  • Use dynamic imports for large libraries
Problem: Images or fonts not loading after deployment.Solution:
  • Use relative paths or import assets
  • Ensure assets are in the public/ folder or imported
  • Check the build output in dist/ folder

​
Post-Deployment

Monitor Performance

Use Lighthouse and analytics to track site performance

Set Up Error Tracking

Integrate Sentry or similar for error monitoring

Enable Analytics

Add Google Analytics or Plausible for user insights

Regular Updates

Keep dependencies updated for security and performance

Build docs developers (and LLMs) love

Get started for freeTalk to us