@aws/nx-plugin-mcp 1.0.0-rc.98 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/get_started/building-with-ai.mdx +21 -14
- package/docs/get_started/concepts.mdx +1 -1
- package/docs/get_started/existing-project.mdx +6 -3
- package/docs/get_started/quick-start.mdx +155 -51
- package/docs/get_started/tutorials/dungeon-game/overview.mdx +1 -6
- package/docs/snippets/pdk-migration/example/01-migrate-api.mdx +7 -5
- package/docs/snippets/pdk-migration/example/02-migrate-website.mdx +2 -1
- package/docs/snippets/pdk-migration/example/03-migrate-infra.mdx +3 -2
- package/docs/snippets/pdk-migration/example/04-deploy.mdx +8 -7
- package/docs/snippets/pdk-migration/faq/type-safe-api.mdx +2 -2
- package/docs/snippets/prerequisites.mdx +0 -5
- package/docs/snippets/recommended-prerequisites.mdx +1 -1
- package/docs/snippets/workspace-prerequisite.mdx +8 -0
- package/package.json +1 -1
|
@@ -6,14 +6,23 @@ description: Building with AI and the Nx Plugin for AWS MCP Server
|
|
|
6
6
|
import Link from "@components/link.astro";
|
|
7
7
|
import Snippet from "@components/snippet.astro";
|
|
8
8
|
import { Steps, Tabs, TabItem } from "@astrojs/starlight/components";
|
|
9
|
+
import Prompt from "@components/prompt.astro";
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
## Already configured in your workspace
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
Workspaces created with the Nx Plugin for AWS preset include project-level MCP configuration for common coding agents — Claude Code, Cursor, Kiro, Gemini CLI, GitHub Copilot and OpenAI Codex — so an agent working inside the workspace can use the plugin's [MCP server](https://modelcontextprotocol.io/introduction) with no further setup.
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
Open your workspace in your assistant and ask it for what you want:
|
|
16
|
+
|
|
17
|
+
<Prompt>
|
|
18
|
+
Add a React website with an AG-UI agent, an MCP server for its tools and a DynamoDB table, and wire them together.
|
|
19
|
+
</Prompt>
|
|
20
|
+
|
|
21
|
+
It looks up the generators the plugin offers, runs them in the order their dependencies need. Use your agent to fill in the business logic from there.
|
|
22
|
+
|
|
23
|
+
## Install globally
|
|
24
|
+
|
|
25
|
+
The workspace configuration above is enough to build with. You can install globally if you'd like to use AI to create new workspaces, or <Link path="get_started/existing-project">add the Nx Plugin for AWS to an existing project</Link>:
|
|
17
26
|
|
|
18
27
|
<Tabs syncKey="ai-assistant">
|
|
19
28
|
<TabItem label="Kiro">
|
|
@@ -101,16 +110,14 @@ Workspaces created with the Nx Plugin for AWS preset already include project-lev
|
|
|
101
110
|
|
|
102
111
|
## Start Vibe Coding
|
|
103
112
|
|
|
104
|
-
|
|
113
|
+
With the plugin available globally, your assistant can create the workspace too. Try a prompt like:
|
|
105
114
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
>
|
|
115
|
+
<Prompt>
|
|
116
|
+
Build a multi-agent application using the Nx Plugin for AWS. I want a React frontend that talks to a backend orchestrator agent which delegates to specialised research and writing agents.
|
|
117
|
+
</Prompt>
|
|
109
118
|
|
|
110
119
|
Or for a smaller starting point:
|
|
111
120
|
|
|
112
|
-
>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
Check out the <Link path="/guides/ts-mcp-server">`ts#mcp-server` generator guide</Link> for details about building your own MCP Server.
|
|
121
|
+
<Prompt>
|
|
122
|
+
Use the Nx Plugin for AWS to scaffold a React website backed by a tRPC API, with Cognito auth and CDK infrastructure.
|
|
123
|
+
</Prompt>
|
|
@@ -50,7 +50,7 @@ In practice:
|
|
|
50
50
|
- **Upgrading is automated, not a re-adoption exercise.** A workspace generated months ago can move forward with the plugin rather than drifting further from it.
|
|
51
51
|
- **Customisations are pattern-matched, not overwritten.** Migrations check that a file still matches the shape the generator produced. Where it has diverged beyond what they can safely update, they leave your code alone and report the manual follow-up instead.
|
|
52
52
|
- **Some changes arrive as agent prompts.** Where the right edit depends on what you've built, the migration is a prompt your AI coding agent applies rather than a codemod.
|
|
53
|
-
- **Upgrades are opt-in.** Nothing in your workspace changes until you choose to run `nx migrate`.
|
|
53
|
+
- **Upgrades are opt-in.** Nothing in your workspace changes until you choose to run `nx migrate`. After running, you drop any changes you'd rather not take before you commit.
|
|
54
54
|
|
|
55
55
|
Migrations narrow the gap rather than close it: how far your code has moved decides how much they can do, and some steps will still need your hands.
|
|
56
56
|
|
|
@@ -10,13 +10,16 @@ import NxCommands from '@components/nx-commands.astro';
|
|
|
10
10
|
import NxInitCommand from '@components/nx-init-command.astro';
|
|
11
11
|
import TsConfigBaseCompilerOptions from '@components/tsconfig-base-compiler-options.astro';
|
|
12
12
|
import GeneratorParameters from '@components/generator-parameters.astro';
|
|
13
|
+
import Prompt from '@components/prompt.astro';
|
|
13
14
|
|
|
14
15
|
Not every project starts with `pnpm create @aws/nx-workspace`. If you already have an [Nx workspace](https://nx.dev) — or a monorepo you can add Nx to — you can adopt `@aws/nx-plugin` incrementally without recreating your project.
|
|
15
16
|
|
|
16
|
-
<Aside type="tip">
|
|
17
|
-
|
|
17
|
+
<Aside type="tip" title="Use your coding agent">
|
|
18
|
+
Your agentic coding tool of choice can add the plugin for you, using the <Link path="get_started/building-with-ai">MCP server</Link>. Try the prompt:
|
|
18
19
|
|
|
19
|
-
>
|
|
20
|
+
<Prompt>
|
|
21
|
+
Add the Nx Plugin for AWS to this project.
|
|
22
|
+
</Prompt>
|
|
20
23
|
</Aside>
|
|
21
24
|
|
|
22
25
|
## Prerequisites
|
|
@@ -13,96 +13,100 @@ import RunGenerator from '@components/run-generator.astro';
|
|
|
13
13
|
import NxCommands from '@components/nx-commands.astro';
|
|
14
14
|
import Infrastructure from '@components/infrastructure.astro';
|
|
15
15
|
import EmbeddedGraph from '@components/embedded-graph.astro';
|
|
16
|
+
import Diff from '@components/diff.astro';
|
|
17
|
+
import Prompt from '@components/prompt.astro';
|
|
16
18
|
|
|
17
19
|
This guide walks you through the basics of installing and using `@aws/nx-plugin` to rapidly build projects on AWS.
|
|
18
20
|
|
|
19
|
-
:::tip[Full-Stack Tutorial]
|
|
20
|
-
For a more in-depth tutorial for building a full-stack application, check out the <Link path="get_started/tutorials/dungeon-game/overview">Dungeon Adventure Tutorial</Link>.
|
|
21
|
-
:::
|
|
22
|
-
|
|
23
21
|
## Prerequisites
|
|
24
22
|
|
|
25
23
|
The following global dependencies are needed before proceeding:
|
|
26
24
|
|
|
27
25
|
<Snippet name="prerequisites" />
|
|
28
26
|
|
|
29
|
-
## Step 1:
|
|
27
|
+
## Step 1: Create a Workspace
|
|
30
28
|
|
|
31
|
-
|
|
29
|
+
Create an <Link path="guides/workspace">Nx workspace</Link> with the package manager of your choice, and open the directory it creates:
|
|
32
30
|
|
|
33
31
|
<CreateNxWorkspaceCommand workspace="my-project" />
|
|
34
32
|
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
```sh
|
|
34
|
+
cd my-project
|
|
35
|
+
```
|
|
37
36
|
|
|
38
|
-
|
|
39
|
-
<Fragment slot="cdk">
|
|
40
|
-
<CreateNxWorkspaceCommand workspace="my-project" iac="cdk" />
|
|
41
|
-
</Fragment>
|
|
42
|
-
<Fragment slot="terraform">
|
|
43
|
-
<CreateNxWorkspaceCommand workspace="my-project" iac="terraform" />
|
|
44
|
-
</Fragment>
|
|
45
|
-
</Infrastructure>
|
|
37
|
+
You are prompted to choose your infrastructure as code provider, either [CDK](https://docs.aws.amazon.com/cdk/) or [Terraform](https://developer.hashicorp.com/terraform), and the container engine used by generators which build container images.
|
|
46
38
|
|
|
47
|
-
|
|
48
|
-
:::
|
|
39
|
+
## Step 2: Build Your Application
|
|
49
40
|
|
|
50
|
-
|
|
41
|
+
We'll build a full-stack application: a tRPC API, a React website, Cognito authentication, and CDK or Terraform infrastructure. Ask an AI assistant to scaffold it for you, or run the generators yourself — both routes reach the same workspace.
|
|
51
42
|
|
|
52
|
-
|
|
53
|
-
cd my-project
|
|
54
|
-
```
|
|
43
|
+
### With AI
|
|
55
44
|
|
|
56
|
-
|
|
45
|
+
<Steps>
|
|
46
|
+
1. Open the workspace in your AI coding assistant.
|
|
57
47
|
|
|
58
|
-
|
|
48
|
+
New workspaces come with the plugin's <Link path="get_started/building-with-ai">MCP server</Link> already configured for Kiro, Claude Code, Cursor, Gemini CLI, GitHub Copilot and OpenAI Codex, so your assistant can look up the plugin's generators and run them without any setup.
|
|
59
49
|
|
|
60
|
-
|
|
50
|
+
2. Ask for the application:
|
|
61
51
|
|
|
62
|
-
<
|
|
52
|
+
<Prompt>
|
|
53
|
+
Create a tRPC API called demo-api, and a React website called demo-website. Add Cognito authentication to the website, connect the website to the API, and add an infrastructure project called infra. Then instantiate the generated infrastructure components so the website and API deploy, granting authenticated users access to the API.
|
|
54
|
+
</Prompt>
|
|
63
55
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
:::
|
|
56
|
+
Your assistant discovers the generators through the MCP server and runs them, in the order their dependencies need. Review the changes it makes, then carry on at Step 3.
|
|
57
|
+
</Steps>
|
|
67
58
|
|
|
68
|
-
|
|
59
|
+
### With the CLI
|
|
69
60
|
|
|
70
|
-
|
|
61
|
+
Run the generators that scaffold the application. Use the button below to copy them all, or run each one yourself as described beneath the diagram.
|
|
71
62
|
|
|
72
|
-
<
|
|
63
|
+
<Infrastructure>
|
|
64
|
+
<Fragment slot="cdk">
|
|
65
|
+
<EmbeddedGraph preset="quick-start" workspace="my-project" iac="cdk" orientation="horizontal" skipWorkspace />
|
|
66
|
+
</Fragment>
|
|
67
|
+
<Fragment slot="terraform">
|
|
68
|
+
<EmbeddedGraph preset="quick-start" workspace="my-project" iac="terraform" orientation="horizontal" skipWorkspace />
|
|
69
|
+
</Fragment>
|
|
70
|
+
</Infrastructure>
|
|
71
|
+
|
|
72
|
+
Depending on the type of project you're building, you can choose any combination of generators to quickly bootstrap your project. Check out the __Generators__ in the navigation bar to the left to see the full list of options, or try the <Link path="get_started/graph-builder">graph builder</Link> to construct your workspace visually.
|
|
73
|
+
|
|
74
|
+
#### Add a tRPC API
|
|
75
|
+
|
|
76
|
+
<RunGenerator generator="ts#api" requiredParameters={{ name: 'demo-api', framework: 'trpc' }} positional={['name']} noInteractive />
|
|
73
77
|
|
|
74
78
|
This will create the API inside the `packages/demo-api` folder.
|
|
75
79
|
|
|
76
|
-
|
|
80
|
+
#### Add a React Website
|
|
77
81
|
|
|
78
|
-
<RunGenerator generator="ts#website" requiredParameters={{ name: 'demo-website' }} noInteractive />
|
|
82
|
+
<RunGenerator generator="ts#website" requiredParameters={{ name: 'demo-website' }} positional={['name']} noInteractive />
|
|
79
83
|
|
|
80
84
|
This scaffolds a new React website in `packages/demo-website`.
|
|
81
85
|
|
|
82
|
-
|
|
86
|
+
#### Add Cognito Authentication
|
|
83
87
|
|
|
84
|
-
<RunGenerator generator="ts#website#auth" requiredParameters={{ project: '
|
|
88
|
+
<RunGenerator generator="ts#website#auth" requiredParameters={{ project: 'demo-website' }} noInteractive />
|
|
85
89
|
|
|
86
90
|
This sets up the necessary infrastructure and React code to add Cognito Authentication to your website.
|
|
87
91
|
|
|
88
|
-
|
|
92
|
+
#### Connect Frontend to Backend
|
|
89
93
|
|
|
90
|
-
<RunGenerator generator="connection" requiredParameters={{ sourceProject: '
|
|
94
|
+
<RunGenerator generator="connection" requiredParameters={{ sourceProject: 'demo-website', targetProject: 'demo-api' }} noInteractive />
|
|
91
95
|
|
|
92
96
|
This configures the necessary providers to ensure your website can call your tRPC API.
|
|
93
97
|
|
|
94
|
-
|
|
98
|
+
#### Add Infrastructure
|
|
95
99
|
|
|
96
100
|
Add the infrastructure project based on your chosen IAC provider.
|
|
97
101
|
|
|
98
102
|
<Infrastructure>
|
|
99
103
|
<Fragment slot="cdk">
|
|
100
|
-
<RunGenerator generator="ts#infra" requiredParameters={{ name: 'infra' }} noInteractive />
|
|
104
|
+
<RunGenerator generator="ts#infra" requiredParameters={{ name: 'infra' }} positional={['name']} noInteractive />
|
|
101
105
|
|
|
102
106
|
This configures a CDK App which you can use to deploy your infrastructure on AWS.
|
|
103
107
|
</Fragment>
|
|
104
108
|
<Fragment slot="terraform">
|
|
105
|
-
<RunGenerator generator="terraform#project" requiredParameters={{ name: 'infra' }} noInteractive />
|
|
109
|
+
<RunGenerator generator="terraform#project" requiredParameters={{ name: 'infra' }} positional={['name']} noInteractive />
|
|
106
110
|
|
|
107
111
|
This configures a Terraform project which you can use to deploy your infrastructure on AWS.
|
|
108
112
|
</Fragment>
|
|
@@ -118,6 +122,67 @@ Your website will be available at `http://localhost:4200`.
|
|
|
118
122
|
|
|
119
123
|
Changes to both your website and API will be reflected in real-time as both the local website and API servers will hot-reload.
|
|
120
124
|
|
|
125
|
+
<Drawer title="Calling your API from your website" trigger="Try it: call the API from your website">
|
|
126
|
+
|
|
127
|
+
Connecting the website to the API added a `useDemoApi` hook, which returns a [tRPC options proxy](https://trpc.io/docs/client/tanstack-react-query): every procedure on your API offers `queryOptions` and `mutationOptions` to hand to [TanStack Query](https://tanstack.com/query/latest).
|
|
128
|
+
|
|
129
|
+
Update `packages/demo-website/src/routes/index.tsx` to call the API's `echo` procedure, showing a spinner while the request is in flight:
|
|
130
|
+
|
|
131
|
+
<Diff lang="tsx" before={`import { createFileRoute } from '@tanstack/react-router';
|
|
132
|
+
|
|
133
|
+
export const Route = createFileRoute('/')({
|
|
134
|
+
component: RouteComponent,
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
function RouteComponent() {
|
|
138
|
+
return (
|
|
139
|
+
<div className="text-center">
|
|
140
|
+
<header>
|
|
141
|
+
<h1>Welcome</h1>
|
|
142
|
+
<p>Welcome to your new React website!</p>
|
|
143
|
+
</header>
|
|
144
|
+
</div>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
`} after={`import { useQuery } from '@tanstack/react-query';
|
|
148
|
+
import { createFileRoute } from '@tanstack/react-router';
|
|
149
|
+
import { Spinner } from '../components/spinner';
|
|
150
|
+
import { useDemoApi } from '../hooks/useDemoApi';
|
|
151
|
+
|
|
152
|
+
export const Route = createFileRoute('/')({
|
|
153
|
+
component: RouteComponent,
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
function RouteComponent() {
|
|
157
|
+
const trpc = useDemoApi();
|
|
158
|
+
const echo = useQuery(
|
|
159
|
+
trpc.echo.queryOptions({ message: 'Hello from the API!' }),
|
|
160
|
+
);
|
|
161
|
+
|
|
162
|
+
return (
|
|
163
|
+
<div className="text-center">
|
|
164
|
+
<header>
|
|
165
|
+
<h1>Welcome</h1>
|
|
166
|
+
<p>Welcome to your new React website!</p>
|
|
167
|
+
</header>
|
|
168
|
+
{echo.isLoading ? (
|
|
169
|
+
<Spinner />
|
|
170
|
+
) : echo.error ? (
|
|
171
|
+
<p>Error: {echo.error.message}</p>
|
|
172
|
+
) : (
|
|
173
|
+
<p>{echo.data?.message}</p>
|
|
174
|
+
)}
|
|
175
|
+
</div>
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
`} />
|
|
179
|
+
|
|
180
|
+
Save the file and the page reloads with the message your API echoed back. The call is type-safe end to end — rename `message` in `packages/demo-api/src/schema/echo.ts` and your website stops compiling until you follow the change through.
|
|
181
|
+
|
|
182
|
+
See the <Link path="guides/connection/react-trpc">React to tRPC connection guide</Link> for mutations, subscriptions, error handling and optimistic updates.
|
|
183
|
+
|
|
184
|
+
</Drawer>
|
|
185
|
+
|
|
121
186
|
## Step 4: Define Cloud Resources and Deploy to AWS
|
|
122
187
|
|
|
123
188
|
<Infrastructure>
|
|
@@ -154,11 +219,6 @@ This is all the CDK we need to write to deploy our full stack application.
|
|
|
154
219
|
Open `packages/infra/src/main.tf` and add the following code:
|
|
155
220
|
|
|
156
221
|
```hcl
|
|
157
|
-
# Include metrics tracking for @aws/nx-plugin usage
|
|
158
|
-
module "metrics" {
|
|
159
|
-
source = "../../common/terraform/src/metrics"
|
|
160
|
-
}
|
|
161
|
-
|
|
162
222
|
# Deploy user identity
|
|
163
223
|
module "user_identity" {
|
|
164
224
|
source = "../../common/terraform/src/core/user-identity"
|
|
@@ -213,6 +273,15 @@ module "demo_website" {
|
|
|
213
273
|
|
|
214
274
|
depends_on = [module.user_identity, module.demo_api]
|
|
215
275
|
}
|
|
276
|
+
|
|
277
|
+
# Print the website URL and user pool id when the deployment finishes
|
|
278
|
+
output "website_url" {
|
|
279
|
+
value = module.demo_website.website_url
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
output "user_pool_id" {
|
|
283
|
+
value = module.user_identity.user_pool_id
|
|
284
|
+
}
|
|
216
285
|
```
|
|
217
286
|
|
|
218
287
|
This is all the Terraform we need to write to deploy our full stack application.
|
|
@@ -231,7 +300,7 @@ If you encounter any lint or formatting errors, you can run the following comman
|
|
|
231
300
|
<PackageManagerShortCommand commands={["lint"]} />
|
|
232
301
|
:::
|
|
233
302
|
|
|
234
|
-
:::
|
|
303
|
+
:::note[The workspace is out of sync]
|
|
235
304
|
If the build reports `The workspace is out of sync`, accept the prompt to sync the workspace or run the following sync command directly before retrying the build:
|
|
236
305
|
|
|
237
306
|
<NxCommands commands={["sync"]} />
|
|
@@ -246,7 +315,9 @@ Bootstrap your infrastructure:
|
|
|
246
315
|
<NxCommands commands={['bootstrap infra']} />
|
|
247
316
|
|
|
248
317
|
:::tip[Bootstrap Regions]
|
|
249
|
-
CDK bootstrapping is required for both your target deployment AWS region, and `us-east-1` to allow deployment of the AWS WAF WebACL for the website.
|
|
318
|
+
CDK bootstrapping is required for both your target deployment AWS region, and `us-east-1` to allow deployment of the AWS WAF WebACL for the website. If you are deploying elsewhere, bootstrap `us-east-1` too:
|
|
319
|
+
|
|
320
|
+
<NxCommands commands={['run infra:bootstrap --args="aws://<account-id>/us-east-1"']} />
|
|
250
321
|
:::
|
|
251
322
|
</Fragment>
|
|
252
323
|
<Fragment slot="terraform">
|
|
@@ -308,6 +379,8 @@ The first time you sign in as this user you are prompted to choose a new passwor
|
|
|
308
379
|
|
|
309
380
|
Your website is also served from CloudFront. Open its distribution domain name (which is printed to your terminal after deployment) to use the version running entirely on AWS.
|
|
310
381
|
|
|
382
|
+
Congratulations! 🎉 You have successfully built and deployed a full-stack application using `@aws/nx-plugin`!
|
|
383
|
+
|
|
311
384
|
## Step 6: Clean Up
|
|
312
385
|
|
|
313
386
|
When you have finished, delete the resources you deployed to avoid ongoing costs:
|
|
@@ -315,16 +388,47 @@ When you have finished, delete the resources you deployed to avoid ongoing costs
|
|
|
315
388
|
<Infrastructure>
|
|
316
389
|
<Fragment slot="cdk">
|
|
317
390
|
<NxCommands commands={['destroy-sandbox infra']} />
|
|
391
|
+
|
|
392
|
+
:::note[Retained Resources]
|
|
393
|
+
The Cognito user pool is created with deletion protection enabled, so it is not removed automatically. Delete it (and the IAM role Cognito uses to send SMS messages) manually if you no longer need them.
|
|
394
|
+
:::
|
|
318
395
|
</Fragment>
|
|
319
396
|
<Fragment slot="terraform">
|
|
320
397
|
<NxCommands commands={['destroy infra']} />
|
|
398
|
+
|
|
399
|
+
:::note[Retained Resources]
|
|
400
|
+
The Cognito user pool is created with deletion protection enabled, so it is not removed automatically (the destroy command will report a failure). Delete it (and the IAM role Cognito uses to send SMS messages) manually if you no longer need them.
|
|
401
|
+
:::
|
|
321
402
|
</Fragment>
|
|
322
403
|
</Infrastructure>
|
|
323
404
|
|
|
324
|
-
|
|
325
|
-
|
|
405
|
+
To remove bootstrap resources, follow below:
|
|
406
|
+
|
|
407
|
+
<Infrastructure>
|
|
408
|
+
<Fragment slot="cdk">
|
|
409
|
+
Delete the bootstrap stack in every region you bootstrapped, including `us-east-1`. This removes the bootstrap roles and the container image repository:
|
|
410
|
+
|
|
411
|
+
```sh
|
|
412
|
+
aws cloudformation delete-stack --stack-name CDKToolkit --region <region>
|
|
413
|
+
```
|
|
414
|
+
|
|
415
|
+
:::note[Asset Bucket]
|
|
416
|
+
The asset bucket is retained on purpose, so delete it separately.
|
|
326
417
|
:::
|
|
418
|
+
</Fragment>
|
|
419
|
+
<Fragment slot="terraform">
|
|
420
|
+
<NxCommands commands={['bootstrap-destroy infra']} />
|
|
421
|
+
|
|
422
|
+
:::caution[Your Terraform State Is Deleted Too]
|
|
423
|
+
This empties and deletes the S3 bucket holding your Terraform state, so only run it once you have torn down all deployed infrastructure.
|
|
424
|
+
:::
|
|
425
|
+
</Fragment>
|
|
426
|
+
</Infrastructure>
|
|
327
427
|
|
|
328
428
|
---
|
|
329
429
|
|
|
330
|
-
|
|
430
|
+
## Next Steps
|
|
431
|
+
|
|
432
|
+
- <Link path="get_started/tutorials/dungeon-game/overview">Dungeon Adventure Tutorial</Link> — build a full-stack AI dungeon adventure game, for a more in-depth walkthrough than this guide.
|
|
433
|
+
- <Link path="guides/workspace">Workspaces</Link> — how your workspace is laid out, and the configuration the generators share.
|
|
434
|
+
- <Link path="get_started/existing-project">Add to an Existing Project</Link> — adopt the plugin in your existing codebase.
|
|
@@ -10,7 +10,6 @@ import Drawer from '@components/drawer.astro';
|
|
|
10
10
|
import RunGenerator from '@components/run-generator.astro';
|
|
11
11
|
import NxCommands from '@components/nx-commands.astro';
|
|
12
12
|
import InstallCommand from '@components/install-command.astro';
|
|
13
|
-
import Link from '@components/link.astro';
|
|
14
13
|
|
|
15
14
|
import baselineWebsitePng from '@assets/baseline-website.png'
|
|
16
15
|
import baselineGamePng from '@assets/baseline-game.png'
|
|
@@ -138,8 +137,4 @@ Before you proceed, you will need the following global dependencies:
|
|
|
138
137
|
|
|
139
138
|
<Snippet name="required-prerequisites" />
|
|
140
139
|
- [AWS Credentials](https://docs.aws.amazon.com/sdkref/latest/guide/access.html) configured to your target AWS account, since this tutorial deploys the application and invokes Amazon Bedrock
|
|
141
|
-
- [Docker](https://www.docker.com/) (or [Finch](https://github.com/runfinch/finch)) is required for local DynamoDB development
|
|
142
|
-
|
|
143
|
-
:::tip[AI Assistant Setup]
|
|
144
|
-
If you use an AI Assistant such as Kiro, Kiro CLI, Cursor, Claude Code or Cline, refer to the <Link path="/get_started/building-with-ai">install the Nx Plugin for AWS MCP server</Link> page.
|
|
145
|
-
:::
|
|
140
|
+
- [Docker](https://www.docker.com/) (or [Finch](https://github.com/runfinch/finch)) is required for local DynamoDB development
|
|
@@ -8,6 +8,7 @@ import Link from '@components/link.astro';
|
|
|
8
8
|
import NxCommands from '@components/nx-commands.astro';
|
|
9
9
|
import Drawer from '@components/drawer.astro';
|
|
10
10
|
import InstallCommand from '@components/install-command.astro';
|
|
11
|
+
import PackageManagerShortCommand from '@components/package-manager-short-command.astro';
|
|
11
12
|
|
|
12
13
|
The `TypeSafeApiProject` used in the shopping list application made use of:
|
|
13
14
|
|
|
@@ -114,12 +115,12 @@ Now that we have the basic structure for our Smithy API project, we can migrate
|
|
|
114
115
|
|
|
115
116
|
At this point, let's run a build to check our model changes and ensure we have some generated server code to work with. There will be some failures in the backend project (`@shopping-list/api`) but we'll address those next.
|
|
116
117
|
|
|
117
|
-
<
|
|
118
|
+
<PackageManagerShortCommand commands={["build"]} />
|
|
118
119
|
|
|
119
120
|
:::note
|
|
120
121
|
You may see a build failure due to lint issues. These can usually be automatically fixed:
|
|
121
122
|
|
|
122
|
-
<
|
|
123
|
+
<PackageManagerShortCommand commands={["lint"]} />
|
|
123
124
|
:::
|
|
124
125
|
|
|
125
126
|
#### Migrate the Lambda Handlers
|
|
@@ -132,7 +133,7 @@ The shopping list application's lambda handlers rely on the `@aws-sdk/client-dyn
|
|
|
132
133
|
|
|
133
134
|
<InstallCommand pkg="@aws-sdk/client-dynamodb" project="@shopping-list/api" />
|
|
134
135
|
|
|
135
|
-
Then, let's copy the `handlers/src/dynamo-client.ts` file from the PDK project to `backend/src/operations` so it's available for our handlers.
|
|
136
|
+
Then, let's copy the `handlers/typescript/src/dynamo-client.ts` file from the PDK project to `backend/src/operations` so it's available for our handlers.
|
|
136
137
|
|
|
137
138
|
The `ts#smithy-api` generator scaffolds an example `Echo` operation. Since we removed this from our model, delete the corresponding handler in `backend/src/operations/echo.ts`. We'll register our migrated operations in `service.ts` further below.
|
|
138
139
|
|
|
@@ -587,6 +588,7 @@ Additionally, update `packages/api/backend/project.json` and update `metadata.ap
|
|
|
587
588
|
+ "apiName": "my-api",
|
|
588
589
|
"auth": "iam",
|
|
589
590
|
"modelProject": "@shopping-list/api-model",
|
|
591
|
+
"iac": "cdk",
|
|
590
592
|
"ports": [3001]
|
|
591
593
|
},
|
|
592
594
|
```
|
|
@@ -595,10 +597,10 @@ Additionally, update `packages/api/backend/project.json` and update `metadata.ap
|
|
|
595
597
|
|
|
596
598
|
We can now build the project to check that the migration has worked so far:
|
|
597
599
|
|
|
598
|
-
<
|
|
600
|
+
<PackageManagerShortCommand commands={["build"]} />
|
|
599
601
|
|
|
600
602
|
:::note
|
|
601
603
|
You may see a build failure due to lint issues. These can usually be automatically fixed:
|
|
602
604
|
|
|
603
|
-
<
|
|
605
|
+
<PackageManagerShortCommand commands={["lint"]} />
|
|
604
606
|
:::
|
|
@@ -8,6 +8,7 @@ import Link from '@components/link.astro';
|
|
|
8
8
|
import NxCommands from '@components/nx-commands.astro';
|
|
9
9
|
import Drawer from '@components/drawer.astro';
|
|
10
10
|
import InstallCommand from '@components/install-command.astro';
|
|
11
|
+
import PackageManagerShortCommand from '@components/package-manager-short-command.astro';
|
|
11
12
|
|
|
12
13
|
The `CloudscapeReactTsWebsiteProject` used in the shopping list application configured a React website with CloudScape and Cognito authentication built in.
|
|
13
14
|
|
|
@@ -100,7 +101,7 @@ Since we're using [file-based routing](https://tanstack.com/router/latest/docs/f
|
|
|
100
101
|
|
|
101
102
|
Let's start the local website server:
|
|
102
103
|
|
|
103
|
-
<
|
|
104
|
+
<PackageManagerShortCommand commands={["dev"]} />
|
|
104
105
|
|
|
105
106
|
:::tip
|
|
106
107
|
We're using the `dev` target here, which also starts local servers for any APIs which have been connected with `connection`, and hot-reloads if your website, model, or backend changes! This allows us to test our API and website locally before we've even written any CDK code.
|
|
@@ -8,6 +8,7 @@ import Link from '@components/link.astro';
|
|
|
8
8
|
import NxCommands from '@components/nx-commands.astro';
|
|
9
9
|
import Drawer from '@components/drawer.astro';
|
|
10
10
|
import InstallCommand from '@components/install-command.astro';
|
|
11
|
+
import PackageManagerShortCommand from '@components/package-manager-short-command.astro';
|
|
11
12
|
|
|
12
13
|
The last project we need to migrate for our shopping list application is the `InfrastructureTsProject`. This is a TypeScript CDK project, for which the Nx Plugin for AWS equivalent is the <Link path="/guides/typescript-infrastructure">`ts#infra` generator</Link>.
|
|
13
14
|
|
|
@@ -152,10 +153,10 @@ Notice that we don't pass the identity or API to the website - runtime config is
|
|
|
152
153
|
|
|
153
154
|
Let's build the project now that we've migrated all the relevant parts of the codebase to our new project.
|
|
154
155
|
|
|
155
|
-
<
|
|
156
|
+
<PackageManagerShortCommand commands={["build"]} />
|
|
156
157
|
|
|
157
158
|
:::caution
|
|
158
159
|
You may see a build failure due to lint issues. These can usually be automatically fixed:
|
|
159
160
|
|
|
160
|
-
<
|
|
161
|
+
<PackageManagerShortCommand commands={["lint"]} />
|
|
161
162
|
:::
|
|
@@ -8,6 +8,7 @@ import Link from '@components/link.astro';
|
|
|
8
8
|
import NxCommands from '@components/nx-commands.astro';
|
|
9
9
|
import Drawer from '@components/drawer.astro';
|
|
10
10
|
import InstallCommand from '@components/install-command.astro';
|
|
11
|
+
import PackageManagerShortCommand from '@components/package-manager-short-command.astro';
|
|
11
12
|
|
|
12
13
|
|
|
13
14
|
Now we've got our fully migrated codebase, we can look at deploying it. There are two paths we can take at this point.
|
|
@@ -22,7 +23,7 @@ The simplest approach is to treat this as a completely new application, meaning
|
|
|
22
23
|
|
|
23
24
|
1. Deploy the new application:
|
|
24
25
|
|
|
25
|
-
<NxCommands commands={[
|
|
26
|
+
<NxCommands commands={['deploy-sandbox infra']} />
|
|
26
27
|
|
|
27
28
|
</Steps>
|
|
28
29
|
|
|
@@ -63,7 +64,7 @@ For our shopping list application, the stateful resources we care about are the
|
|
|
63
64
|
|
|
64
65
|
```diff lang="ts"
|
|
65
66
|
// packages/common/constructs/src/core/user-identity.ts
|
|
66
|
-
-this.userPool = this.createUserPool();
|
|
67
|
+
-this.userPool = this.createUserPool(mfa, mfaSecondFactor);
|
|
67
68
|
+this.userPool = UserPool.fromUserPoolId(
|
|
68
69
|
+ this,
|
|
69
70
|
+ 'UserPool',
|
|
@@ -73,9 +74,9 @@ For our shopping list application, the stateful resources we care about are the
|
|
|
73
74
|
|
|
74
75
|
1. Build and deploy the new application:
|
|
75
76
|
|
|
76
|
-
<
|
|
77
|
+
<PackageManagerShortCommand commands={["build"]} />
|
|
77
78
|
|
|
78
|
-
<NxCommands commands={[
|
|
79
|
+
<NxCommands commands={['deploy-sandbox infra']} />
|
|
79
80
|
|
|
80
81
|
Now we have our new application stood up referencing the existing resources, not yet taking any traffic.
|
|
81
82
|
|
|
@@ -98,7 +99,7 @@ For our shopping list application, the stateful resources we care about are the
|
|
|
98
99
|
|
|
99
100
|
```diff lang="ts"
|
|
100
101
|
// packages/common/constructs/src/core/user-identity.ts
|
|
101
|
-
+this.userPool = this.createUserPool();
|
|
102
|
+
+this.userPool = this.createUserPool(mfa, mfaSecondFactor);
|
|
102
103
|
-this.userPool = UserPool.fromUserPoolId(
|
|
103
104
|
- this,
|
|
104
105
|
- 'UserPool',
|
|
@@ -108,7 +109,7 @@ For our shopping list application, the stateful resources we care about are the
|
|
|
108
109
|
|
|
109
110
|
And then run a build
|
|
110
111
|
|
|
111
|
-
<
|
|
112
|
+
<PackageManagerShortCommand commands={["build"]} />
|
|
112
113
|
|
|
113
114
|
1. Use `cdk import` in your new application's `packages/infra` folder to see which resources we'll be prompted to import.
|
|
114
115
|
|
|
@@ -199,7 +200,7 @@ For our shopping list application, the stateful resources we care about are the
|
|
|
199
200
|
|
|
200
201
|
1. Deploy the new application again to make sure that any changes to these existing resources (now managed by your new stack) are made:
|
|
201
202
|
|
|
202
|
-
<NxCommands commands={[
|
|
203
|
+
<NxCommands commands={['deploy-sandbox infra']} />
|
|
203
204
|
|
|
204
205
|
1. Perform a full test of your new application again
|
|
205
206
|
|
|
@@ -14,7 +14,7 @@ The most commonly used components from Type Safe API are covered in the example
|
|
|
14
14
|
|
|
15
15
|
#### APIs Modelled with OpenAPI
|
|
16
16
|
|
|
17
|
-
The Nx Plugin for AWS supports APIs modelled in Smithy, but not those modelled directly OpenAPI. The <Link path="/guides/ts-smithy-api">`ts#smithy-api` generator</Link> is a good starting point which you can then modify. You can define your OpenAPI specification in the `model` project's `src` folder instead of Smithy, and
|
|
17
|
+
The Nx Plugin for AWS supports APIs modelled in Smithy, but not those modelled directly OpenAPI. The <Link path="/guides/ts-smithy-api">`ts#smithy-api` generator</Link> is a good starting point which you can then modify. You can define your OpenAPI specification in the `model` project's `src` folder instead of Smithy, and update the `model` project's `compile` target to run your desired code generation tool for clients/servers. If your desired tools are on NPM, you can install them as dev dependencies to your Nx workspace and call them directly as Nx build targets.
|
|
18
18
|
|
|
19
19
|
##### Backend
|
|
20
20
|
|
|
@@ -153,7 +153,7 @@ const pythonLambdaHandler = new Function(this, 'PythonImplementation', {
|
|
|
153
153
|
...
|
|
154
154
|
});
|
|
155
155
|
|
|
156
|
-
new
|
|
156
|
+
new Api(this, 'MyApi', {
|
|
157
157
|
integrations: Api.defaultIntegrations(this)
|
|
158
158
|
.withOverrides({
|
|
159
159
|
echo: {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Prerequisites
|
|
3
3
|
---
|
|
4
|
-
import Link from '@components/link.astro';
|
|
5
4
|
import Snippet from '@components/snippet.astro';
|
|
6
5
|
|
|
7
6
|
### Required
|
|
@@ -11,7 +10,3 @@ import Snippet from '@components/snippet.astro';
|
|
|
11
10
|
### Recommended
|
|
12
11
|
|
|
13
12
|
<Snippet name="recommended-prerequisites" parentHeading="Recommended" />
|
|
14
|
-
|
|
15
|
-
:::tip[AI Assistant Setup]
|
|
16
|
-
If you use an AI Assistant such as Kiro, Kiro CLI, Cursor, Claude Code or Codex, you may also wish to <Link path="/get_started/building-with-ai">install the Nx Plugin for AWS MCP server.</Link>
|
|
17
|
-
:::
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Recommended Prerequisites
|
|
3
3
|
---
|
|
4
|
-
- [PNPM >= 11](https://pnpm.io/installation#using-npm) (you can also use [Yarn >= 4](https://yarnpkg.com/getting-started/install), [Bun >= 1](https://bun.sh/docs/installation), or [NPM >=
|
|
4
|
+
- [PNPM >= 11](https://pnpm.io/installation#using-npm) (you can also use [Yarn >= 4](https://yarnpkg.com/getting-started/install), [Bun >= 1](https://bun.sh/docs/installation), or [NPM >= 11](https://nodejs.org/en/learn/getting-started/an-introduction-to-the-npm-package-manager) if you prefer)
|
|
5
5
|
- verify by running `pnpm --version`, `yarn --version`, `bun --version` or `npm --version`
|
|
6
6
|
- [AWS Credentials](https://docs.aws.amazon.com/sdkref/latest/guide/access.html) configured to your target AWS account are required to deploy your application (as well as for some local development workflows).
|
|
7
7
|
- [Docker](https://www.docker.com/) or [Finch >= 1.6.0](https://runfinch.com/) is required for some generators. For Docker, [multi-platform builds](https://docs.docker.com/build/building/multi-platform/) must be set up; Finch supports [multi-platform builds](https://runfinch.com/docs/getting-started/building-images/#building-a-multi-architecture-container-image) out of the box.
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Workspace Prerequisite
|
|
3
|
+
---
|
|
4
|
+
import Link from '@components/link.astro';
|
|
5
|
+
|
|
6
|
+
:::note[Start here]
|
|
7
|
+
Generators run inside an Nx workspace with `@aws/nx-plugin` installed. If you don't have one yet, start by <Link path="guides/workspace">creating a workspace</Link>, or <Link path="get_started/existing-project">adding the plugin to an existing project</Link>.
|
|
8
|
+
:::
|