Skip to content

Replace aspire-with-node sample with a TypeScript AppHost weather explorer#1778

Open
IEvangelist wants to merge 5 commits into
mainfrom
ievangelist-aspire-with-node-typescript
Open

Replace aspire-with-node sample with a TypeScript AppHost weather explorer#1778
IEvangelist wants to merge 5 commits into
mainfrom
ievangelist-aspire-with-node-typescript

Conversation

@IEvangelist

@IEvangelist IEvangelist commented Jul 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Summary

Replaces the aspire-with-node sample with a TypeScript AppHost weather explorer.

The sample was previously a .NET AppHost + ASP.NET Core API + Redis + Node/Express almanac. It is now a TypeScript AppHost (apphost.mts) that orchestrates two apps:

  • api — a TypeScript Express + OpenTelemetry API run with tsx. It reads live data from the Open-Meteo external service, does forward/reverse geocoding, and serves an interactive Scalar API reference.
  • frontend — a React 19 + Vite interactive Leaflet weather map: click or search any point for a live forecast, with radar timelapse, switchable basemaps, geolocation, a °F/°C toggle, and light/dark themes.

Weather explorer, light theme

Weather explorer, dark theme

Aspire features demonstrated

addExternalService + withHttpHealthCheck, addNodeApp (via tsx), addViteApp, withReference / waitFor, withHttpEndpoint / withExternalHttpEndpoints / withUrlForEndpoint, withBrowserDebugger, and publishWithContainerFiles (SPA bundled into the API container for publish mode), plus OpenTelemetry traces/metrics/logs in the dashboard.

Repo consistency

  • Root README.md: moved the entry into Full-stack JavaScript / TypeScript and updated its columns.
  • .github/for.dependabot.only.sln: removed the old AspireWithNode.* C# projects.
  • .github/dependabot.yml: removed the stale NodeFrontend npm entry (TypeScript AppHost samples aren't tracked here).
  • tests/SamplesIntegrationTests/AppHostTests.cs: dropped the removed AspireWithNode.AppHost endpoints (the .NET test project only references C# AppHosts).

Testing

  • tsc + eslint clean for the AppHost, frontend, and api.
  • Ran aspire run and captured the light/dark screenshots from the running app against live Open-Meteo data.
  • Fixed a latent BatchLogRecordProcessor options usage so OpenTelemetry logs export correctly.

Note

Opened as a draft for review. This intentionally changes the sample from a .NET AppHost to a TypeScript AppHost under the same aspire-with-node folder name.

IEvangelist and others added 3 commits July 8, 2026 06:51
@IEvangelist
Replace aspire-with-node sample with a TypeScript AppHost weather exp…
a457a32 
…lorer

Rebuilds the `aspire-with-node` sample around a TypeScript AppHost
(`apphost.mts`) that orchestrates an Express + OpenTelemetry API and a
React/Vite frontend, replacing the previous .NET AppHost + ASP.NET Core API
+ Redis + Node/Express setup.

Sample:
- AppHost models Open-Meteo as an external service (addExternalService +
  withHttpHealthCheck), runs the TypeScript Express API via tsx (addNodeApp),
  runs the Vite frontend (addViteApp), wires service discovery and startup
  ordering (withReference / waitFor), streams the frontend's browser logs to
  the dashboard (withBrowserDebugger), and bundles the SPA into the API
  container for publish (publishWithContainerFiles).
- API returns on-demand forecasts from Open-Meteo plus forward/reverse
  geocoding, and serves an interactive Scalar API reference. Fixes the
  BatchLogRecordProcessor options usage so OpenTelemetry logs export.
- Frontend is an interactive Leaflet weather map with radar timelapse,
  switchable basemaps, place search, geolocation, a degrees F/C toggle, and
  light/dark themes.
- New light/dark screenshots.

Repo consistency:
- Moves the root README entry to the Full-stack JavaScript / TypeScript
  section and updates its details.
- Removes the old AspireWithNode C# projects from the dependabot-only
  solution and drops the NodeFrontend npm entry from dependabot.
- Drops the removed AspireWithNode.AppHost from the integration tests
  (TypeScript AppHosts are not referenced by the .NET test project).
@IEvangelist
Audit only direct NuGet dependencies to unblock CI
c7502c5 
TreatWarningsAsErrors was turning newly disclosed CVE advisories in
transitive packages (Microsoft.OpenApi 2.0.0 and MessagePack 2.5.192,
pulled in by Aspire and ASP.NET Core) into build errors across many
samples, which was failing CI on main and on every PR.

None of these packages are referenced directly by any sample, so set
NuGetAuditMode=direct in the samples and tests Directory.Build.props.
Directly referenced packages are still audited and, combined with
TreatWarningsAsErrors, still fail the build; transitive advisories owned
by upstream no longer break every build.
@IEvangelist
Align Angular framework packages to 22.0.1 to fix npm ci ERESOLVE
0750c54 
Dependabot bumped @angular/common and @angular/compiler to ^22.0.1 but left
@angular/core and its lockstep siblings at 22.0.0 in the lockfile. Since
@angular/common@22.0.1 requires peer @angular/core@22.0.1 exactly, the
angular-installer's
pm ci failed with ERESOLVE, causing the 'angular'
resource to fail to start in the AppHostTests (ubuntu CI).

Bump @angular/core, animations, forms, platform-browser,
platform-browser-dynamic, router and compiler-cli to 22.0.1 so the whole
framework resolves consistently. Build tooling (build-angular, cli) and
cdk/material are unchanged.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@IEvangelist
IEvangelist marked this pull request as ready for review July 9, 2026 12:19
Copilot AI review requested due to automatic review settings July 9, 2026 12:19
@IEvangelist
IEvangelist enabled auto-merge (squash) July 9, 2026 12:19
Copilot AI reviewed Jul 9, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

This PR replaces the prior aspire-with-node sample (C# AppHost + ASP.NET Core API + Redis + Node/Express frontend) with a new TypeScript AppHost that orchestrates a TypeScript Express + OpenTelemetry API and a React/Vite/Leaflet frontend for live weather exploration.

Changes:

  • Introduces a TypeScript AppHost (apphost.mts) plus new Node/TS API (api/) and React/Vite frontend (frontend/) implementing the weather explorer experience.
  • Removes the old .NET AppHost/API and NodeFrontend (Pug/Express) implementation and related Dependabot/test references.
  • Updates repo-level documentation and dependency configuration (root README sample listing, Dependabot and solution adjustments, NuGet audit mode props).

Reviewed changes

Copilot reviewed 82 out of 92 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
tests/SamplesIntegrationTests/AppHostTests.cs Removes endpoint test entries for the deleted C# AppHost sample.
tests/Directory.Build.props Sets NuGet audit mode to direct dependencies for tests.
samples/Directory.Build.props Sets NuGet audit mode to direct dependencies for samples.
samples/aspire-with-node/tsconfig.json Adds base TypeScript compiler configuration for the sample.
samples/aspire-with-node/tsconfig.apphost.json Adds AppHost TypeScript build configuration.
samples/aspire-with-node/README.md Rewrites sample documentation to describe the new weather explorer and TS AppHost flow.
samples/aspire-with-node/package.json Adds root npm scripts for lint/build/run of the TypeScript AppHost.
samples/aspire-with-node/NodeFrontend/views/index.pug Deletes the old server-rendered Pug frontend view.
samples/aspire-with-node/NodeFrontend/package.json Deletes old NodeFrontend package manifest.
samples/aspire-with-node/NodeFrontend/instrumentation.js Deletes old NodeFrontend OpenTelemetry setup.
samples/aspire-with-node/NodeFrontend/app.js Deletes old NodeFrontend Express app.
samples/aspire-with-node/NodeFrontend/.npmrc Deletes old NodeFrontend npm configuration.
samples/aspire-with-node/frontend/vite.config.ts Adds Vite config including /api proxying to the API service.
samples/aspire-with-node/frontend/tsconfig.node.json Adds TS config for Vite config/build tooling.
samples/aspire-with-node/frontend/tsconfig.json Adds TS project references for the frontend.
samples/aspire-with-node/frontend/tsconfig.app.json Adds TS config for the React app source.
samples/aspire-with-node/frontend/src/vite-env.d.ts Adds Vite client type reference.
samples/aspire-with-node/frontend/src/types/weather.ts Adds shared weather/geocode response type shapes.
samples/aspire-with-node/frontend/src/types/map.ts Adds map/radar domain types.
samples/aspire-with-node/frontend/src/main.tsx Adds React entrypoint + global error logging hooks.
samples/aspire-with-node/frontend/src/lib/weatherVisuals.ts Adds UI color/tint helpers based on weather conditions.
samples/aspire-with-node/frontend/src/lib/weatherCodes.ts Adds WMO weather-code mapping and descriptors.
samples/aspire-with-node/frontend/src/lib/mapStyles.ts Adds base-map style definitions and thumbnail helper.
samples/aspire-with-node/frontend/src/lib/http.ts Adds fetch helper with simple retry/backoff.
samples/aspire-with-node/frontend/src/lib/format.ts Adds formatting helpers for dates/times/labels/units.
samples/aspire-with-node/frontend/src/index.css Adds base CSS/reset for the frontend.
samples/aspire-with-node/frontend/src/hooks/useWeather.ts Adds weather-loading hook with stale-response guard.
samples/aspire-with-node/frontend/src/hooks/useRadar.ts Adds RainViewer radar-frame loading and playback state hook.
samples/aspire-with-node/frontend/src/hooks/useMapInteraction.ts Adds map interaction model (space-to-pan on desktop, touch detection).
samples/aspire-with-node/frontend/src/hooks/useGeocodeSearch.ts Adds debounced geocode search with keyboard navigation.
samples/aspire-with-node/frontend/src/components/pane/SunTimes.tsx Adds sunrise/sunset UI component.
samples/aspire-with-node/frontend/src/components/pane/SearchBox.tsx Adds search input with suggestions and locate button.
samples/aspire-with-node/frontend/src/components/pane/PaneLauncher.tsx Adds collapsed-pane launcher UI.
samples/aspire-with-node/frontend/src/components/pane/PaneHeader.tsx Adds pane header UI and collapse control.
samples/aspire-with-node/frontend/src/components/pane/NowCard.tsx Adds current-conditions “hero” card UI.
samples/aspire-with-node/frontend/src/components/pane/Metrics.tsx Adds humidity/wind/UV metric row UI.
samples/aspire-with-node/frontend/src/components/pane/HourlyStrip.tsx Adds next-hours strip UI.
samples/aspire-with-node/frontend/src/components/pane/ForecastSkeleton.tsx Adds loading skeleton UI.
samples/aspire-with-node/frontend/src/components/pane/Forecast.tsx Adds forecast container with error/loading/live states.
samples/aspire-with-node/frontend/src/components/pane/DailyForecast.tsx Adds 5-day forecast rows with range bars.
samples/aspire-with-node/frontend/src/components/pane/ControlPane.tsx Adds collapsible control pane layout.
samples/aspire-with-node/frontend/src/components/map/WeatherMap.tsx Adds Leaflet map container with layers, radar frames, and marker.
samples/aspire-with-node/frontend/src/components/map/RadarToggle.tsx Adds radar on/off control.
samples/aspire-with-node/frontend/src/components/map/RadarTimeline.tsx Adds scrubbable radar timeline UI.
samples/aspire-with-node/frontend/src/components/map/RadarLegend.tsx Adds precipitation intensity legend UI.
samples/aspire-with-node/frontend/src/components/map/MapStyleControl.tsx Adds base-map style switcher UI.
samples/aspire-with-node/frontend/src/components/map/MapClickHandler.tsx Adds click-to-pin behavior with drag “ghost click” suppression.
samples/aspire-with-node/frontend/src/components/icons/WeatherIcon.tsx Adds inline SVG weather icons keyed off weather codes.
samples/aspire-with-node/frontend/src/components/icons/Glyphs.tsx Adds shared small SVG glyphs.
samples/aspire-with-node/frontend/src/App.tsx Adds the composition root wiring hooks and UI together.
samples/aspire-with-node/frontend/src/App.css Adds full UI styling for map, pane, radar controls, and responsiveness.
samples/aspire-with-node/frontend/public/github.svg Adds GitHub icon asset.
samples/aspire-with-node/frontend/package.json Adds frontend dependencies/scripts/engine constraints.
samples/aspire-with-node/frontend/index.html Adds Vite HTML shell + metadata.
samples/aspire-with-node/frontend/eslint.config.js Adds frontend ESLint configuration.
samples/aspire-with-node/frontend/.dockerignore Adds Docker ignore for frontend artifacts.
samples/aspire-with-node/eslint.config.mjs Adds AppHost ESLint configuration.
samples/aspire-with-node/AspireWithNode.slnx Removes the old solution file for removed .NET projects.
samples/aspire-with-node/AspireWithNode.ServiceDefaults/Extensions.cs Removes old .NET service defaults implementation.
samples/aspire-with-node/AspireWithNode.ServiceDefaults/AspireWithNode.ServiceDefaults.csproj Removes old .NET ServiceDefaults project.
samples/aspire-with-node/AspireWithNode.AspNetCoreApi/Properties/launchSettings.json Removes old ASP.NET Core API launch settings.
samples/aspire-with-node/AspireWithNode.AspNetCoreApi/Program.cs Removes old ASP.NET Core API.
samples/aspire-with-node/AspireWithNode.AspNetCoreApi/AspireWithNode.AspNetCoreApi.http Removes old HTTP scratch file.
samples/aspire-with-node/AspireWithNode.AspNetCoreApi/AspireWithNode.AspNetCoreApi.csproj Removes old ASP.NET Core API project file.
samples/aspire-with-node/AspireWithNode.AspNetCoreApi/appsettings.json Removes old API settings.
samples/aspire-with-node/AspireWithNode.AspNetCoreApi/appsettings.Development.json Removes old API dev settings.
samples/aspire-with-node/AspireWithNode.AppHost/Properties/launchSettings.json Removes old .NET AppHost launch settings.
samples/aspire-with-node/AspireWithNode.AppHost/AspireWithNode.AppHost.csproj Removes old .NET AppHost project.
samples/aspire-with-node/AspireWithNode.AppHost/aspire-manifest.json Removes old manifest.
samples/aspire-with-node/AspireWithNode.AppHost/appsettings.json Removes old AppHost settings.
samples/aspire-with-node/AspireWithNode.AppHost/appsettings.Development.json Removes old AppHost dev settings.
samples/aspire-with-node/AspireWithNode.AppHost/AppHost.cs Removes old .NET AppHost orchestration code.
samples/aspire-with-node/aspire.config.json Adds Aspire config for the new TS AppHost and package pinning.
samples/aspire-with-node/apphost.mts Adds TypeScript AppHost orchestrating external service, API, and Vite frontend.
samples/aspire-with-node/api/tsconfig.json Adds API TypeScript configuration.
samples/aspire-with-node/api/src/openapi.ts Adds OpenAPI 3.1 document for Scalar reference and tooling.
samples/aspire-with-node/api/src/instrumentation.ts Adds OpenTelemetry Node SDK initialization and exporters.
samples/aspire-with-node/api/src/index.ts Adds Express API implementation for weather/geocoding/health/reference/static hosting.
samples/aspire-with-node/api/package.json Adds API dependencies and start script.
samples/aspire-with-node/.aspire/settings.json Removes old Aspire app host path settings (C# AppHost).
samples/aspire-with-javascript/AspireJavaScript.Angular/package.json Updates Angular dependency versions.
samples/aspire-with-javascript/AspireJavaScript.Angular/package-lock.json Updates Angular lockfile to match dependency bumps.
README.md Moves/updates the sample entry into the JavaScript/TypeScript section.
.github/for.dependabot.only.sln Removes AspireWithNode projects from Dependabot-only solution and normalizes VS version line.
.github/dependabot.yml Removes stale NodeFrontend npm update entry for the deleted folder.
Files not reviewed (3)
  • samples/aspire-with-javascript/AspireJavaScript.Angular/package-lock.json: Generated file
  • samples/aspire-with-node/frontend/package-lock.json: Generated file
  • samples/aspire-with-node/package-lock.json: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread samples/aspire-with-node/frontend/src/components/pane/ControlPane.tsx
Comment thread samples/aspire-with-node/frontend/src/components/pane/SearchBox.tsx
Comment thread samples/aspire-with-node/tsconfig.apphost.json Outdated
Comment thread samples/aspire-with-node/README.md Outdated
Comment thread samples/aspire-with-node/apphost.mts Outdated
Comment thread samples/aspire-with-node/aspire.config.json
IEvangelist and others added 2 commits July 9, 2026 11:46
@IEvangelist
Address PR review feedback on aspire-with-node sample
7aa4507 
- apphost: rename the Node/Express resource from 'app' to 'api' so the
  dashboard resource name and injected env var prefixes match the docs;
  update the Vite proxy to read API_HTTPS/API_HTTP accordingly.
- tsconfig.apphost.json: include generated Aspire modules via a glob
  (.aspire/modules/**/*.mts) to stay resilient to added/renamed modules,
  matching the other TypeScript AppHost samples.
- SearchBox: make each listbox <li role="option"> the interactive element
  instead of nesting a <button>, fixing the ARIA listbox pattern.
- ControlPane: add inert when collapsed so hidden controls can't receive
  keyboard focus (aria-hidden alone doesn't remove them from tab order).
- README: align the Node.js prerequisite with the engines constraints
  (20.19+, 22.13+, or 24+) instead of implying 22.13 is the minimum.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@IEvangelist
Align aspire-with-node to stable Aspire 13.4.0 and expand attributions
f5dedfe 
- aspire.config.json: pin the SDK and Aspire.Hosting.JavaScript to the
  stable 13.4.0 release and drop the daily channel, matching every other
  TypeScript AppHost sample in the repo (was 13.5.0-preview on daily).
- apphost.mts: remove the withBrowserDebugger() call. That API is only
  available in the preview JavaScript hosting package (the stable feature
  is withBrowserLogs in the preview-only Aspire.Hosting.Browsers package),
  so it isn't part of stable 13.4.0. Verified the AppHost restores,
  type-checks, and lints cleanly against 13.4.0 after removal.
- README.md: drop the withBrowserDebugger bullet and give Open-Meteo and
  OpenStreetMap explicit, license-correct attribution callouts (CC BY 4.0
  and ODbL) alongside the other data-source credits.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@IEvangelist