AI-DLC Project Documents / Implementation

Deployment Guide - Nokia Snake Game

Publication guide

Deployment Guide - Nokia Snake Game

Build Process

1. Install Dependencies

npm install

2. Build for Production

npm run build

This creates optimized files in the dist/ directory:

  • Minified JavaScript bundle
  • Optimized HTML and CSS
  • Source maps disabled for production

3. Preview Production Build

npm run preview

Test the production build locally before deployment.

Deployment Options

Option 1: GitHub Pages (Recommended)

  1. Install gh-pages:
npm install --save-dev gh-pages
  1. Add deploy script to package.json:
"scripts": {
  "deploy": "vite build && gh-pages -d dist"
}
  1. Deploy:
npm run deploy

Option 2: Netlify

  1. Connect your repository to Netlify
  2. Configure build settings:
    • Build command: npm run build
    • Publish directory: dist
  3. Deploy automatically on git push

Option 3: Vercel

  1. Install Vercel CLI:
npm install -g vercel
  1. Deploy:
vercel
  1. Follow prompts to configure deployment

Option 4: Static Hosting (AWS S3, etc.)

  1. Build the project:
npm run build
  1. Upload dist/ contents to your hosting:
# Example for AWS S3
aws s3 sync dist/ s3://your-bucket-name --delete
  1. Configure CloudFront (optional) for CDN

Environment Configuration

Production Environment Variables

No environment variables required - fully client-side application.

Security Headers

Ensure your hosting platform serves these headers:

  • Content-Security-Policy (already in HTML meta tag)
  • X-Content-Type-Options: nosniff
  • X-Frame-Options: DENY
  • X-XSS-Protection: 1; mode=block

Post-Deployment Checklist

  • Test game functionality
  • Verify localStorage works
  • Check console for errors
  • Test on multiple browsers
  • Test on mobile devices
  • Verify CSP headers
  • Check performance (FPS)
  • Test offline functionality

Monitoring

Client-Side Monitoring

  • Check browser console for errors
  • Monitor localStorage usage
  • Review audit logs in localStorage

Performance Monitoring

  • Use browser DevTools Performance tab
  • Check FPS in game (logged to console)
  • Monitor memory usage

Rollback Procedure

GitHub Pages

git revert <commit-hash>
npm run deploy

Netlify/Vercel

Use platform's rollback feature in dashboard

Manual Hosting

Re-upload previous dist/ backup

Troubleshooting

Build Fails

  • Check Node.js version (16+ required)
  • Clear node_modules and reinstall
  • Check for syntax errors

Game Not Loading

  • Check browser console for errors
  • Verify all files deployed correctly
  • Check CSP headers not blocking resources

localStorage Not Working

  • Check browser privacy settings
  • Verify not in incognito mode
  • Check storage quota

Maintenance

Regular Tasks

  • Monitor error logs
  • Check performance metrics
  • Update dependencies periodically
  • Test on new browser versions

Updates

  1. Make changes
  2. Test locally
  3. Build and deploy
  4. Verify in production

Support

For issues, check:

  1. Browser console errors
  2. localStorage audit logs
  3. Network tab for failed requests
  4. README.md for setup instructions