Skip to content

Latest commit

 

History

History
387 lines (268 loc) · 11.7 KB

00-setup.md

File metadata and controls

387 lines (268 loc) · 11.7 KB

00: Development Environment

In this step, you're setting up development environment for the workshop.

Prerequisites

Refer to the README doc for preparation.

Getting Started

Use GitHub Codespaces

  1. Click this link 👉 Open in GitHub Codespaces

  2. Once the GitHub Codespace instance is ready, open a terminal and run the following command to check out everything you need has been properly installed or not.

    # Python
python --version
    # Node.js
node --version
npm --version

    # JDK
java --version
    # .NET SDK
dotnet --list-sdks

  3. Check out your repository status.

    git remote -v

    You should be able to see the following.

    origin  https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch)
origin  https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push)

    If you see something different from above, delete the GitHub Codespace instance and recreate it.

  4. Move down to the Set-up MCP Servers section.

👇👇👇 Instead, if you'd like to use VS Code on your local machine, follow the instruction below. The section below doesn't apply to those who use GitHub Codespaces. 👇👇👇

Use Visual Studio Code

Install PowerShell 👉 For Windows Users

  1. Check whether you've already installed PowerShell or not.

    # Bash/Zsh
which pwsh
    # PowerShell
Get-Command pwsh

    If you don't see the command path of pwsh, it means you haven't installed PowerShell yet. Visit PowerShell installation page and follow the instructions.

  2. Check out the version of your PowerShell.

    pwsh --version

    7.5.0 or higher is recommended. If yours is lower than that, visit PowerShell installation page and follow the instructions.

Install git CLI

  1. Check whether you've already installed git CLI or not.

    # Bash/Zsh
which git
    # PowerShell
Get-Command git

    If you don't see the command path of git, it means you haven't installed the git CLI yet. Visit git CLI installation page and follow the instructions.

  2. Check out the version of your git CLI.

    git --version

    2.39.0 or higher is recommended. If yours is lower than that, visit git CLI installation page and follow the instructions.

Install GitHub CLI

  1. Check whether you've already installed GitHub CLI or not.

    # Bash/Zsh
which gh
    # PowerShell
Get-Command gh

    If you don't see the command path of gh, it means you haven't installed the GitHub CLI yet. Visit GitHub CLI installation page and follow the instructions.

  2. Check out the version of your GitHub CLI.

    gh --version

    2.65.0 or higher is recommended. If yours is lower than that, visit GitHub CLI installation page and follow the instructions.

  3. Check whether you've signed into GitHub or not.

    gh auth status

    If you haven't signed in yet, run gh auth login and sign-in.

Install Docker Desktop

  1. Check whether you've already installed Docker Desktop or not.

    # Bash/Zsh
which docker
    # PowerShell
Get-Command docker

    If you don't see the command path of docker, it means you haven't installed Docker Desktop yet. Visit Docker Desktop installation page and follow the instructions.

  2. Check out the version of your Docker CLI.

    docker --version

    28.0.4 or higher is recommended. If yours is lower than that, visit Docker Desktop installation page and follow the instructions.

Install Visual Studio Code

  1. Check whether you've already installed VS Code or not.

    # Bash/Zsh
which code
    # PowerShell
Get-Command code

    If you don't see the command path of code, it means you haven't installed VS Code yet. Visit Visual Studio Code installation page and follow the instructions.

  2. Check out the version of your VS Code.

    code --version

    1.99.0 or higher is recommended. If yours is lower than that, visit Visual Studio Code installation page and follow the instructions.

    NOTE: You might not be able to execute the code command. In this case, follow this document for setup.

Start Visual Studio Code

  1. Create a working directory.

  2. Run the command to fork this repo and clone it to your local machine.

    gh repo fork microsoft/github-copilot-vibe-coding-workshop --clone

  3. Navigate into the cloned directory.

    cd github-copilot-vibe-coding-workshop

  4. Run VS Code from the terminal.

    code .

  5. Open a new terminal within VS Code and run the following command to check out your repository status.

    git remote -v

    You should be able to see the following. If you see microsoft in origin, you should clone it again from your forked repository.

    origin  https://github.com/<your GitHub ID>/github-copilot-vibe-coding-workshop.git (fetch)
origin  https://github.com/<your GitHub ID>/github-copilot-vibe-coding-workshop.git (push)
upstream        https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch)
upstream        https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push)

  6. Check out whether both extensions have been installed or not – GitHub Copilot and GitHub Copilot Chat.

    # Bash/Zsh
code --list-extensions | grep github.copilot
    # PowerShell
code --list-extensions | Select-String "github.copilot"

    If you see nothing, it means you haven't installed those extensions yet. Run the following command to install the extensions.

    code --install-extension "github.copilot" --force && code --install-extension "github.copilot-chat" --force

Set-up MCP Servers

  1. Make sure Docker Desktop is up and running if you use VS Code on your local machine.

  2. Set the environment variable of $REPOSITORY_ROOT.

    # bash/zsh
REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
    # PowerShell
$REPOSITORY_ROOT = git rev-parse --show-toplevel

  3. Copy MCP server settings.

    # bash/zsh
cp -r $REPOSITORY_ROOT/docs/.vscode/. \
      $REPOSITORY_ROOT/.vscode/
    # PowerShell
Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/* `
          -Destination $REPOSITORY_ROOT/.vscode/ -Recurse -Force

  4. Open Command Palette by typing F1 or Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac OS, and search MCP: List Servers.

  5. Choose context7 then click Start Server.

  6. Choose awesome-copilot then click Start Server.

Check GitHub Copilot Agent Mode

  1. Click the GitHub Copilot icon on the top of GitHub Codespace or VS Code and open GitHub Copilot window.

    Open GitHub Copilot Chat

  2. If you're asked to login or sign up, do it. It's free of charge.

  3. Make sure you're using GitHub Copilot Agent Mode.

    GitHub Copilot Agent Mode

  4. Select model to either GPT-4.1 or Claude Sonnet 4.

Configure Beast Mode

  1. Enter the /mcp.awesome-copilot.get_search_prompt, followed by entering keywords like "beast mode"

    It should show list of beast chatmodes. Enter a prompt similar to 4.1 Beast Chat Mode. Then it will save it under the .github/chatmodes directory.

  2. Choose the 4.1-Beast mode instead of the Agent mode. It will automatically change LLM to GPT 4.1.

  3. Set the environment variable of $REPOSITORY_ROOT.

    # bash/zsh
REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
    # PowerShell
$REPOSITORY_ROOT = git rev-parse --show-toplevel

  4. Copy workspace settings.

    # bash/zsh
cp $REPOSITORY_ROOT/docs/.vscode/settings.json \
   $REPOSITORY_ROOT/.vscode/settings.json
    # PowerShell
Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/settings.json `
          -Destination $REPOSITORY_ROOT/.vscode/settings.json -Force

Prepare Custom Instructions

  1. Set the environment variable of $REPOSITORY_ROOT.

    # bash/zsh
REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
    # PowerShell
$REPOSITORY_ROOT = git rev-parse --show-toplevel

  2. Copy custom instructions.

    # bash/zsh
cp -r $REPOSITORY_ROOT/docs/custom-instructions/setup/. \
      $REPOSITORY_ROOT/.github/
    # PowerShell
Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/setup/* `
          -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force

Analyze Product Requirements Document (PRD) and Design API

  1. Make sure that you're using GitHub Copilot Agent Mode with the model of Claude Sonnet 4 or GPT-4.1.

  2. Add product-requirements.md to GitHub Copilot.

  3. Enter the prompt like the following for GitHub Copilot Agent to generate an OpenAPI document for you. This OpenAPI document will be the base of your entire application.

    Here's the PRD for you. Carefully read through the entire PRD and do the following for me.

- Identify all the steps first, which you're going to do.
- Generate an OpenAPI document in YAML format.
- The OpenAPI document should capture all API endpoints, parameters and request/response payloads.
- Assume the API server is `http://localhost:8080` and the base URL is `/api`.
- Save it to the `openapi.yaml` file at the repository root.

  4. Verify the openapi.yaml is generated at the repository root.

  5. Click the [keep] button of GitHub Copilot to take the openapi.yaml file.

OK. You've completed the "Development Environment" step. Let's move onto STEP 01: Python Backend Development.