A clean, minimal template for building games with React, TypeScript, Three.js, and Vite - built with security-first principles.
This template implements comprehensive security measures:
- ๐ก๏ธ Supply Chain Security - OSSF Scorecard analysis and dependency review
- ๐ Static Analysis - CodeQL scanning for vulnerabilities
- ๐ฆ Dependency Protection - Automated dependency vulnerability checks
- ๏ฟฝ License Compliance - Automated checking of dependency licenses (MIT, Apache-2.0, BSD variants, ISC, CC0-1.0, Unlicense)
- ๐ SBOM Quality Validation - Automated SBOM quality scoring with minimum 7.0/10 threshold using SBOMQS
- ๏ฟฝ๐ Runner Hardening - All CI/CD runners are hardened with audit logging
- ๐ Security Policies - GitHub security advisories and vulnerability reporting
- ๐ท๏ธ Pinned Dependencies - All GitHub Actions pinned to specific SHA hashes
- ๐ SBOM Generation - Software Bill of Materials for transparency
- ๐ Build Attestations - Cryptographic proof of build integrity
- ๐ก๏ธ Immutable Releases - Artifacts cannot be tampered with
- ๐ Build Integrity - Original builds remain unchanged
- ๐ Audit Trail - Complete release history
- ๐ Artifact Verification - SLSA-compliant build provenance
- ๐ท๏ธ ZAP Security Scanning - OWASP ZAP dynamic application security testing
- โก Lighthouse Performance - Automated performance and accessibility audits
- โก Vite - Fast build tool and dev server
- โ๏ธ React 19 - Modern React with hooks
- ๐ท TypeScript - Strict typing with latest standards
- ๐งช Vitest - Fast unit testing with coverage
- ๐ฒ Cypress - Reliable E2E testing
- ๐ฆ ESLint - Code linting with TypeScript rules
- ๐ GitHub Actions - Automated testing and reporting
- ๐ฎ Three.js - High-performance 3D WebGL renderer
- ๐จ @react-three/fiber - React renderer for Three.js
- ๐ ๏ธ @react-three/drei - Useful helpers for react-three-fiber
- ๐ต Howler.js - Audio library for games
When you create a new repository from this template, follow these essential setup steps to get all security and automation features working properly:
Labels are essential for automated pull request categorization and release note generation.
Run the setup workflow:
- Go to Actions โ Setup Repository Labels
- Click "Run workflow"
- Choose whether to recreate all labels (optional)
- Wait for completion
This creates all necessary labels for:
- ๐ Features and enhancements
- ๐ Bug fixes
- ๐ฎ Game development (graphics, audio, game logic)
- ๐ Security and compliance
- ๐ฆ Dependencies and infrastructure
Enable GitHub Pages to automatically deploy your game when creating releases.
Setup GitHub Pages:
- Go to Settings โ Pages
- Under Source, select "GitHub Actions"
- Save the configuration
Your game will be automatically deployed to https://your-username.github.io/your-repo-name/ when you run the release workflow.
Update the OpenSSF Scorecard badge to point to your repository.
Edit the README:
[](https://scorecard.dev/viewer/?uri=github.com/your-username/your-repo-name)Replace your-username/your-repo-name with your actual GitHub repository path.
With the template configured, you can now:
-
Develop locally or in Codespaces
npm install npm run dev
-
Create pull requests - Labels will be automatically applied
-
Run tests - Automated testing on every push/PR
-
Create releases - Use the release workflow for deployment
-
Monitor security - Automated security scanning and scoring
Your repository includes these automated workflows:
| Workflow | Trigger | Purpose |
|---|---|---|
| Setup Repository Labels | Manual | Creates all required labels for PR categorization |
| Setup Copilot Environment | Manual | Validates and documents Copilot MCP server configuration |
| Test and Report | Push/PR | Runs unit tests, E2E tests, license compliance, SBOM quality validation, and generates coverage |
| Build, Attest and Release | Manual/Tag | Creates secure releases with SBOM, license validation, and attestations |
| CodeQL Analysis | Push/PR/Schedule | Static code analysis for security vulnerabilities |
| Dependency Review | PR | Reviews dependencies for known vulnerabilities |
| Scorecard Analysis | Push/Schedule | OSSF supply chain security assessment |
| ZAP Security Scan | Manual | Dynamic security testing of deployed app |
| Lighthouse Performance | Manual | Performance and accessibility audits |
Once configured, your repository automatically provides:
- ๐ก๏ธ Supply Chain Security - OSSF Scorecard analysis and dependency review
- ๐ Static Analysis - CodeQL scanning for vulnerabilities
- ๐ฆ Dependency Protection - Automated dependency vulnerability checks
- ๏ฟฝ License Compliance - Automated checking of dependency licenses (MIT, Apache-2.0, BSD variants, ISC, CC0-1.0, Unlicense)
- ๐ SBOM Quality Validation - Automated SBOM quality scoring with minimum 7.0/10 threshold using SBOMQS
- ๏ฟฝ๐ Runner Hardening - All CI/CD runners are hardened with audit logging
- ๐ Security Policies - GitHub security advisories and vulnerability reporting
- ๐ท๏ธ Pinned Dependencies - All GitHub Actions pinned to specific SHA hashes
- ๐ SBOM Generation - Software Bill of Materials for transparency
- ๐ Build Attestations - Cryptographic proof of build integrity
- ๐ก๏ธ Immutable Releases - Artifacts cannot be tampered with
- ๐ Build Integrity - Original builds remain unchanged
- ๐ Audit Trail - Complete release history
- ๐ Artifact Verification - SLSA-compliant build provenance
- ๐ท๏ธ ZAP Security Scanning - OWASP ZAP dynamic application security testing
- โก Lighthouse Performance - Automated performance and accessibility audits
- Replace the example game in
src/components/with your game logic - Add game assets to the
public/assets/directory - Create your first PR to see automated labeling in action
- Run your first release to deploy to GitHub Pages
- Monitor security through the automatically generated security reports
All security workflows will protect your game from vulnerabilities while providing complete transparency through attestations and SBOM generation.
This template includes a fully configured development environment:
- ๐ GitHub Codespaces - Zero-configuration development environment
- ๐ค GitHub Copilot - AI-assisted development with code suggestions
- ๐ฌ Copilot Chat - In-editor AI assistance for debugging and explanations
- ๐ง VS Code Extensions - Pre-configured extensions for game development
- ๐ Secure Container - Hardened development container with security features
- ๐ MCP Servers - Model Context Protocol servers for enhanced Copilot capabilities
This repository is fully configured for GitHub Codespaces, providing:
- One-click setup - Start coding immediately with zero configuration
- Pre-installed dependencies - All tools and libraries ready to use
- Configured test environment - Cypress and Vitest ready to run
- GitHub Copilot integration - AI-powered code assistance with MCP servers
- Optimized performance - Container configured for game development
This repository is configured with Model Context Protocol (MCP) servers that enhance GitHub Copilot's capabilities:
- ๐๏ธ Filesystem Server - Secure file access for code navigation and editing
- ๐ GitHub Server - Repository context, issues, and PR integration
- ๐ Git Server - Version control history and code evolution understanding
- ๐ง Memory Server - Maintains context across Copilot conversations
- ๐ Brave Search Server - Documentation search (optional, requires API key)
- ๐ญ Playwright Server - Browser automation for testing and debugging
Configuration Files:
.github/copilot-setup-steps.yml- Pre-installation steps for Copilot agent.github/mcp-config.json- MCP server configuration.github/copilot-instructions.md- Coding guidelines for Copilotdocs/MCP_CONFIGURATION.md- Detailed MCP setup documentation
Learn More: See MCP Configuration Guide for detailed setup and usage instructions.
graph LR
A[Developer] -->|Opens in Codespace| B[Container Setup]
B -->|Auto-configures| C[Development Environment]
C -->|Provides| D[VS Code + Extensions]
C -->|Initializes| E[Node.js Environment]
C -->|Configures| F[Testing Tools]
D -->|Includes| G[GitHub Copilot]
D -->|Includes| H[ESLint Integration]
D -->|Includes| I[Debug Tools]
E -->|Installs| J[Three.js]
E -->|Installs| K[React 19]
E -->|Installs| L[TypeScript]
F -->|Prepares| M[Cypress E2E]
F -->|Prepares| N[Vitest Unit Tests]
G -->|Assists with| O[Game Logic]
G -->|Suggests| P[Game Components]
classDef primary fill:#e3f2fd,stroke:#1565c0,stroke-width:2px,color:#000
classDef tools fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px,color:#000
classDef ai fill:#fff3e0,stroke:#e65100,stroke-width:2px,color:#000
classDef testing fill:#f3e5f5,stroke:#4a148c,stroke-width:2px,color:#000
class A,B,C primary
class D,E,F tools
class G,O,P ai
class M,N testing
class J,K,L tools
class H,I tools
graph TD
A[๐ Code Push/PR] --> B{๐ก๏ธ Security Gates}
B --> |๐ Code Analysis| C[CodeQL Scanning]
B --> |๐ฆ Dependencies| D[Dependency Review]
B --> |๐ License Check| E[License Compliance]
B --> |๐๏ธ Supply Chain| F[OSSF Scorecard]
C --> |๐จ Vulnerabilities| G[Security Alerts]
D --> |โ ๏ธ Known CVEs| G
E --> |๏ฟฝ Invalid Licenses| G
F --> |๏ฟฝ๐ Security Score| H[Security Dashboard]
G --> I[๐ซ Block Merge]
H --> J[โ
Security Badge]
subgraph "๐ Protection Layers"
K[Runner Hardening]
L[Pinned Actions]
M[Audit Logging]
end
subgraph "๐งช Runtime Security Testing"
N[๐ท๏ธ ZAP DAST Scan]
O[โก Lighthouse Audit]
P[๐ Live Site Testing]
end
J --> N
N --> |๐ Dynamic Scan| O
O --> |๐ Performance Report| P
%% Styling
classDef security fill:#ffebee,stroke:#c62828,stroke-width:2px,color:#000
classDef analysis fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px,color:#000
classDef protection fill:#e3f2fd,stroke:#1565c0,stroke-width:2px,color:#000
classDef alert fill:#fff3e0,stroke:#ef6c00,stroke-width:2px,color:#000
classDef runtime fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#000
class A,B,I security
class C,D,E,F analysis
class K,L,M protection
class G,H,J alert
class N,O,P runtime
graph TD
A[๐ Code Push/PR] --> B{๐ Prepare Environment}
B --> |โ
Dependencies| C[๐๏ธ Build Validation]
B --> |โ
Cypress Cache| D[๐งช Unit Tests]
B --> |โ
Display Setup| E[๐ E2E Tests]
C --> |โ
Build Success| F{๐ Parallel Testing}
F --> D
F --> E
D --> |๐ Coverage Report| G[๐ Test Reports]
E --> |๐ฌ Videos & Screenshots| G
G --> H[๐ค Artifact Upload]
H --> I[โจ Combined Reports]
%% Styling
classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px,color:#000
classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px,color:#000
classDef test fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px,color:#000
classDef report fill:#fff3e0,stroke:#e65100,stroke-width:2px,color:#000
classDef artifact fill:#fce4ec,stroke:#880e4f,stroke-width:2px,color:#000
class A,I startEnd
class B,C,F process
class D,E test
class G,H report
class H artifact
# Using GitHub Codespaces
# Click "Code" button on repository and select "Open with Codespaces"
# Or local development:
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Run unit tests
npm run test
# Run E2E tests
npm run test:e2e
# Check license compliance
npm run test:licensesThis template uses Three.js for high-performance 3D game rendering:
- Modern WebGL-based 3D rendering
- Optimized performance with @react-three/fiber
- React integration via @react-three/fiber
- Useful helpers via @react-three/drei
- Sound support via Howler.js
- Responsive 3D canvas
- Touch and mouse input handling
- Camera controls with OrbitControls
Example game component:
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
export function Game() {
return (
<Canvas camera={{ position: [0, 2, 8], fov: 50 }}>
{/* Lighting */}
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} intensity={1} />
{/* 3D Objects */}
<mesh>
<sphereGeometry args={[0.5, 32, 32]} />
<meshStandardMaterial color="#00ff88" />
</mesh>
{/* Camera Controls */}
<OrbitControls />
</Canvas>
);
}- Uses Vitest with jsdom environment
- Configured for React Testing Library
- Coverage reports generated automatically
- Run with:
npm run test
- Uses Cypress for end-to-end testing
- Starts dev server automatically
- Screenshots and videos on failure
- Run with:
npm run test:e2e
- Automated checking of dependency licenses using
license-compliance - Only allows approved open-source licenses (MIT, Apache-2.0, BSD variants, ISC, CC0-1.0, Unlicense)
- Prevents dependencies with restrictive or unknown licenses
- Run with:
npm run test:licenses
- Automated SBOM quality assessment using SBOMQS during CI/CD builds
- Validates SBOM completeness across multiple standards (NTIA-minimum-elements, BSI v1.1/v2.0, Semantic, Quality, Sharing, Structural)
- Enforces minimum quality score of 7.0/10 to ensure high-quality Software Bill of Materials
- Checks for essential components: names, versions, unique IDs, suppliers, licenses, checksums, and dependency relationships
- Blocks builds with insufficient SBOM quality to maintain supply chain transparency
- Provides detailed quality reports with actionable feedback for improvement
flowchart LR
subgraph "๐ง CI Pipeline"
A1[๐ Code Changes] --> A2[๐ Lint & Type Check]
A2 --> A3[๐๏ธ Build]
A3 --> A4[๐งช Test]
A4 --> A5[๐ Report]
end
subgraph "๐ Security Pipeline"
S1[๐ก๏ธ CodeQL Analysis]
S2[๐ฆ Dependency Review]
S3[๐ OSSF Scorecard]
S4[๏ฟฝ SBOM Quality Check]
S5[๏ฟฝ๐ Runner Hardening]
end
subgraph "๐ Test Coverage"
B1[Unit Tests<br/>80%+ Coverage]
B2[E2E Tests<br/>Critical Flows]
B3[Type Safety<br/>Strict Mode]
end
subgraph "๐ฏ Outputs"
C1[๐ Coverage Reports]
C2[๐ฌ Test Videos]
C3[๐ธ Screenshots]
C4[๐ JUnit XML]
C5[๐ก๏ธ Security Reports]
end
A4 --> B1
A4 --> B2
A4 --> B3
A1 --> S1
A1 --> S2
A1 --> S3
A1 --> S4
A1 --> S5
A5 --> C1
A5 --> C2
A5 --> C3
A5 --> C4
S1 --> C5
S2 --> C5
S3 --> C5
S4 --> C5
%% Styling
classDef pipeline fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
classDef security fill:#ffebee,stroke:#c62828,stroke-width:2px
classDef testing fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
classDef output fill:#fff8e1,stroke:#f57c00,stroke-width:2px
class A1,A2,A3,A4,A5 pipeline
class S1,S2,S3,S4 security
class B1,B2,B3 testing
class C1,C2,C3,C4,C5 output
- CodeQL Analysis: Automated vulnerability scanning on push/PR
- Dependency Review: Checks for known vulnerabilities in dependencies
- License Compliance: Validates all dependencies use approved open-source licenses
- SBOM Quality Validation: Automated SBOM quality assessment using SBOMQS with minimum 7.0/10 score requirement
- OSSF Scorecard: Supply chain security assessment with public scoring
- Runner Hardening: All CI/CD runners use hardened security policies
This template includes a comprehensive, security-first release workflow with automated versioning, security attestations, and deployment.
flowchart TD
A[๐ Release Trigger] --> B{๐ Release Type}
B -->|๐ท๏ธ Tag Push| C[๐ Automatic Release]
B -->|โก Manual Dispatch| D[๐ Manual Release]
C --> E[๐ฆ Prepare Phase]
D --> E
E --> F[๐๏ธ Build & Test]
F --> G[๐ Security Validation]
G --> H[๐ Generate SBOM]
H --> I[๐ Create Attestations]
I --> J[๐ Draft Release Notes]
J --> K[๐ Deploy to Pages]
K --> L[๐ข Publish Release]
subgraph "๐ Security Layers"
M[SLSA Build Provenance]
N[SBOM Attestation]
O[Artifact Signing]
P[Supply Chain Verification]
end
I --> M
I --> N
I --> O
G --> P
%% Styling
classDef trigger fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
classDef security fill:#ffebee,stroke:#c62828,stroke-width:2px
classDef deploy fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
class A,B,C,D trigger
class E,F,J,K,L process
class G,H,I,M,N,O,P security
# Create and push a tag to trigger automatic release
git tag v1.0.0
git push origin v1.0.0- Navigate to Actions โ Build, Attest and Release
- Click Run workflow
- Specify version (e.g.,
v1.0.1) and pre-release status - The workflow handles version bumping and tagging automatically
Release notes are automatically generated using semantic labeling:
graph LR
A[๐ PR Labels] --> B[๐ Release Drafter]
B --> C[๐ Categorized Notes]
subgraph "๐ท๏ธ Label Categories"
D[๐ New Features]
E[๐ฎ Game Development]
F[๐ Security & Compliance]
G[๐ Bug Fixes]
H[๐ฆ Dependencies]
I[๐งช Test Coverage]
end
A --> D
A --> E
A --> F
A --> G
A --> H
A --> I
C --> J[๐ข GitHub Release]
classDef labels fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef process fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
classDef output fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
class D,E,F,G,H,I labels
class A,B,C process
class J output
- ๐ New Features - Major feature additions
- ๐ฎ Game Development - Game logic, graphics, audio improvements
- ๐จ UI/UX Improvements - Interface and design updates
- ๐๏ธ Infrastructure & Performance - Build and performance optimizations
- ๐ Code Quality & Refactoring - Code improvements and testing
- ๐ Security & Compliance - Security updates and fixes
- ๐ Documentation - Documentation improvements
- ๐ฆ Dependencies - Dependency updates
- ๐ Bug Fixes - Bug fixes and patches
Every release includes a comprehensive SBOM in SPDX format:
{
"SPDXID": "SPDXRef-DOCUMENT",
"name": "game-v1.0.0",
"packages": [
{
"SPDXID": "SPDXRef-Package-react",
"name": "react",
"versionInfo": "19.1.0",
"licenseConcluded": "MIT"
}
]
}SLSA-compliant build attestations provide cryptographic proof:
{
"_type": "https://in-toto.io/Statement/v0.1",
"predicateType": "https://slsa.dev/provenance/v0.2",
"subject": [
{
"name": "game-v1.0.0.zip",
"digest": {
"sha256": "abc123..."
}
}
],
"predicate": {
"builder": {
"id": "https://github.com/actions/runner"
},
"buildType": "https://github.com/actions/workflow@v1"
}
}# Verify build provenance
gh attestation verify game-v1.0.0.zip \
--owner Hack23 --repo game
# Verify SBOM attestation
gh attestation verify game-v1.0.0.zip \
--owner Hack23 --repo game \
--predicate-type https://spdx.dev/DocumentThis repository uses GitHub's immutable releases to prevent unauthorized modifications to published releases.
Immutable releases lock release artifacts after publication, ensuring:
- ๐ก๏ธ Supply Chain Security - Artifacts cannot be tampered with
- ๐ Build Integrity - Original builds remain unchanged
- ๐ Audit Trail - Complete release history
Only release title and notes can be modified after publication.
- Go to Settings โ General
- Scroll to the "Releases" section
- Check "Enable release immutability"
โ ๏ธ Only applies to future releases
- Go to Organization Settings โ Repository โ General
- In "Releases" section, select policy:
- All repositories - Apply to all org repos
- Selected repositories - Choose specific repos
โ ๏ธ Only applies to future releases
# Verify release artifacts haven't been tampered with
gh attestation verify game-v1.1.4.zip --owner Hack23 --repo gamePart of our security-first approach alongside OSSF Scorecard, SLSA attestations, and automated scanning.
Each release includes multiple artifacts with full traceability:
๐ฆ Release v1.0.0
โโโ ๐ฎ game-v1.0.0.zip # Built application
โโโ ๐ game-v1.0.0.spdx.json # Software Bill of Materials
โโโ ๐ game-v1.0.0.zip.intoto.jsonl # Build provenance attestation
โโโ ๐ game-v1.0.0.spdx.json.intoto.jsonl # SBOM attestation
sequenceDiagram
participant Dev as ๐จโ๐ป Developer
participant GH as ๐ GitHub
participant CI as ๐ CI/CD
participant Sec as ๐ Security
participant Pages as ๐ GitHub Pages
Dev->>GH: ๐ท๏ธ Push Tag/Manual Trigger
GH->>CI: ๐ Start Release Workflow
CI->>CI: ๐งช Run Tests & Build
CI->>Sec: ๐ Security Scans
Sec-->>CI: โ
Security Validated
CI->>Sec: ๐ Generate SBOM
CI->>Sec: ๐ Create Attestations
Sec-->>CI: ๐ Security Artifacts Ready
CI->>GH: ๐ Draft Release Notes
CI->>GH: ๐ฆ Upload Artifacts
CI->>Pages: ๐ Deploy Application
Pages-->>CI: โ
Deployment Success
CI->>GH: ๐ข Publish Release
GH-->>Dev: ๐ Release Complete
- Automated scoring of supply chain security practices
- Public transparency with security badge
- Continuous monitoring of security posture
- Pinned dependencies - All GitHub Actions pinned to SHA hashes
- Dependency scanning - Automated vulnerability detection
- SLSA compliance - Build integrity and provenance
- Signed artifacts - Cryptographic verification of releases
Track release quality and security with built-in metrics:
- ๐ Security Score - OSSF Scorecard rating
- ๐ Test Coverage - Unit and E2E test coverage
- ๐ท๏ธ Vulnerability Count - Known security issues
- ๐ฆ Dependency Health - Outdated/vulnerable dependencies
- ๐ Build Success Rate - CI/CD pipeline reliability
This template provides a secure foundation for game development:
- Replace the counter example with your game logic
- Add game-specific components in
src/components/ - Create game state management (Context API, Zustand, etc.)
- Add unit tests for game logic
- Create E2E tests for game flows
- Create releases using the automated workflow
- Monitor security through OSSF Scorecard and attestations
- Deploy using the included security-hardened GitHub Actions
All security workflows will automatically protect your game from common vulnerabilities and supply chain attacks, while providing full transparency through SBOM and attestations.
- Copilot Quick Start Guide - Get started with GitHub Copilot in this repository
- MCP Configuration Guide - Model Context Protocol setup and usage
- MCP Architecture - Visual guide to MCP integration
- Copilot Instructions - Coding guidelines for AI assistance
- Security Policy - Security practices and vulnerability reporting
Happy gaming! ๐ฎ๐