Overview
This guide covers deploying the Unity WebGL build of WPM Typing Tutor to production. The web version serves as the foundation for both direct browser access and the React Native mobile app (which loads the web version in a WebView).Deployment Target: Static web hostingBuild Type: Unity WebGLTotal Size: ~21 MB (compressed)Requirements: Web server with compression support
Pre-Deployment Checklist
Before deploying, ensure you have:Complete Unity Build
- Unity WebGL build completed successfully
- All
.unitywebfiles present inBuild/folder INTEGRADORA.jsonconfiguration file generatedUnityLoader.jsincludedindex.htmland template files ready
Test Locally
- Game runs without errors locally
- All levels and features work correctly
- Loading screen displays properly
- Performance is acceptable
Production Configuration
developmentBuild: false(recommended for production)- Compression enabled (Brotli or Gzip)
- Code stripping enabled
- Appropriate quality settings
Hosting Requirements
Server Requirements
- Essential
- Recommended
- Optional
Must Have:
- Static file hosting
- HTTPS support (SSL certificate)
- MIME type configuration
- Compression support (Gzip or Brotli)
- CORS headers (if API integration)
- Minimum 100 MB storage
MIME Types Configuration
Configure your web server to serve Unity WebGL files with correct MIME types:nginx.conf
.htaccess
Deployment Options
Option 1: Netlify (Recommended)
Best for: Easy deployment, automatic HTTPS, CDN, great free tier
Deploy to Netlify
Option A: Drag & DropOption C: Git Integration
- Go to netlify.com
- Drag your project folder to deploy
- Push code to GitHub/GitLab
- Connect repository in Netlify
- Auto-deploy on push
Option 2: Vercel
Best for: Next.js integration, serverless functions, global CDN
Option 3: GitHub Pages
Best for: Free hosting, GitHub integration, simple static sites
Enable GitHub Pages
- Go to repository settings
- Pages → Source → Deploy from branch
- Select
gh-pagesbranch - Save
https://username.github.io/wpm-typing-tutor/Option 4: Traditional Web Hosting (cPanel/FTP)
Best for: Existing hosting, full control, custom server configuration
Upload Files
Via FTP:
- Connect with FTP client (FileZilla, Cyberduck)
- Upload all files to
public_htmlorwwwfolder - Ensure correct permissions (644 for files, 755 for folders)
- File Manager → public_html
- Upload zip file
- Extract files
Compression Configuration
Gzip Compression
Unity uses pre-compressed.unityweb files with Gzip:
Brotli Compression
Brotli provides ~30% better compression than Gzip:nginx - Brotli
Caching Strategy
Cache Headers
Optimize loading speed with proper caching:nginx - Caching
.htaccess - Caching
CDN Integration
Cloudflare Setup
Add Site to Cloudflare
- Sign up at cloudflare.com
- Add your domain
- Update nameservers at your registrar
Configure Settings
Speed → Optimization
- Auto Minify: Enable for CSS, JS, HTML
- Brotli: Enabled
- Early Hints: Enabled
- Caching Level: Standard
- Browser Cache TTL: 1 year
Custom CDN Configuration
For other CDN providers (AWS CloudFront, Azure CDN, etc.):- AWS CloudFront
- Azure CDN
CloudFront Behavior
Security Configuration
HTTPS Enforcement
nginx - Force HTTPS
.htaccess - Force HTTPS
Security Headers
Security Headers
CORS Configuration (If Needed)
If mobile app loads from different domain:CORS for Mobile App
Environment-Specific Configuration
Development vs Production
- Development
- Production
config.dev.js
Build Script
Automate deployment preparation:deploy.sh
Post-Deployment
Verification Checklist
After deployment, verify:Loading & Performance
Loading & Performance
- Game loads without errors
- Loading progress bar displays correctly
- Initial load time < 10 seconds on fast connection
- Assets download properly
- No 404 errors in console
Functionality
Functionality
- All game levels work
- Keyboard input responsive
- Score calculation accurate
- Leaderboard updates (if applicable)
- Audio plays correctly
Browser Compatibility
Browser Compatibility
- Works in Chrome
- Works in Firefox
- Works in Safari
- Works in Edge
- Proper error messages on unsupported browsers
Security & Performance
Security & Performance
- HTTPS enabled
- Security headers present
- Compression enabled
- Caching configured
- CDN working (if applicable)
Mobile App Integration
Mobile App Integration
- React Native app can load game
- Touch input works
- Performance acceptable on mobile
- No CORS errors
Performance Testing
curl-format.txt:
Monitoring & Analytics
Basic Analytics
Integrate Google Analytics or similar:index.html
Error Tracking
Integrate Sentry for error monitoring:Error Tracking
Troubleshooting Deployment Issues
Game doesn't load
Game doesn't load
Common causes:
- Incorrect file paths
- Missing .unityweb files
- MIME type not configured
- Compression mismatch
- Open browser console (F12)
- Check for 404 errors
- Verify file paths in INTEGRADORA.json
- Test without compression
- Check server error logs
Slow loading
Slow loading
Solutions:
- Enable compression (Brotli preferred)
- Use CDN
- Enable HTTP/2
- Optimize Unity build (code stripping)
- Reduce asset quality
- Check server bandwidth
CORS errors
CORS errors
When this happens:
- Loading from different domain
- Mobile app integration
- API calls
HTTPS certificate errors
HTTPS certificate errors
Solutions:
- Use Let’s Encrypt (free)
- Use hosting provider’s SSL
- Check certificate expiration
- Verify domain matches certificate
Continuous Deployment
GitHub Actions
Automate deployment on git push:.github/workflows/deploy.yml
GitLab CI/CD
.gitlab-ci.yml
Hosting Cost Comparison
| Provider | Free Tier | Paid Plans | Best For |
|---|---|---|---|
| Netlify | 100GB bandwidth/month | From $19/mo | Easy deployment, auto-SSL |
| Vercel | 100GB bandwidth/month | From $20/mo | Next.js, serverless |
| GitHub Pages | Unlimited (soft limit) | Free only | Simple static sites |
| Cloudflare Pages | Unlimited bandwidth | Free | Best free option |
| AWS S3 + CloudFront | 50GB free (1st year) | Pay per use | Large scale |
| DigitalOcean | No free tier | From $4/mo | Full control |
For WPM Typing Tutor’s ~21MB build size and expected traffic, the free tiers of Netlify, Vercel, or Cloudflare Pages should be sufficient.
Next Steps
Unity Setup
Review Unity WebGL build configuration
React Native App
Configure mobile app to load deployed game
Platform Guide
User guide for web platform
Unity Setup
Unity project configuration