Merge pull request #2 from copilot-dev-days/fix/workshop-instructions

Fix workshop instruction issues and surface CLI workshop on GitHub Pages

Author: brunoborges

doc-media/create-skill.png

@@ -28,7 +28,8 @@
             <h1>App Modernization with GitHub Copilot</h1>
             <p class="hero-subtitle">Modernize a legacy Java application using GitHub Copilot. Assess, upgrade frameworks, add health endpoints, and containerize — all with AI-powered assistance.</p>
             <div class="hero-cta">
-                <a href="step.html?step=00-overview" class="btn btn-primary">🚀 Start Workshop</a>
+                <a href="step.html?step=00-overview" class="btn btn-primary">🚀 Start IDE Workshop</a>
+                <a href="step.html?variant=cli&step=00-overview" class="btn btn-primary">🖥️ Start CLI Workshop</a>
                 <a href="https://github.com/copilot-dev-days/appmod-workshop-java" class="btn btn-secondary" target="_blank">⭐ GitHub Repo</a>
             </div>
             <div class="stats">
@@ -78,7 +79,7 @@ <h3>Containerization</h3>
 
     <section class="workshop">
         <div class="container">
-            <h2 class="section-title">Workshop Parts</h2>
+            <h2 class="section-title">IDE Workshop (VS Code / IntelliJ)</h2>
             <div class="parts-list">
                 <a href="step.html?step=00-overview" class="part-card">
                     <div class="part-number">📚</div>
@@ -139,6 +140,62 @@ <h3>Copilot Prompts Guide</h3>
         </div>
     </section>
 
+    <section class="workshop">
+        <div class="container">
+            <h2 class="section-title">CLI Workshop (Terminal / No IDE)</h2>
+            <div class="parts-list">
+                <a href="step.html?variant=cli&step=00-overview" class="part-card">
+                    <div class="part-number">📚</div>
+                    <div class="part-content">
+                        <h3>Workshop Overview</h3>
+                        <p>What you'll build, learn, and time estimates</p>
+                    </div>
+                    <span class="part-time">5 min</span>
+                </a>
+                <a href="step.html?variant=cli&step=01-prerequisites" class="part-card">
+                    <div class="part-number">01</div>
+                    <div class="part-content">
+                        <h3>Prerequisites & Setup</h3>
+                        <p>Install Copilot CLI, Node.js 22+, and required tools</p>
+                    </div>
+                    <span class="part-time">5 min</span>
+                </a>
+                <a href="step.html?variant=cli&step=02-assess" class="part-card">
+                    <div class="part-number">02</div>
+                    <div class="part-content">
+                        <h3>Start Copilot CLI</h3>
+                        <p>Launch Copilot CLI and add the MCP modernization server</p>
+                    </div>
+                    <span class="part-time">5 min</span>
+                </a>
+                <a href="step.html?variant=cli&step=03-upgrade" class="part-card">
+                    <div class="part-number">03</div>
+                    <div class="part-content">
+                        <h3>Upgrade Runtime & Frameworks</h3>
+                        <p>Upgrade Java 8→21 and Spring Boot 2.x→3.x via natural language</p>
+                    </div>
+                    <span class="part-time">10 min</span>
+                </a>
+                <a href="step.html?variant=cli&step=04-health-endpoints" class="part-card">
+                    <div class="part-number">04</div>
+                    <div class="part-content">
+                        <h3>Health Endpoints</h3>
+                        <p>Add health endpoints using a natural language prompt</p>
+                    </div>
+                    <span class="part-time">10 min</span>
+                </a>
+                <a href="step.html?variant=cli&step=05-containerize" class="part-card">
+                    <div class="part-number">05</div>
+                    <div class="part-content">
+                        <h3>Containerize Applications</h3>
+                        <p>Generate Dockerfiles via natural language prompt</p>
+                    </div>
+                    <span class="part-time">5 min</span>
+                </a>
+            </div>
+        </div>
+    </section>
+
     <section class="prereqs">
         <div class="container">
             <h2 class="section-title">Prerequisites</h2>

docs/index.html

@@ -38,7 +38,7 @@
     <div class="layout">
         <aside class="sidebar">
             <div class="sidebar-section">
-                <div class="sidebar-title">Workshop Steps</div>
+                <div class="sidebar-title" id="sidebarTitle">Workshop Steps</div>
                 <nav id="stepNav"></nav>
             </div>
         </aside>
@@ -54,7 +54,7 @@
     </div>
 
     <script>
-        const steps = [
+        const ideSteps = [
             { id: '00-overview', file: 'workshop/00-overview.md', title: 'Workshop Overview', number: '📚' },
             { id: '01-prerequisites', file: 'workshop/01-prerequisites.md', title: 'Prerequisites & Setup', number: '01' },
             { id: '02-assess', file: 'workshop/02-assess.md', title: 'Assess Your Application', number: '02' },
@@ -64,6 +64,24 @@
             { id: 'prompts', file: 'PROMPTS.md', title: 'Copilot Prompts Guide', number: '📖' },
         ];
 
+        const cliSteps = [
+            { id: '00-overview', file: 'workshop-cli/00-overview.md', title: 'Workshop Overview', number: '📚' },
+            { id: '01-prerequisites', file: 'workshop-cli/01-prerequisites.md', title: 'Prerequisites & Setup', number: '01' },
+            { id: '02-assess', file: 'workshop-cli/02-assess.md', title: 'Start Copilot CLI', number: '02' },
+            { id: '03-upgrade', file: 'workshop-cli/03-upgrade.md', title: 'Upgrade Runtime & Frameworks', number: '03' },
+            { id: '04-health-endpoints', file: 'workshop-cli/04-health-endpoints.md', title: 'Health Endpoints', number: '04' },
+            { id: '05-containerize', file: 'workshop-cli/05-containerize.md', title: 'Containerize Applications', number: '05' },
+        ];
+
+        function getVariant() {
+            const params = new URLSearchParams(window.location.search);
+            return params.get('variant') === 'cli' ? 'cli' : 'ide';
+        }
+
+        const variant = getVariant();
+        const steps = variant === 'cli' ? cliSteps : ideSteps;
+        const variantParam = variant === 'cli' ? 'variant=cli&' : '';
+
         const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' || window.location.protocol === 'file:';
         const GITHUB_RAW_BASE = isLocal ? '../' : 'https://raw.githubusercontent.com/copilot-dev-days/appmod-workshop-java/main/';
 
@@ -76,8 +94,9 @@
 
         function buildSidebar() {
             const nav = document.getElementById('stepNav');
+            document.getElementById('sidebarTitle').textContent = variant === 'cli' ? 'CLI Workshop Steps' : 'Workshop Steps';
             nav.innerHTML = steps.map((step, i) => `
-                <a href="?step=${step.id}" class="step-link ${i === currentIndex ? 'active' : ''}" data-index="${i}">
+                <a href="?${variantParam}step=${step.id}" class="step-link ${i === currentIndex ? 'active' : ''}" data-index="${i}">
                     <span class="step-number">${step.number}</span>
                     <span>${step.title}</span>
                 </a>
@@ -94,15 +113,15 @@
             const prev = currentIndex > 0 ? steps[currentIndex - 1] : null;
             const next = currentIndex < steps.length - 1 ? steps[currentIndex + 1] : null;
             footer.innerHTML = `
-                <a href="${prev ? '?step=' + prev.id : '#'}" class="nav-footer-btn ${!prev ? 'disabled' : ''}">← ${prev ? prev.title : 'Previous'}</a>
-                <a href="${next ? '?step=' + next.id : '#'}" class="nav-footer-btn ${!next ? 'disabled' : ''}">${next ? next.title : 'Next'} →</a>
+                <a href="${prev ? '?' + variantParam + 'step=' + prev.id : '#'}" class="nav-footer-btn ${!prev ? 'disabled' : ''}">← ${prev ? prev.title : 'Previous'}</a>
+                <a href="${next ? '?' + variantParam + 'step=' + next.id : '#'}" class="nav-footer-btn ${!next ? 'disabled' : ''}">${next ? next.title : 'Next'} →</a>
             `;
         }
 
         function navigate(direction) {
             const newIndex = currentIndex + direction;
             if (newIndex >= 0 && newIndex < steps.length) {
-                window.location.href = `?step=${steps[newIndex].id}`;
+                window.location.href = `?${variantParam}step=${steps[newIndex].id}`;
             }
         }
 

docs/step.html

@@ -0,0 +1,42 @@
+# App Modernization Workshop (Copilot CLI)
+
+## Overview
+
+This workshop will walk you through the process of modernizing a Java application using **GitHub Copilot app modernization via the Copilot CLI**. You'll transform the `asset-manager` project from legacy technologies to a modern, cloud-ready solution — entirely from your terminal, with no IDE required.
+
+**What the Modernization Process Will Do:**
+
+The modernization will transform your application from outdated technologies to a modern solution. This includes:
+- Upgrading from **Java 8 to Java 21**
+- Migrating from **Spring Boot 2.x to 3.x**
+- Adding **health check endpoints**
+- **Containerizing** the applications
+
+## Time Estimates
+
+The complete workshop takes approximately **35 minutes** to complete:
+
+| Step | Duration |
+|------|----------|
+| Prerequisites & Setup | ~5 min |
+| Start Copilot CLI & Add MCP Server | ~5 min |
+| Upgrade Runtime & Frameworks | ~10 min |
+| Expose Health Endpoints | ~10 min |
+| Containerize Applications | ~5 min |
+
+## Workshop Steps
+
+| Step | Title | Description |
+|------|-------|-------------|
+| 01 | [Prerequisites & Setup](01-prerequisites.md) | Install tools and clone the repository |
+| 02 | [Start Copilot CLI](02-assess.md) | Launch Copilot CLI and add the modernization MCP server |
+| 03 | [Upgrade Runtime & Frameworks](03-upgrade.md) | Upgrade Java and Spring Boot versions |
+| 04 | [Health Endpoints](04-health-endpoints.md) | Expose health endpoints using a natural language prompt |
+| 05 | [Containerize Applications](05-containerize.md) | Prepare your app for cloud deployment |
+
+## What You'll Learn
+
+- How to use **GitHub Copilot CLI** to modernize legacy Java applications from the terminal
+- How to configure the **GitHub Copilot modernization MCP server**
+- How to upgrade Java versions and Spring Boot frameworks with AI assistance using natural language prompts
+- How to containerize Java applications for cloud deployment

workshop-cli/00-overview.md

@@ -0,0 +1,47 @@
+# Step 1: Prerequisites & Setup
+
+## Prerequisites
+
+- A GitHub account with [GitHub Copilot](https://github.com/features/copilot) enabled. A Pro, Pro+, Business, or Enterprise plan is required.
+
+  > [!NOTE]
+  > If you receive Copilot through an organization, the Copilot CLI policy must be enabled in the organization's settings.
+
+- [GitHub Copilot CLI](https://docs.github.com/en/copilot/how-tos/set-up/install-copilot-cli) installed and authenticated.
+- [Node.js](https://nodejs.org/) version 22 or later.
+- [npm](https://www.npmjs.com/get-npm) version 10 or later.
+- [Java JDK](https://learn.microsoft.com/java/openjdk/download) for both the source and target JDK versions.
+- [Maven](https://maven.apache.org/download.cgi) or [Gradle](https://gradle.org/install/) to build Java projects.
+- A Git-managed Java project using Maven or Gradle.
+- For Maven-based projects: access to the public Maven Central repository.
+
+> [!NOTE]
+> If you're using Gradle, only the Gradle wrapper version 5+ is supported. The Kotlin Domain Specific Language (DSL) isn't supported.
+
+## Clone the Repository
+
+```bash
+git clone https://github.com/copilot-dev-days/appmod-workshop-java.git
+cd appmod-workshop-java
+```
+
+## Install GitHub Copilot CLI
+
+Follow the official instructions to install and authenticate the GitHub Copilot CLI:
+
+1. Install the CLI by following [Install GitHub Copilot CLI](https://docs.github.com/en/copilot/how-tos/set-up/install-copilot-cli).
+2. Authenticate with your GitHub account by running:
+   ```bash
+   gh auth login
+   ```
+3. Verify the CLI is working:
+   ```bash
+   copilot --version
+   ```
+
+## ✅ Checkpoint
+
+- [ ] GitHub Copilot CLI installed and authenticated
+- [ ] Node.js 22+ and npm 10+ installed
+- [ ] Repository cloned locally
+- [ ] Java JDK and Maven installed

workshop-cli/01-prerequisites.md

@@ -0,0 +1,66 @@
+# Step 2: Start Copilot CLI
+
+## 🎯 Goal
+
+Launch the GitHub Copilot CLI from the project directory and add the GitHub Copilot modernization MCP server so you can run modernization tasks using natural language.
+
+## Start Copilot CLI
+
+1. In your terminal, navigate to the root of the cloned repository:
+
+   ```bash
+   cd appmod-workshop-java
+   ```
+
+2. Start the Copilot CLI:
+
+   ```bash
+   copilot
+   ```
+
+3. Copilot asks you to confirm that you trust the files in this folder. Choose one of the following:
+   - **Yes, proceed** — Copilot can work with files in this location for this session only.
+   - **Yes, and remember this folder for future sessions** — Trust this folder for this and all future sessions.
+   - **No, exit (Esc)** — End the session.
+
+   For this workshop, select **Yes, proceed**.
+
+## Add the Modernization MCP Server
+
+4. Add the GitHub Copilot modernization MCP server by running the following command inside Copilot CLI:
+
+   ```
+   /mcp add app-modernization
+   ```
+
+   This installs and registers the `@microsoft/github-copilot-app-modernization-mcp-server` package.
+
+   > [!TIP]
+   > Alternatively, you can manually add the server by editing `~/copilot/mcp-config.json`:
+   > ```json
+   > {
+   >   "mcpServers": {
+   >     "app-modernization": {
+   >       "type": "local",
+   >       "command": "npx",
+   >       "tools": ["*"],
+   >       "args": ["-y", "@microsoft/github-copilot-app-modernization-mcp-server"]
+   >     }
+   >   }
+   > }
+   > ```
+
+5. Verify the MCP server is correctly configured:
+
+   ```
+   /mcp show
+   ```
+
+   You should see `app-modernization` listed as an active MCP server.
+
+## ✅ Checkpoint
+
+- [ ] Copilot CLI started from the repository root
+- [ ] Folder trust confirmed
+- [ ] `app-modernization` MCP server added with `/mcp add`
+- [ ] MCP server verified with `/mcp show`

workshop-cli/02-assess.md

@@ -0,0 +1,49 @@
+# Step 3: Upgrade Runtime & Frameworks
+
+## 🎯 Goal
+
+Upgrade the application from Java 8 to Java 21 and from Spring Boot 2.x to 3.x by running a natural language prompt in the Copilot CLI.
+
+## Run the Java Upgrade
+
+1. Inside the running Copilot CLI session, enter the following prompt:
+
+   ```
+   Upgrade this project to JDK 21 and Spring Boot 3.2
+   ```
+
+2. Copilot will begin the upgrade process. This includes:
+   - Generating an upgrade plan
+   - Performing code remediation
+   - Building the project
+   - Checking for vulnerabilities
+
+   Allow Copilot to proceed through each step. The task runs end-to-end and displays progress in the terminal.
+
+3. When the task completes, an upgrade summary is displayed showing everything that was changed.
+
+## What the Upgrade Does
+
+The automated upgrade will:
+- Update the Java version in `pom.xml` from 8 to 21
+- Upgrade Spring Boot dependencies from 2.x to 3.x
+- Update incompatible APIs (e.g., `javax.*` → `jakarta.*` namespace changes)
+- Fix deprecated method calls and patterns
+- Update Maven plugin versions as needed
+
+> [!NOTE]
+> You can target a different Java version by adjusting the prompt. For example: `Upgrade this project to JDK 25 and Spring Boot 3.x`.
+
+## Review the Changes
+
+After the upgrade completes:
+1. Review the git diff to see all changes made
+2. Verify that `pom.xml` reflects the new Java and Spring Boot versions
+3. Check that namespace changes (`javax` → `jakarta`) have been applied
+
+## ✅ Checkpoint
+
+- [ ] Upgrade prompt executed in Copilot CLI
+- [ ] Upgrade task completed successfully
+- [ ] Java version updated to 21 in `pom.xml`
+- [ ] Spring Boot upgraded to 3.x

workshop-cli/03-upgrade.md

@@ -0,0 +1,35 @@
+# Step 4: Expose Health Endpoints
+
+## 🎯 Goal
+
+Use a natural language prompt in Copilot CLI to add Spring Boot Actuator health endpoints to your application.
+
+## Run the Health Endpoint Task
+
+1. Inside the running Copilot CLI session, enter the following prompt:
+
+   ```
+   Add Spring Boot Actuator health endpoints to this project for Azure Container Apps deployment readiness. Follow the Spring Boot Actuator documentation at https://docs.spring.io/spring-boot/reference/actuator/endpoints.html
+   ```
+
+2. Copilot will analyze the project and perform the necessary changes. Allow Copilot to proceed through each step.
+
+3. When the task completes, review the changes in the terminal output.
+
+## What This Does
+
+The task will:
+- Add the Spring Boot Actuator dependency to `pom.xml`
+- Configure health endpoints in `application.properties` or `application.yml`
+- Expose `/actuator/health` endpoint for Azure Container Apps health probes
+- This is essential for cloud deployment where the platform needs to check if your app is healthy
+
+> [!TIP]
+> You can customize the prompt further. For example, you can ask Copilot to expose additional actuator endpoints such as `/actuator/info` or `/actuator/metrics`.
+
+## ✅ Checkpoint
+
+- [ ] Health endpoint prompt executed in Copilot CLI
+- [ ] Spring Boot Actuator dependency added to `pom.xml`
+- [ ] Health endpoint configured in `application.properties` or `application.yml`
+- [ ] `/actuator/health` endpoint will be available when the app runs