Skip to content

feat: Add GitHub Codespaces support to Learning project #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mscarpenter wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: Add GitHub Codespaces support to Learning project #170

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40e1fc6
feat: Add GitHub Codespaces support to Learning project
mscarpenter Nov 25, 2025
ce47d24
chore: Address PR feedback (automate setup & add badge)
mscarpenter Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions learning/.devcontainer/devcontainer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "Gemini Learning - Pedagogical Concept Graph",
"image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
"features": {
"ghcr.io/devcontainers/features/git:1": {},
"ghcr.io/devcontainers/features/github-cli:1": {}
},
"forwardPorts": [
3000
],
"portsAttributes": {
"3000": {
"label": "Learning App",
"onAutoForward": "notify"
}
},
"postCreateCommand": "npm install",
"postStartCommand": "echo '🚀 Ready! Run: npm run dev' && echo '📝 Set GOOGLE_API_KEY in .env.local (copy from .env.example)'",
"remoteUser": "node"
}
Copy link

@gemini-code-assist gemini-code-assist bot Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This is a great start for the devcontainer configuration! To make it even more seamless for developers, you could make a couple of improvements:

  1. Automate .env.local creation: The postStartCommand can be updated to automatically copy .env.example to .env.local if it doesn't exist. This saves the user a manual step.
  2. Add recommended VS Code extensions: Including extensions like ESLint, Prettier, and Tailwind CSS in a customizations block ensures everyone has a consistent and optimized development environment.

Here is a suggested version incorporating these changes.

{
    "name": "Gemini Learning - Pedagogical Concept Graph",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
    "features": {
        "ghcr.io/devcontainers/features/git:1": {},
        "ghcr.io/devcontainers/features/github-cli:1": {}
    },
    "customizations": {
        "vscode": {
            "extensions": [
                "dbaeumer.vscode-eslint",
                "esbenp.prettier-vscode",
                "bradlc.vscode-tailwindcss"
            ]
        }
    },
    "forwardPorts": [
        3000
    ],
    "portsAttributes": {
        "3000": {
            "label": "Learning App",
            "onAutoForward": "notify"
        }
    },
    "postCreateCommand": "npm install",
    "postStartCommand": "if [ ! -f .env.local ]; then cp .env.example .env.local && echo '✅ Created .env.local from .env.example.'; fi && echo '🚀 Ready! Run: npm run dev' && echo '📝 Set GOOGLE_API_KEY in .env.local'",
    "remoteUser": "node"
}

3 changes: 3 additions & 0 deletions learning/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Google Gemini API Key
# Get your API key from: https://aistudio.google.com/app/apikey
GOOGLE_API_KEY=your_api_key_here
1 change: 1 addition & 0 deletions learning/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ yarn-error.log*

# env files (can opt-in for committing if needed)
.env*
!.env.example

# vercel
.vercel
Expand Down
32 changes: 30 additions & 2 deletions learning/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,37 @@ learning/
└── NOTES.md # Detailed design documentation
```

## Getting Started

### Prerequisites
### 🚀 Quick Start with GitHub Codespaces

The fastest way to get started is using GitHub Codespaces - no local setup required!
Copy link

@gemini-code-assist gemini-code-assist bot Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

To make it even easier for users to start a Codespace, you can add an "Open in GitHub Codespaces" badge. This provides a one-click way to launch the environment directly from the README.

Suggested change
The fastest way to get started is using GitHub Codespaces - no local setup required!
The fastest way to get started is using GitHub Codespaces - no local setup required!
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/google-gemini/workshops)


1. **Open in Codespaces**
- Navigate to the [workshops repository](https://github.com/google-gemini/workshops)
- Click **Code** → **Codespaces** → **Create codespace on main**
- Wait for the environment to initialize (~2-3 minutes)

2. **Set up your API key**
```bash
cp .env.example .env.local
# Edit .env.local and add your GOOGLE_API_KEY from https://aistudio.google.com/app/apikey
Copy link

@gemini-code-assist gemini-code-assist bot Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

If you adopt the suggestion to automate the creation of .env.local in devcontainer.json, these instructions should be updated to reflect that the user no longer needs to manually copy the file. This will make the setup process even smoother and less error-prone.

Suggested change
cp .env.example .env.local
# Edit .env.local and add your GOOGLE_API_KEY from https://aistudio.google.com/app/apikey
# A .env.local file is automatically created for you when the Codespace starts.
# Edit .env.local and add your GOOGLE_API_KEY from https://aistudio.google.com/app/apikey

Copy link
Collaborator

@klutometis klutometis Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, @mscarpenter! Can you sign the CLA (see above); so we can merge?

Copy link
Author

@mscarpenter mscarpenter Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @klutometis! I've signed the CLA and the checks are passing now. Ready for merge!

```

3. **Start the development server**
```bash
npm run dev
```

4. **Open the app**
- VSCode will show a notification to open the forwarded port
- Click **Open in Browser** or navigate to the **Ports** tab

That's it! The application is now running in your browser. 🎉

---

### Prerequisites (Local Development)


- Node.js 18+ and npm
- Google API Key with access to Gemini API
Expand Down