GitHub Advanced Features: Codespaces, Copilot, Projects, and More

┌─────────────────────────────────────────────────────────────┐
│                  CODESPACES ARCHITECTURE                     │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   Your Browser/VS Code                                       │
│          │                                                   │
│          │ WebSocket connection                              │
│          ▼                                                   │
│   ┌─────────────────────────────────────────────────────┐   │
│   │              GitHub Cloud                            │   │
│   │  ┌─────────────────────────────────────────────┐    │   │
│   │  │            Codespace VM                      │    │   │
│   │  │  ┌──────────────────────────────────────┐   │    │   │
│   │  │  │  VS Code Server                      │   │    │   │
│   │  │  │  ├── Extensions                      │   │    │   │
│   │  │  │  ├── Language servers                │   │    │   │
│   │  │  │  └── Terminal                        │   │    │   │
│   │  │  └──────────────────────────────────────┘   │    │   │
│   │  │  ┌──────────────────────────────────────┐   │    │   │
│   │  │  │  Your Repository (cloned)            │   │    │   │
│   │  │  │  Docker, Node, Python, etc.          │   │    │   │
│   │  │  └──────────────────────────────────────┘   │    │   │
│   │  └─────────────────────────────────────────────┘    │   │
│   └─────────────────────────────────────────────────────┘   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

# From GitHub.com
# 1. Navigate to repository
# 2. Click "Code" button
# 3. Select "Codespaces" tab
# 4. Click "Create codespace on main"

# From GitHub CLI
gh codespace create --repo owner/repo

# List your codespaces
gh codespace list

# Open in VS Code
gh codespace code --codespace <name>

{
  "name": "Node.js Development",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",

  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },

  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "ms-azuretools.vscode-docker",
        "GitHub.copilot"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
    }
  },

  "forwardPorts": [3000, 5432],
  "postCreateCommand": "npm install",
  "postStartCommand": "npm run dev",

  "remoteUser": "node"
}

FROM mcr.microsoft.com/devcontainers/javascript-node:20

# Install additional tools
RUN apt-get update && apt-get install -y \
    postgresql-client \
    redis-tools \
    && rm -rf /var/lib/apt/lists/*

# Install global npm packages
RUN npm install -g pnpm turbo

# Pre-install dependencies for faster startup
WORKDIR /workspaces
COPY package*.json ./
RUN npm ci

{
  "name": "Custom Environment",
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  }
}

// Type a comment describing what you want
// Function to calculate the nth Fibonacci number
function fibonacci(n: number): number {
  // Copilot suggests the implementation
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Write: "test for fibonacci function"
describe('fibonacci', () => {
  it('returns 0 for input 0', () => {
    expect(fibonacci(0)).toBe(0);
  });

  it('returns 1 for input 1', () => {
    expect(fibonacci(1)).toBe(1);
  });

  it('returns 55 for input 10', () => {
    expect(fibonacci(10)).toBe(55);
  });
});

/**
 * Type this and let Copilot complete:
 * Calculates the nth Fibonacci number using recursion.
 * @param n - The position in the Fibonacci sequence
 * @returns The Fibonacci number at position n
 * @example fibonacci(10) // returns 55
 */

/explain   - Explain selected code
/fix       - Suggest a fix for problems
/tests     - Generate tests for code
/docs      - Generate documentation
@workspace - Ask about entire codebase

┌─────────────────────────────────────────────────────────────┐
│                    PROJECT VIEWS                             │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   BOARD VIEW (Kanban)                                       │
│   ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐      │
│   │   Todo   │ │In Progress│ │  Review  │ │   Done   │      │
│   ├──────────┤ ├──────────┤ ├──────────┤ ├──────────┤      │
│   │ Issue #1 │ │ Issue #3 │ │ Issue #5 │ │ Issue #7 │      │
│   │ Issue #2 │ │ Issue #4 │ │          │ │ Issue #8 │      │
│   └──────────┘ └──────────┘ └──────────┘ └──────────┘      │
│                                                              │
│   TABLE VIEW (Spreadsheet)                                   │
│   ┌─────────────────────────────────────────────────────┐   │
│   │ Title      │ Status    │ Assignee │ Sprint │ Points │   │
│   ├────────────┼───────────┼──────────┼────────┼────────┤   │
│   │ Issue #1   │ Todo      │ @alice   │ Sprint1│   3    │   │
│   │ Issue #2   │ In Progress│ @bob    │ Sprint1│   5    │   │
│   └─────────────────────────────────────────────────────┘   │
│                                                              │
│   ROADMAP VIEW (Timeline)                                    │
│   ┌─────────────────────────────────────────────────────┐   │
│   │ Jan        Feb        Mar        Apr                │   │
│   │ ═══════════                                         │   │
│   │    Feature A                                        │   │
│   │            ═══════════════                          │   │
│   │               Feature B                             │   │
│   └─────────────────────────────────────────────────────┘   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

# Auto-set status when PR is merged
When: Pull request is merged
Then: Set Status to "Done"

# Auto-add items from issues
When: Issue is added to project
Then: Set Status to "Todo"

# Auto-archive completed items
When: Status changes to "Done"
Then: Archive item after 14 days

ISSUES                          DISCUSSIONS
──────                          ───────────
• Bugs to fix                   • "How do I...?" questions
• Feature requests (confirmed)  • Feature brainstorming
• Tasks with clear scope        • Announcements
• Actionable work items         • Community chat
                                • Polls and feedback

@myorg:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

{
  "name": "@myorg/my-package",
  "version": "1.0.0",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }
}

# Login
npm login --registry=https://npm.pkg.github.com

# Publish
npm publish

# Login to GitHub Container Registry
echo $GITHUB_TOKEN | docker login ghcr.io -u USERNAME --password-stdin

# Tag image
docker tag my-image ghcr.io/myorg/my-image:latest

# Push
docker push ghcr.io/myorg/my-image:latest

name: Publish Docker

on:
  release:
    types: [published]

jobs:
  push:
    runs-on: ubuntu-latest
    permissions:
      packages: write
      contents: read

    steps:
      - uses: actions/checkout@v4

      - name: Login to GHCR
        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Build and push
        uses: docker/build-push-action@v5
        with:
          push: true
          tags: ghcr.io/${{ github.repository }}:${{ github.ref_name }}

name: Deploy to Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install and build
        run: |
          npm ci
          npm run build

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to Pages
        id: deployment
        uses: actions/deploy-pages@v4

# DNS records
A     185.199.108.153
A     185.199.109.153
A     185.199.110.153
A     185.199.111.153
# Or
CNAME username.github.io

# macOS
brew install gh

# Windows
winget install GitHub.cli

# Linux
sudo apt install gh

# Interactive login
gh auth login

# Check status
gh auth status

# Create PR
gh pr create --title "Feature" --body "Description"

# Create draft PR
gh pr create --draft

# List PRs
gh pr list

# View PR
gh pr view 123

# Check out PR locally
gh pr checkout 123

# Merge PR
gh pr merge 123 --squash

# Review PR
gh pr review 123 --approve

# Create issue
gh issue create --title "Bug" --body "Description"

# List issues
gh issue list --label bug

# View issue
gh issue view 456

# Close issue
gh issue close 456

# List workflow runs
gh run list

# View specific run
gh run view 789

# Watch run in progress
gh run watch

# Re-run failed jobs
gh run rerun 789 --failed

# Download artifacts
gh run download 789

# Clone repo
gh repo clone owner/repo

# Create repo
gh repo create my-project --public

# Fork repo
gh repo fork owner/repo

# View repo in browser
gh repo view --web

# Add alias
gh alias set prc 'pr create --fill'
gh alias set prl 'pr list --author @me'

# Use alias
gh prc  # Creates PR with auto-filled title/body

# Make API requests
gh api repos/owner/repo/issues

# POST request
gh api repos/owner/repo/issues -f title="New Issue" -f body="Details"

# GraphQL
gh api graphql -f query='{ viewer { login } }'