Skip to content
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/frontend/config/twoslash.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,13 @@ export function readAspireTypes() {
*/
export function getTwoslashExtraFiles() {
const { source } = readAspireTypes();
return source ? { '.aspire/modules/aspire.mts': source } : {};
return source
? {
'.aspire/modules/aspire.mts': source,
// Keep historical snippets compiling if they import the old generated path.
'.modules/aspire.ts': source,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The comment frames this alias as backward-compat for "historical snippets," but the only place in the repo that still imports from ./.modules/aspire.js is src/frontend/src/components/AppHostBuilder.astro — the live interactive AppHost builder, with ~30 snippet variants. Everywhere else (this PR's typescript-apphost.mdx, add-aspire-existing-app.mdx, SimpleAppHostCode.shared.ts, data/twoslash/aspire.d.ts, the doc-writer skill) uses the GA path ./.aspire/modules/aspire.mjs.

Net effect: users who copy a snippet out of the interactive builder get an import path that doesn't match what aspire init actually generates, so the file won't resolve in their project.

Recommendation: migrate AppHostBuilder.astro to emit ./.aspire/modules/aspire.mjs across all snippet variants and drop this alias. If that's out of scope for this PR, please reword the comment to make the temporary nature explicit, e.g. // Temporary: AppHostBuilder.astro still imports from the pre-GA path; remove this alias once it's migrated to .aspire/modules/aspire.mjs.

}
: {};
}

/**
Expand Down
12 changes: 9 additions & 3 deletions src/frontend/src/content/docs/app-host/typescript-apphost.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,15 @@ The `aspire.config.json` file is the central configuration for your AppHost. It
| `packages` | Hosting integration packages and their versions. Added automatically by `aspire add`. |
| `profiles` | Launch profiles with dashboard URLs and environment variables |

### Adding integrations
### Add and restore integrations

When you run `aspire add`, the CLI adds the package to the `packages` section and regenerates the TypeScript SDK:
Use `aspire add` from the AppHost root to add hosting integrations. The CLI adds the package to the `packages` section, restores AppHost dependencies, and regenerates the TypeScript SDK in `.aspire/modules/`:

```bash title="Add an integration"
aspire add redis
```

This updates `aspire.config.json`:
This updates `aspire.config.json` so the package is restored the next time the AppHost runs:

```json title="aspire.config.json" ins={4}
{
Expand All @@ -94,6 +94,12 @@ This updates `aspire.config.json`:
}
```

Run `aspire restore` when you want to regenerate `.aspire/modules/` without starting the AppHost, such as after switching branches, updating package versions, or preparing a CI job:

```bash title="Restore a TypeScript AppHost"
aspire restore
```

### Project references for local development

You can reference a local hosting integration project by using a `.csproj` path instead of a version:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Before you begin, make sure you have:
<TabItem id='typescript' label='TypeScript'>

- [Node.js 22.x or 24.x LTS](https://nodejs.org/)
- npm, yarn, or pnpm
- A [supported AppHost-root package manager](/app-host/typescript-apphost/#package-managers): npm, pnpm, Yarn 4+, or Bun

</TabItem>
</Tabs>
Expand Down Expand Up @@ -107,7 +107,7 @@ Both styles use the same `Aspire.AppHost.Sdk` and the same hosting APIs.
Use a TypeScript AppHost when your repo already centers on a Node.js workspace or when you prefer path-based orchestration in TypeScript.

- Lives in `apphost.mts`; for existing JavaScript and TypeScript apps, `aspire init` creates it under `aspire-apphost/`
- Runs under popular package managers including npm, pnpm, yarn, and Bun
- Runs under supported package managers including npm, pnpm, Yarn 4+, and Bun
- Fits naturally into existing package-manager and monorepo workflows

</TabItem>
Expand Down Expand Up @@ -329,7 +329,7 @@ After setup, a typical workspace layout looks like this:
</FileTree>

:::note[The .aspire folder is generated]
Let the Aspire CLI manage `aspire-apphost/.aspire/` rather than editing generated SDK files manually.
Let the Aspire CLI manage `aspire-apphost/.aspire/` rather than editing generated SDK files manually. Run `aspire restore` to regenerate the TypeScript SDK after switching branches or changing AppHost packages.
:::

</TabItem>
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/content/docs/get-started/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,13 @@ Learn more: [What is the AppHost?](/get-started/app-host/), [Deployment overview

**No.** .NET is an especially strong experience in Aspire, but the app model is broader than one framework or runtime. Aspire is designed to coordinate services across multiple stacks, and the TypeScript AppHost makes it a natural fit for existing JavaScript and TypeScript applications as well.

Learn more: [TypeScript AppHost support](/whats-new/aspire-13-2/#-typescript-apphost-support-preview)
Learn more: [TypeScript AppHost project structure](/app-host/typescript-apphost/)

## Can I write the AppHost in TypeScript?

**Yes.** A TypeScript AppHost (`apphost.mts`) is a first-class option for existing JavaScript and TypeScript applications. That experience uses commands such as `aspire init --language typescript` and AppHost APIs such as `addNodeApp`, `addViteApp`, and `addJavaScriptApp`.

Learn more: [`aspire init`](/reference/cli/commands/aspire-init/), [TypeScript AppHost support](/whats-new/aspire-13-2/#-typescript-apphost-support-preview)
Learn more: [`aspire init`](/reference/cli/commands/aspire-init/), [TypeScript AppHost project structure](/app-host/typescript-apphost/)

## Is Aspire only for brand-new projects?

Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/content/docs/ja/get-started/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,13 @@ Aspire は、実システムで頻出する多くの構成要素に対する統

**いいえ。** .NET は Aspire で特に強力な体験を提供しますが、アプリ モデルは 1 つのフレームワークやランタイムに限定されません。Aspire は複数スタックにまたがるサービス調整を目的に設計されており、TypeScript の AppHost によって既存の JavaScript / TypeScript アプリにも自然に適合します。

詳しくはこちら: [TypeScript AppHost サポート](/ja/whats-new/aspire-13-2/#-typescript-apphost-のサポート-プレビュー)
詳しくはこちら: [TypeScript AppHost サポート](/ja/app-host/typescript-apphost/)
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The link target was updated from the 13.2 preview "what's new" anchor to the GA project-structure page, but the visible label still says "TypeScript AppHost サポート" (Support). The English FAQ was updated to "TypeScript AppHost project structure" — consider updating the Japanese label to match, e.g. [TypeScript AppHost プロジェクト構成](/ja/app-host/typescript-apphost/). Same on line 72.


## AppHost を TypeScript で書けますか?

**はい。** TypeScript の AppHost (`apphost.mts`) は、既存の JavaScript / TypeScript アプリケーション向けの第一級オプションです。この体験では、`aspire init --language typescript` のようなコマンドや、`addNodeApp`、`addViteApp`、`addJavaScriptApp` のような AppHost API を利用します。

詳しくはこちら: [`aspire init`](/ja/reference/cli/commands/aspire-init/)、[TypeScript AppHost サポート](/ja/whats-new/aspire-13-2/#-typescript-apphost-のサポート-プレビュー)
詳しくはこちら: [`aspire init`](/ja/reference/cli/commands/aspire-init/)、[TypeScript AppHost サポート](/ja/app-host/typescript-apphost/)

## Aspire は新規プロジェクト専用ですか?

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ aspire add [<integration>] [options]

## Description

The `aspire add` command searches for an integration package and adds it to the Aspire AppHost.
The `aspire add` command searches for an integration package and adds it to the Aspire AppHost. The persisted change depends on the AppHost style:

- Project-based C# AppHosts receive a package reference.
- File-based C# AppHosts receive a `#:package` directive.
- TypeScript AppHosts receive an entry in the `packages` section of `aspire.config.json`, then the generated `.aspire/modules/` TypeScript SDK is regenerated.

<Include relativePath="reference/cli/includes/project-search-logic-description.md" />

Expand Down Expand Up @@ -75,3 +79,9 @@ The following options are available:
```bash title="Aspire CLI"
aspire add kafka --version 13.3.0
```

- Add the **redis** integration to a TypeScript AppHost and regenerate `.aspire/modules/`:

```bash title="Aspire CLI"
aspire add redis --apphost './apphost.mts'
```
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ aspire restore [options]

## Description

The `aspire restore` command restores the AppHost project and generates the SDK code that Aspire uses for resources, integrations, and tooling. Use it when you want to make restore an explicit step in automation or validate that the AppHost can restore cleanly without starting it.
The `aspire restore` command restores the AppHost and generates the SDK code that Aspire uses for resources, integrations, and tooling. Use it when you want to make restore an explicit step in automation or validate that the AppHost can restore cleanly without starting it.

For TypeScript AppHosts, restore reads the `packages` section in `aspire.config.json`, restores those hosting integration packages, and regenerates the `.aspire/modules/` TypeScript SDK imported by `apphost.mts`. This is useful after running `aspire add`, switching branches, updating pinned package versions, or restoring dependencies in CI before `aspire run`, `aspire publish`, or deployment workflows.

<Include relativePath="reference/cli/includes/project-search-logic-description.md" />

Expand Down Expand Up @@ -55,6 +57,12 @@ The following options are available:
aspire restore --apphost './src/MyApp.AppHost/MyApp.AppHost.csproj'
```

- Restore a specific TypeScript AppHost and regenerate `.aspire/modules/`:

```bash title="Aspire CLI"
aspire restore --apphost './apphost.mts'
```

## See also

- [aspire run](../aspire-run/)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ title: Option AppHost

**`--apphost <apphost>`**

The path to the Aspire AppHost project file.
The path to the Aspire AppHost file or project file, such as `apphost.ts`, `apphost.cs`, or an AppHost `.csproj`.
Comment thread
IEvangelist marked this conversation as resolved.
Outdated
Loading