Add multi-language samples to AppHost page #231
Merged
+435
−9
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add samples for other languages in AppHost page
Add multi-language samples to AppHost page
Jan 9, 2026
Member
|
This is a great start - but for the mermaid diagrams, let's update those to as well. Add tabs around them for each language, and then change the logos accordingly, is should simply be replacing |
Member
|
Hey @copilot, please address my feedback. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the AppHost page by adding multi-language samples that demonstrate Aspire's capability to orchestrate applications across different programming languages. Previously, only C# examples were shown.
- Introduces tabbed interface showing .NET, Python, and Node.js orchestration scenarios
- Maintains consistent three-tier architecture (PostgreSQL → API → Frontend) across all examples
- Uses language-appropriate methods (
AddProject,AddUvicornApp,AddNodeApp) for each scenario
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Contributor
Author
Added tabbed mermaid diagrams with language-specific logos in commit ddd2a9a. Both architecture diagrams now sync with the code sample tabs using
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Member
|
Hey @copilot, under each tab explain the architecture of the diagrams. Then for the code explain how it's model, the relationships/dependencies, etc. Make it obvious the changing the tab changes the API, but regardless we're demonstrating a PostgreSQL database and a React frontend. Provide deep links back to first-app passing the |
…irst-app Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Contributor
Author
Done in commit 70b8e0d. Changes include:
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Member
|
I think you misunderstood me @copilot, I want you to re-add the JavaScript tabs. I was saying that you didn't need to link out to the |
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Contributor
Author
Re-added the Node.js/JavaScript tabs in commit 9a9ed73. All three tabs now show:
Each tab explains the architecture and how it connects to PostgreSQL and the React frontend.
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Contributor
Author
Fixed in commit 1606ea9. The "Adding an API resource and declaring a dependency" description is now wrapped in
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Member
|
Come to think of it @copilot, let's add Go and Java pivots as well. And add callouts to the community toolkit NuGet packages, and site relative links to |
…n links Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Contributor
Author
Done in commit 1324ae8. Added Go and Java pivots with:
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Member
|
Hey @copilot, can we make each language's code be the same number of lines to ensure that our mark/collapse callouts are consistent across pivots? Also, anything we could do about the well of text here: .NET API: Uses AddProject<Projects.Api>() to reference a .NET project
Python API: Uses AddUvicornApp() with WithUv() for ASGI apps like FastAPI
Node.js API: Uses AddNodeApp() with WithNpm() for Node.js applications
Go API: Uses AddGolangApp() for Go applications
Java API: Uses AddSpringApp() for Spring Boot applicationsLet's put these behind a pivot to not confuse the reader. |
…d pivots Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Contributor
Author
Done in commit 75bcc54. Changes:
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Member
|
How about we remove the pivots from the SimpleAppHost and add a props for the lang, then we can pivot around it in the consuming .mdx and pass the correct marks/collapse values. @copilot |
…ing MDX Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Contributor
Author
Done in commit 55e068c. Refactored
The consuming MDX now wraps each <Pivot id="csharp">
<SimpleAppHostCode lang="csharp" mark={{ range: '9-11' }} collapse={['1-6', '13-17']} />
</Pivot>
<Pivot id="python">
<SimpleAppHostCode lang="python" mark={{ range: '9-12' }} collapse={['1-6', '14-18']} />
</Pivot>
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
IEvangelist
approved these changes
Jan 12, 2026
Member
|
Hey @copilot, please update the details around 'Select your programming language` as Node.js isn't really a programming language. Should we maybe say something like programming language or API runtime? Have a go at it. |
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Contributor
Author
Changed to "Select your API platform" in commit 02339d3.
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
eerhardt
approved these changes
Jan 14, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
?lang=csharpand?lang=pythonquery stringslangprop, move pivots to consuming MDXChanges
Updated
app-host.mdxPivotSelector title from "Select your programming language" to "Select your API platform" since Node.js is a runtime, not a programming language.Screenshot
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.