Skip to Content
GuidesDeployment

Last Updated: 3/6/2026

Deployment Guide

This guide covers deploying the Snake Game to various hosting platforms.

Build Process

Before deploying, build the production bundle:

npm run build

This creates an optimized production build in the dist/ directory.

Deployment Options

Vercel provides zero-config deployment for Vite projects.

One-Click Deploy

  1. Push your code to GitHub
  2. Visit vercel.com 
  3. Click “Import Project”
  4. Select your repository
  5. Vercel auto-detects Vite configuration
  6. Click “Deploy”

CLI Deploy

npm install -g vercel
vercel

Follow the prompts to deploy.

Netlify

Netlify also offers seamless Vite deployment.

Deploy via Git

  1. Push code to GitHub/GitLab/Bitbucket
  2. Visit netlify.com 
  3. Click “New site from Git”
  4. Select your repository
  5. Configure build settings:
    • Build command: npm run build
    • Publish directory: dist
  6. Click “Deploy site”

Drag & Drop Deploy

  1. Run npm run build
  2. Visit app.netlify.com/drop 
  3. Drag the dist/ folder to the upload area

GitHub Pages

Deploy to GitHub Pages with a few configuration changes.

Setup

  1. Update vite.config.ts (create if it doesn’t exist):
import { defineConfig } from 'vite'
 
export default defineConfig({
  base: '/snake-game/', // Replace with your repo name
})
  1. Install gh-pages:
npm install --save-dev gh-pages
  1. Add deploy script to package.json:
{
  "scripts": {
    "deploy": "npm run build && gh-pages -d dist"
  }
}
  1. Deploy:
npm run deploy
  1. Enable GitHub Pages in repository settings:
    • Go to Settings → Pages
    • Source: gh-pages branch
    • Save

Your site will be available at https://<username>.github.io/snake-game/.

Static Hosting (Generic)

The built files can be deployed to any static hosting service:

  1. Build the project:
npm run build
  1. Upload dist/ contents to your hosting provider:
    • AWS S3 + CloudFront
    • Google Cloud Storage
    • Azure Static Web Apps
    • Cloudflare Pages
    • Firebase Hosting

Docker

For containerized deployment:

Dockerfile

# Build stage
FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
 
# Production stage
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and Run

docker build -t snake-game .
docker run -p 8080:80 snake-game

Access at http://localhost:8080.

Environment Configuration

Base URL

If deploying to a subdirectory, configure the base URL:

vite.config.ts:

import { defineConfig } from 'vite'
 
export default defineConfig({
  base: '/your-subdirectory/',
})

Custom Domain

Most platforms support custom domains:

  • Vercel: Add domain in project settings
  • Netlify: Add domain in site settings
  • GitHub Pages: Add CNAME file to public/ directory

Performance Optimization

Compression

Enable gzip/brotli compression on your server:

  • Nginx: Enable gzip in config
  • Vercel/Netlify: Enabled by default

Caching

Set appropriate cache headers:

location / {
  # Cache static assets for 1 year
  location ~* \.(js|css|png|jpg|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
  
  # Don't cache HTML
  location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
  }
}

CDN

Use a CDN for global distribution:

  • Vercel and Netlify include CDN by default
  • For custom hosting, consider Cloudflare or AWS CloudFront

Monitoring

Analytics

Add analytics to track usage:

index.html:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Error Tracking

Integrate error tracking (e.g., Sentry):

npm install @sentry/browser

src/main.ts:

import * as Sentry from '@sentry/browser'
 
Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  environment: 'production',
})

Continuous Deployment

GitHub Actions

Automate deployment with GitHub Actions:

.github/workflows/deploy.yml:

name: Deploy
 
on:
  push:
    branches: [ main ]
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Troubleshooting

404 Errors

  • Verify base URL in vite.config.ts matches deployment path
  • Check that all assets are in dist/ after build

Blank Page

  • Check browser console for errors
  • Verify paths in index.html are correct
  • Ensure all dependencies are in dependencies (not devDependencies)

Performance Issues

  • Enable compression on server
  • Use CDN for static assets
  • Minimize bundle size (check with npm run build -- --analyze)

Security

Content Security Policy (CSP)

Add CSP headers to prevent XSS:

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';">

HTTPS

  • Vercel, Netlify, and GitHub Pages provide free HTTPS
  • For custom hosting, use Let’s Encrypt for free SSL certificates

Rollback

Most platforms support instant rollback:

  • Vercel: Click “Rollback” on any previous deployment
  • Netlify: Select a previous deploy and click “Publish deploy”
  • GitHub Pages: Revert the commit or redeploy from an earlier commit
Development