Simplify client: remove Svelte, use pure Astro with SSR data fetching by GeekTrainer · Pull Request #179 · github-samples/pets-workshop

GeekTrainer · 2026-03-02T02:31:26Z

The goal of this PR is to simplify the app. This will both make keeping it updated easier, but also allow for better focus on the workshop rather than the app.

Convert DogList.svelte and DogDetails.svelte to Astro components
Move data fetching from client-side to Astro page frontmatter (SSR)
Remove middleware API proxy (no longer needed with server-side fetch)
Remove Svelte, @astrojs/svelte, svelte.config.js
Remove dead deps: autoprefixer, postcss, flask-cors
Remove unused starter assets (astro.svg, background.svg)
Eliminate global.css (merged into Layout.astro)
Simplify Header to always-visible nav (zero client JS)
Remove dead dark: variants and transition classes
Add data-testid attributes for stable e2e test selectors
Add PLAN.md with remaining work items

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

- Convert DogList.svelte and DogDetails.svelte to Astro components - Move data fetching from client-side to Astro page frontmatter (SSR) - Remove middleware API proxy (no longer needed with server-side fetch) - Remove Svelte, @astrojs/svelte, svelte.config.js - Remove dead deps: autoprefixer, postcss, flask-cors - Remove unused starter assets (astro.svg, background.svg) - Eliminate global.css (merged into Layout.astro) - Simplify Header to always-visible nav (zero client JS) - Remove dead dark: variants and transition classes - Add data-testid attributes for stable e2e test selectors - Add PLAN.md with remaining work items Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…ld deps Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

…rences) Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

…r e2e tests Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

E2e tests with real Flask + seeded test DB, fix platform-specific build failures, update workshop content, remove Google Fonts, disable telemetry

Copilot

Pull request overview

This PR simplifies the workshop app by removing Svelte from the Astro client, moving data fetching to Astro SSR frontmatter, and aligning e2e tests/docs with the new “pure Astro” architecture.

Changes:

Replace Svelte components with Astro components and switch pages to server-side fetches from the Flask API.
Remove the Astro middleware API proxy plus Svelte-related config/dependencies and unused starter assets/styles.
Update Playwright e2e setup to run against a real Flask server with a deterministic seeded SQLite test DB; update workshop docs accordingly.

Reviewed changes

Copilot reviewed 34 out of 38 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
server/utils/seed_test_database.py	Adds deterministic SQLite seeding script for e2e tests.
server/requirements.txt	Removes `flask-cors`; keeps core Flask/SQLAlchemy deps.
server/app.py	Allows DB path override via `DATABASE_PATH` env var.
scripts/start-app.sh	Updates comment to reflect Astro (not SvelteKit) client process.
content/full-day/README.md	Updates prerequisites text to remove Svelte reference.
content/full-day/6-code.md	Updates exercise instructions to reference `.astro` components.
content/full-day/5-context.md	Updates frontend description to “Astro” only.
content/full-day/3-codespaces.md	Removes Svelte VS Code extension from recommended list.
content/1-hour/README.md	Updates prerequisites text to remove Svelte reference.
content/1-hour/4-add-feature.md	Updates exercise instructions to reference `.astro` components.
content/1-hour/3-copilot-instructions.md	Updates sample Copilot instructions to “Astro” only.
content/1-hour/1-add-endpoint.md	Updates architecture description to remove Svelte mention.
content/1-hour/0-setup.md	Updates startup description to “Astro app” (not Astro/Svelte).
client/svelte.config.js	Removes Svelte config (deleted).
client/src/styles/global.css	Removes global Tailwind import file (deleted).
client/src/pages/index.astro	SSR-fetch dogs in frontmatter and render via `DogList.astro`.
client/src/pages/dog/[id].astro	SSR-fetch dog details in frontmatter; add error/back-link testid.
client/src/pages/about.astro	Removes unused imports/comment; adds `data-testid` for back link.
client/src/middleware.ts	Removes API proxy middleware (deleted).
client/src/layouts/Layout.astro	Moves Tailwind import to global style; removes dark-mode/font preload bits.
client/src/components/Header.astro	Simplifies header to always-visible nav; removes client JS toggle menu.
client/src/components/DogList.svelte	Removes Svelte dog list component (deleted).
client/src/components/DogList.astro	Adds Astro dog list component with stable `data-testid`s.
client/src/components/DogDetails.svelte	Removes Svelte dog details component (deleted).
client/src/components/DogDetails.astro	Adds Astro dog details component with stable `data-testid`s.
client/src/assets/background.svg	Removes unused starter asset (deleted).
client/src/assets/astro.svg	Removes unused starter asset (deleted).
client/playwright.config.ts	Starts Flask+Astro servers for e2e and seeds a dedicated test DB.
client/package.json	Removes Svelte/PostCSS-related deps; keeps Astro/Tailwind/Playwright.
client/package-lock.json	Updates lockfile to reflect removed deps and version bumps.
client/e2e-tests/homepage.spec.ts	Updates selectors to `data-testid` and SSR expectations.
client/e2e-tests/dog-details.spec.ts	Updates selectors and adds direct dog detail assertions.
client/e2e-tests/api-integration.spec.ts	Reworks integration tests to validate SSR-rendered API data.
client/e2e-tests/README.md	Documents the “real Flask server + seeded DB” e2e architecture.
client/astro.config.mjs	Removes Svelte integration and disables Astro telemetry.
README.md	Updates top-level tech stack description (no Svelte).
PLAN.md	Adds plan/todos for the simplification work.
.gitignore	Ignores the seeded e2e SQLite database file.

Copilot · 2026-03-02T02:36:13Z

content/full-day/README.md

 ## Prerequisites

-The application for the workshop uses is built primarily with Python (Flask and SQLAlchemy) and Astro (using Tailwind and Svelte). While experience with these frameworks and languages is helpful, you'll be using Copilot to help you understand the project and generate the code. As a result, as long as you are familiar with programming you'll be able to complete the exercises!
+The application for the workshop uses is built primarily with Python (Flask and SQLAlchemy) and Astro (using Tailwind). While experience with these frameworks and languages is helpful, you'll be using Copilot to help you understand the project and generate the code. As a result, as long as you are familiar with programming you'll be able to complete the exercises!


This sentence is grammatically incorrect: it currently reads "The application for the workshop uses is built...". Consider rephrasing (e.g., "The application used for the workshop is built...") so the prerequisites read cleanly.

Copilot · 2026-03-02T02:36:13Z

content/1-hour/README.md

 ## Prerequisites

-The application for the workshop uses is built primarily with Python (Flask and SQLAlchemy) and Astro (using Tailwind and Svelte). While experience with these frameworks and languages is helpful, you'll be using Copilot to help you understand the project and generate the code. As a result, as long as you are familiar with programming you'll be able to complete the exercises!
+The application for the workshop uses is built primarily with Python (Flask and SQLAlchemy) and Astro (using Tailwind). While experience with these frameworks and languages is helpful, you'll be using Copilot to help you understand the project and generate the code. As a result, as long as you are familiar with programming you'll be able to complete the exercises!


This sentence is grammatically incorrect: it currently reads "The application for the workshop uses is built...". Consider rephrasing (e.g., "The application used for the workshop is built...") so the prerequisites read cleanly.

Suggested change

The application for the workshop uses is built primarily with Python (Flask and SQLAlchemy) and Astro (using Tailwind). While experience with these frameworks and languages is helpful, you'll be using Copilot to help you understand the project and generate the code. As a result, as long as you are familiar with programming you'll be able to complete the exercises!

The application used for the workshop is built primarily with Python (Flask and SQLAlchemy) and Astro (using Tailwind). While experience with these frameworks and languages is helpful, you'll be using Copilot to help you understand the project and generate the code. As a result, as long as you are familiar with programming you'll be able to complete the exercises!

Copilot · 2026-03-02T02:36:13Z

PLAN.md

+
+- The Flask server (`server/app.py`) is unchanged (logic-wise)
+- `API_SERVER_URL` env var moves from middleware to a shared constant used by Astro pages
+- The `Header.astro` component with its vanilla JS menu toggle is fine as-is


PLAN.md says "The Header.astro component with its vanilla JS menu toggle is fine as-is", but this PR removes the JS toggle and replaces it with an always-visible nav. Update this note to match the current implementation so the plan doesn’t contradict the code.

Suggested change

- The `Header.astro` component with its vanilla JS menu toggle is fine as-is

- The `Header.astro` component now uses an always-visible navigation without JavaScript; no further changes are required for this plan

Copilot · 2026-03-02T02:36:14Z

app/server/utils/seed_test_database.py

+    init_db(app)
+
+    with app.app_context():
+        # Create all tables
+        db.create_all()


init_db(app) already calls db.create_all() (see server/models/init.py), so calling db.create_all() again here is redundant. Consider removing the extra db.create_all() or adjusting init_db so table creation happens in one place to avoid confusing double-initialization.

Copilot · 2026-03-02T02:36:14Z

app/client/playwright.config.ts

+      command: `cd ${serverDir} && python3 utils/seed_test_database.py && DATABASE_PATH=${testDbPath} python3 app.py`,
+      url: `http://localhost:${flaskPort}/api/dogs`,
+      reuseExistingServer: !process.env.CI,


With reuseExistingServer: !process.env.CI for the Flask webServer, Playwright will skip the seed step when a server is already running at the healthcheck URL, which can make the tests non-deterministic (they assume Buddy/Luna/Max and exactly 3 cards). Consider setting reuseExistingServer to false for the Flask server (or ensure the seed step always runs) so the e2e data is always consistent.

Suggested change

reuseExistingServer: !process.env.CI,

reuseExistingServer: false,

Copilot · 2026-03-02T02:36:14Z

app/client/playwright.config.ts

The webServer.command uses POSIX shell syntax (cd ... && VAR=value python3 ...). This will fail when running Playwright on Windows shells (cmd/PowerShell) unless users are in WSL/Git Bash. If Windows is a supported dev path, consider using a cross-platform approach (e.g., cross-env, dotenvx, or a small Node wrapper script) to set env vars and launch the processes.

- Fix repo path in devcontainer postStartCommand (dog-shelter → pets-workshop) - Remove unused port 5000 from forwardPorts - Fix line number references in 1-hour and full-day exercises Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Move client/, server/, and scripts/ directories under app/ to consolidate application code. Update all references in dependabot config, gitignore, workshop content, and filepath comments. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Add page/per_page query parameters to GET /api/dogs endpoint with paginated JSON response. Update homepage to display pagination controls. Add test dogs to seed data and update e2e tests for pagination. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Dynamically detect when node_modules is a symlink and add the real path to Vite's server.fs.allow list. This resolves dev toolbar errors in environments with symlinked dependencies while remaining a no-op when node_modules is not symlinked. Add esbuild-wasm as a dependency. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Clean up the original directories that were moved under app/. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Move sandbox Dockerfile and startup script into .dev/ directory to keep dev tooling separate from workshop and app code. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

GeekTrainer and others added 9 commits March 1, 2026 01:43

Initial plan

7cfff68

Create mock API server, update e2e tests for SSR, remove unused esbui…

5006a9b

…ld deps Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

Update workshop content to reflect pure Astro app (remove Svelte refe…

9a5fed4

…rences) Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

Replace mock API with real Flask server using seeded test database fo…

28e1ba4

…r e2e tests Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

Move DATABASE_PATH resolution into seed_test_database() function

a2e5bb1

Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

Remove Google Fonts, use system font stack instead

dd43328

Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

Disable Astro telemetry via ASTRO_TELEMETRY_DISABLED env var in config

7b19f3b

Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

Merge pull request #178 from github-samples/copilot/simplify-client-app

74bc88a

E2e tests with real Flask + seeded test DB, fix platform-specific build failures, update workshop content, remove Google Fonts, disable telemetry

GeekTrainer requested a review from chrisreddington as a code owner March 2, 2026 02:31

Copilot AI review requested due to automatic review settings March 2, 2026 02:31

Copilot started reviewing on behalf of GeekTrainer March 2, 2026 02:31 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

GeekTrainer and others added 6 commits March 2, 2026 16:27

Remove old client/, server/, scripts/ directories

d84b9ae

Clean up the original directories that were moved under app/. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Add dev tooling for Copilot sandbox environment

4d9a59c

Move sandbox Dockerfile and startup script into .dev/ directory to keep dev tooling separate from workshop and app code. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simplify client: remove Svelte, use pure Astro with SSR data fetching#179

Simplify client: remove Svelte, use pure Astro with SSR data fetching#179
GeekTrainer wants to merge 15 commits intomainfrom
simplify-client-app

GeekTrainer commented Mar 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	The application for the workshop uses is built primarily with Python (Flask and SQLAlchemy) and Astro (using Tailwind). While experience with these frameworks and languages is helpful, you'll be using Copilot to help you understand the project and generate the code. As a result, as long as you are familiar with programming you'll be able to complete the exercises!
	The application used for the workshop is built primarily with Python (Flask and SQLAlchemy) and Astro (using Tailwind). While experience with these frameworks and languages is helpful, you'll be using Copilot to help you understand the project and generate the code. As a result, as long as you are familiar with programming you'll be able to complete the exercises!

	- The `Header.astro` component with its vanilla JS menu toggle is fine as-is
	- The `Header.astro` component now uses an always-visible navigation without JavaScript; no further changes are required for this plan

	reuseExistingServer: !process.env.CI,
	reuseExistingServer: false,

Conversation

GeekTrainer commented Mar 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants