microsoft / microsoft/generative-ai-with-javascript

feat: optimize development experience in GitHub Codespaces

Open
#19 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
1.3k
Forks
841
Avg merge
1d 3h
Merged PRs (30d)
1

Description

The repository already has a configured devcontainer, but we can further enhance the experience by ensuring that users can start the project even faster and with a more streamlined setup inside GitHub Codespaces.


Proposed Improvements:
1️⃣ Automate Project Initialization
  • Currently, users must manually run npm start after Codespaces loads.
  • We can automate this process so that the project starts as soon as Codespaces is ready.

Suggested update to postCreateCommand:

"postCreateCommand": "npm install -g ollamazure tsx; npm ci; cd videos/demos && npm ci && cd ../.. && npm start"

✅ Impact: The project starts automatically when opening Codespaces, reducing manual steps.


2️⃣ Improve Instructions in README
  • Update the README steps to clearly indicate that the project automatically installs dependencies and starts running.
  • Highlight the Codespaces button for better visibility.

Suggested README update:

## 🚀 Quick Start with GitHub Codespaces  
Click the button below to start coding instantly:  

[![Open in GitHub Codespaces](https://img.shields.io/badge/Open%20in-GitHub%20Codespaces-blue?logo=github)](https://codespaces.new/microsoft/generative-ai-with-javascript)  

Once the Codespaces environment loads, the project will **automatically install dependencies and start running**. No need to run extra commands!  

Impact: Improves onboarding experience and reduces manual steps.


3️⃣ Improve Performance by Pre-Installing Dependencies

Installing dependencies inside Codespaces can slow down the first-time setup. Instead of relying on fresh npm install runs, we can pre-install dependencies inside a Dockerfile to speed up initialization.

📌 Suggested changes:

  1. Modify .devcontainer/devcontainer.json to use a Dockerfile:
{
  "build": {
    "dockerfile": "Dockerfile"
  }
}
  1. Create a Dockerfile in .devcontainer/ with:
FROM mcr.microsoft.com/devcontainers/javascript-node:20-bullseye
WORKDIR /workspace
COPY package.json package-lock.json ./
RUN npm ci
COPY . .

Impact: Dependencies are pre-installed during the container build, reducing the setup time when launching Codespaces.


Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by inspecting .devcontainer/devcontainer.json and the current README instructions, then review the proposed postCreateCommand and Dockerfile changes. Check how the root and videos/demos dependencies are installed and how npm start is launched. Done means a fresh GitHub Codespace initializes and starts automatically, with the README clearly documenting that workflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
docker, javascript, node.js
Domain
build-system, developer-experience, devops, documentation
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.