@aws/nx-plugin-mcp 1.0.0-rc.8 → 1.0.0-rc.80

package/docs/guides/react-website.mdx

@@ -1,12 +1,14 @@
 ---
 title: React Website
 description: Reference documentation for a React Website
-generator: ts#react-website
+generator: ts#website
 when:
   framework:
     - react
 ---
-import { FileTree, Steps } from '@astrojs/starlight/components';
+import { FileTree, Steps, CardGrid } from '@astrojs/starlight/components';
+import Astro from '@astrojs/react';
+import ConnectionCard from '@components/connection-card.astro';
 import Link from '@components/link.astro';
 import RunGenerator from '@components/run-generator.astro';
 import GeneratorParameters from '@components/generator-parameters.astro';
@@ -16,12 +18,12 @@ import Infrastructure from '@components/infrastructure.astro';
 import Snippet from '@components/snippet.astro';
 import OptionFilter from '@components/option-filter.astro';
 
-This generator creates a new [React](https://react.dev/) website with [Cloudscape](http://cloudscape.design/) configured by default, along with the AWS CDK or Terraform infrastructure to deploy your website to the cloud as a static website hosted in [S3](https://aws.amazon.com/s3/), served by [CloudFront](https://aws.amazon.com/cloudfront/) and protected by [WAF](https://aws.amazon.com/waf/).
+This generator creates a new [React](https://react.dev/) website with [shadcn/ui](https://ui.shadcn.com/) configured by default, along with the AWS CDK or Terraform infrastructure to deploy your website to the cloud as a static website hosted in [S3](https://aws.amazon.com/s3/), served by [CloudFront](https://aws.amazon.com/cloudfront/) and protected by [WAF](https://aws.amazon.com/waf/).
 
 The generated application uses [Vite](https://vite.dev/) as the build tool and bundler. It uses [TanStack Router](https://tanstack.com/router/v1) for type-safe routing.
 
 :::note[UX Provider]
-The default `uxProvider` is [Cloudscape](http://cloudscape.design/). You can also select [shadcn/ui](https://ui.shadcn.com/) or `None` (bring your own component library).
+The default `ux` is [shadcn/ui](https://ui.shadcn.com/). You can also select [Cloudscape](http://cloudscape.design/) or `none` (bring your own component library).
 :::
 
 ## Usage
@@ -30,7 +32,7 @@ The default `uxProvider` is [Cloudscape](http://cloudscape.design/). You can als
 
 You can generate a new React Website in two ways:
 
-<RunGenerator generator="ts#website" />
+<RunGenerator generator="ts#website" requiredParameters={{ framework: 'react' }} />
 
 ### Options
 
@@ -57,6 +59,7 @@ The generator will create the following project structure in the `<directory>/<n
   - tsconfig.json Base TypeScript configuration for source and tests
   - tsconfig.app.json TypeScript configuration for source code
   - tsconfig.spec.json TypeScript configuration for tests
+  - package.json Project manifest defining the project's package name and dependencies
 </FileTree>
 
 :::note[Without TanStack Router]
@@ -67,7 +70,7 @@ If you opted not to use [TanStack Router](https://tanstack.com/router/v1), you w
 
 <Snippet name="shared-constructs" />
 
-The generator creates infrastructure as code for deploying your website based on your selected `iacProvider`:
+The generator creates infrastructure as code for deploying your website based on your selected `iac`:
 
 <Infrastructure>
 <Fragment slot="cdk">
@@ -126,7 +129,7 @@ waf -> cloudfront
 cloudfront -> s3
 ```
 
-## Implementing your React Website
+## Implementing your Website
 
 The [React documentation](https://react.dev/learn) is a good place to start to learn the basics of building with React.
 
@@ -177,28 +180,343 @@ export const MyComponent = () => {
 
 For more details, check out the [TanStack Router](https://tanstack.com/router/latest/docs/framework/react/overview) documentation.
 
+## Deploying your Website
+
+The React website generator creates CDK or Terraform infrastructure as code based on your selected `iac`. You can use this to deploy your website.
+
+<Infrastructure>
+<Fragment slot="cdk">
+To deploy your website, we recommend using the <Link path="guides/typescript-infrastructure">`ts#infra` generator</Link> to create a CDK application.
+
+You can use the CDK construct generated for you in `packages/common/constructs` to deploy your website.
+
+```ts title="packages/infra/src/stacks/application-stack.ts" {3, 9}
+import { Stack } from 'aws-cdk-lib';
+import { Construct } from 'constructs';
+import { MyWebsite } from '@my-scope/common-constructs';
+
+export class ApplicationStack extends Stack {
+  constructor(scope: Construct, id: string) {
+    super(scope, id);
+
+    new MyWebsite(this, 'MyWebsite');
+  }
+}
+```
+
+This sets up:
+
+1. An S3 bucket for hosting your static website files
+2. CloudFront distribution for global content delivery
+3. WAF Web ACL for security protection
+4. Origin Access Control for secure S3 access
+5. Automatic deployment of website files and runtime configuration
+</Fragment>
+<Fragment slot="terraform">
+To deploy your website, we recommend using the <Link path="/guides/terraform-project">`terraform#project` generator</Link> to create a Terraform project.
+
+You can use the Terraform module generated for you in `packages/common/terraform` to deploy your website.
+
+```hcl title="packages/infra/src/main.tf" {3}
+# Deploy website
+module "my_website" {
+  source = "../../common/terraform/src/app/static-websites/my-website"
+
+  providers = {
+    aws.us_east_1 = aws.us_east_1
+  }
+}
+```
+
+This sets up:
+
+1. An S3 bucket for hosting your static website files
+2. CloudFront distribution for global content delivery
+3. WAF Web ACL for security protection (deployed in us-east-1)
+4. Origin Access Control for secure S3 access
+5. Automatic deployment of website files and runtime configuration
+
+:::note[WAF Provider Region]
+The `aws.us_east_1` provider is required for CloudFront and WAF resources, which must be deployed in the us-east-1 region. Make sure your Terraform configuration includes this provider:
+
+```hcl title="packages/infra/src/providers.tf"
+provider "aws" {
+  alias  = "us_east_1"
+  region = "us-east-1"
+}
+```
+:::
+</Fragment>
+</Infrastructure>
+
+### Security Headers
+
+The CloudFront distribution applies a response headers policy that sets `Strict-Transport-Security`, `X-Content-Type-Options`, `X-Frame-Options: DENY`, `Referrer-Policy` and a `Content-Security-Policy` on all responses.
+
+A default `Content-Security-Policy` is enforced. It restricts scripts and framing to mitigate XSS and clickjacking, while permitting HTTPS and WSS connections so the website can call AWS service endpoints (such as API Gateway, Cognito and Bedrock AgentCore) whose URLs are only known at deploy time. To adjust the policy (for example to tighten `connect-src` to your specific origins), edit the `content_security_policy` value in your generated `static-website.ts` (CDK) or `static-website.tf` (Terraform).
+
+`runtime-config.json` is served with `Cache-Control: no-cache` so that browsers always fetch the latest configuration after a redeploy, rather than using a stale cached copy.
+
+### WAF
+
+The CloudFront distribution is protected by an [AWS WAFv2](https://docs.aws.amazon.com/waf/latest/developerguide/waf-chapter.html) Web ACL by default. The Web ACL uses the AWS managed default ruleset ([`AWSManagedRulesCommonRuleSet`](https://docs.aws.amazon.com/waf/latest/developerguide/aws-managed-rule-groups-baseline.html#aws-managed-rule-groups-baseline-crs) and [`AWSManagedRulesKnownBadInputsRuleSet`](https://docs.aws.amazon.com/waf/latest/developerguide/aws-managed-rule-groups-baseline.html#aws-managed-rule-groups-baseline-known-bad-inputs)), providing protection against common web exploits including the OWASP Top 10.
+
+<Infrastructure>
+<Fragment slot="cdk">
+To opt out, set `enableWaf` to `false` when you create your website:
+
+```ts title="packages/infra/src/stacks/application-stack.ts" {10,15-18}
+import { Stack } from 'aws-cdk-lib';
+import { Construct } from 'constructs';
+import { MyWebsite, suppressRules } from '@my-scope/common-constructs';
+
+export class ApplicationStack extends Stack {
+  constructor(scope: Construct, id: string) {
+    super(scope, id);
+
+    const website = new MyWebsite(this, 'MyWebsite', {
+      enableWaf: false,
+    });
+
+    // Disabling WAF fails the checkov CKV_AWS_68 check ("CloudFront
+    // Distribution should have WAF enabled"). Suppress it explicitly.
+    suppressRules(
+      website.cloudFrontDistribution,
+      ['CKV_AWS_68'],
+      'WAF is intentionally disabled for this distribution',
+    );
+  }
+}
+```
+
+:::caution[Suppress CKV_AWS_68 when disabling WAF]
+Disabling WAF means the synthesized CloudFront distribution has no Web ACL associated, which fails the `checkov` security scan with `CKV_AWS_68: "CloudFront Distribution should have WAF enabled"` unless suppressed as shown above.
+:::
+</Fragment>
+<Fragment slot="terraform">
+To opt out, set `enable_waf` to `false`:
+
+```hcl title="packages/infra/src/main.tf" {7}
+module "my_website" {
+  source = "../../common/terraform/src/app/static-websites/my-website"
+
+  providers = {
+    aws.us_east_1 = aws.us_east_1
+  }
+  enable_waf = false
+}
+```
+</Fragment>
+</Infrastructure>
+
+### Bucket Encryption
+
+The website bucket, the CloudFront distribution log bucket, and the CloudWatch Logs group receiving their server access logs are encrypted with a customer-managed [AWS KMS](https://aws.amazon.com/kms/) key by default. This key is created for you automatically, with key rotation enabled.
+
+<Infrastructure>
+<Fragment slot="cdk">
+If you want to use a different encryption configuration, pass the `encryption`, `encryptionKey` and `enableKeyRotation` props when you create your website:
+
+```ts title="packages/infra/src/stacks/application-stack.ts" {11}
+import { Stack } from 'aws-cdk-lib';
+import { Construct } from 'constructs';
+import { BucketEncryption } from 'aws-cdk-lib/aws-s3';
+import { MyWebsite } from '@my-scope/common-constructs';
+
+export class ApplicationStack extends Stack {
+  constructor(scope: Construct, id: string) {
+    super(scope, id);
+
+    new MyWebsite(this, 'MyWebsite', {
+      encryption: BucketEncryption.S3_MANAGED,
+    });
+  }
+}
+```
+
+:::caution[Suppress CKV_AWS_158 when using S3_MANAGED]
+Choosing `BucketEncryption.S3_MANAGED` means the access log group is no longer KMS encrypted, which fails the `checkov` security scan with `CKV_AWS_158`. Suppress it:
+
+```ts title="packages/infra/src/stacks/application-stack.ts"
+import { LogGroup } from 'aws-cdk-lib/aws-logs';
+import { suppressRules } from '@my-scope/common-constructs';
+
+suppressRules(
+  website,
+  ['CKV_AWS_158'],
+  'Access log group is not KMS encrypted when encryption is S3_MANAGED',
+  (c) => c instanceof LogGroup,
+);
+```
+:::
+
+To use your own KMS key instead of one created automatically, pass `encryptionKey`:
+
+```ts {2}
+new MyWebsite(this, 'MyWebsite', {
+  encryptionKey: myKey,
+});
+```
+
+:::caution[Imported keys need their own permissions]
+A key imported via `Key.fromKeyArn` must already grant the CloudWatch Logs, S3 and CloudFront service principals the permissions they need in its own key policy. `addToResourcePolicy` is a no-op on an imported key, so this construct can't grant them for you, and `cdk synth` won't warn you - the failure only shows up at deploy time. A key created in the same app (`new Key(this, 'WebsiteKey')`) doesn't have this problem, since CDK can update its policy directly.
+:::
+
+`enableKeyRotation` (default `true`) only applies to the automatically created key, i.e. when `encryption` is `BucketEncryption.KMS` (the default) and no `encryptionKey` is supplied:
+
+```ts {2}
+new MyWebsite(this, 'MyWebsite', {
+  enableKeyRotation: false,
+});
+```
+
+:::caution[Suppress CKV_AWS_7 when disabling key rotation]
+Disabling key rotation on the automatically created key fails the `checkov` security scan with `CKV_AWS_7`. Suppress it:
+
+```ts title="packages/infra/src/stacks/application-stack.ts"
+import { Key } from 'aws-cdk-lib/aws-kms';
+import { suppressRules } from '@my-scope/common-constructs';
+
+suppressRules(
+  website,
+  ['CKV_AWS_7'],
+  'Key rotation is managed externally',
+  (c) => c instanceof Key,
+);
+```
+:::
+</Fragment>
+<Fragment slot="terraform">
+If you want to use a different encryption configuration, set the `encryption`, `kms_key_arn`, `create_kms_key` and `enable_key_rotation` variables:
+
+```hcl title="packages/infra/src/main.tf" {7}
+module "my_website" {
+  source = "../../common/terraform/src/app/static-websites/my-website"
+
+  providers = {
+    aws.us_east_1 = aws.us_east_1
+  }
+  encryption = "S3_MANAGED"
+}
+```
+
+:::caution[Checkov: S3_MANAGED]
+Choosing `S3_MANAGED` fails the `checkov` security scan with `CKV_AWS_145` on the website and distribution log buckets. The vended `test` target doesn't accept a `--config-file`, but `checkov` auto-discovers a `.checkov.yaml` in its working directory, so drop one in `packages/infra/src`:
+
+```yaml title="packages/infra/src/.checkov.yaml"
+skip-check:
+  - CKV_AWS_145
+```
+:::
+
+To use your own KMS key instead of one created automatically, pass `kms_key_arn` and set `create_kms_key` to `false`:
+
+```hcl title="packages/infra/src/main.tf" {7-8}
+module "my_website" {
+  source = "../../common/terraform/src/app/static-websites/my-website"
+
+  providers = {
+    aws.us_east_1 = aws.us_east_1
+  }
+  kms_key_arn    = aws_kms_key.website.arn
+  create_kms_key = false
+}
+```
+
+A customer-supplied key must already grant the CloudWatch Logs, S3 and CloudFront service principals the permissions they need in its own key policy.
+
+`enable_key_rotation` (default `true`) only applies to the automatically created key, i.e. when `encryption` is `"KMS"` (the default) and `create_kms_key` is `true`:
+
+```hcl title="packages/infra/src/main.tf" {7}
+module "my_website" {
+  source = "../../common/terraform/src/app/static-websites/my-website"
+
+  providers = {
+    aws.us_east_1 = aws.us_east_1
+  }
+  enable_key_rotation = false
+}
+```
+
+:::caution[Checkov: key rotation disabled]
+Disabling key rotation on the automatically created key fails the `checkov` security scan with `CKV_AWS_7`. Add it to the same `.checkov.yaml`:
+
+```yaml title="packages/infra/src/.checkov.yaml"
+skip-check:
+  - CKV_AWS_7
+```
+:::
+</Fragment>
+</Infrastructure>
+
+### Custom Domain & TLS
+
+By default the distribution uses the default CloudFront domain name (`*.cloudfront.net`) and its default certificate, which does not support enforcing a minimum TLS version of 1.2. To serve your website from your own domain, supply an [ACM certificate](https://docs.aws.amazon.com/acm/latest/userguide/acm-overview.html) (which must reside in `us-east-1` for use with CloudFront) and your domain names. A minimum TLS version of 1.2 is then enforced for viewers:
+
+<Infrastructure>
+<Fragment slot="cdk">
+Pass the `certificate` and `domainNames` props when you create your website:
+
+```ts title="packages/infra/src/stacks/application-stack.ts" {11-13}
+import { Stack } from 'aws-cdk-lib';
+import { Construct } from 'constructs';
+import { Certificate } from 'aws-cdk-lib/aws-certificatemanager';
+import { MyWebsite } from '@my-scope/common-constructs';
+
+export class ApplicationStack extends Stack {
+  constructor(scope: Construct, id: string) {
+    super(scope, id);
+
+    new MyWebsite(this, 'MyWebsite', {
+      domainNames: ['www.example.com'],
+      certificate: Certificate.fromCertificateArn(this, 'Cert',
+        'arn:aws:acm:us-east-1:123456789012:certificate/...'),
+    });
+  }
+}
+```
+</Fragment>
+<Fragment slot="terraform">
+Set the `custom_domain_names` and `acm_certificate_arn` variables:
+
+```hcl title="packages/infra/src/main.tf" {7-8}
+module "my_website" {
+  source = "../../common/terraform/src/app/static-websites/my-website"
+
+  providers = {
+    aws.us_east_1 = aws.us_east_1
+  }
+  custom_domain_names = ["www.example.com"]
+  acm_certificate_arn = "arn:aws:acm:us-east-1:123456789012:certificate/..."
+}
+```
+</Fragment>
+</Infrastructure>
+
+You will also need to create DNS records (for example in Route 53) pointing your domain at the CloudFront distribution.
+
 ## Runtime Configuration
 
-Configuration from your infrastructure is provided to your website via <Link href="guides/runtime-config">Runtime Configuration</Link>. This allows your website to access details such as API URLs which are not known until your application is deployed.
+Configuration from your infrastructure is provided to your website via <Link path="guides/runtime-config">Runtime Configuration</Link>. This allows your website to access details such as API URLs which are not known until your application is deployed.
 
 ### Infrastructure
 
 <Infrastructure>
 <Fragment slot="cdk">
-The `RuntimeConfig` CDK construct can be used to add and retrieve configuration in your CDK infrastructure. The CDK constructs generated by `@aws/nx-plugin` generators (such as <Link path="guides/trpc">`ts#trpc-api`</Link> and <Link path="guides/fastapi">`py#fast-api`</Link>) will automatically add appropriate values to the `RuntimeConfig`.
+The `RuntimeConfig` CDK construct can be used to add and retrieve configuration in your CDK infrastructure. The CDK constructs generated by `@aws/nx-plugin` generators (such as <Link path="guides/trpc">`ts#api`</Link> and <Link path="guides/fastapi">`py#api`</Link>) will automatically add appropriate values to the `RuntimeConfig`.
 
 Your website CDK construct will deploy the `connection` namespace of the runtime configuration as a `runtime-config.json` file to the root of your S3 bucket.
 
 ```ts title="packages/infra/src/stacks/application-stack.ts"
 import { Stack } from 'aws-cdk-lib';
 import { Construct } from 'constructs';
-import { MyWebsite, MyApi } from ':my-scope/common-constructs';
+import { MyWebsite, MyApi } from '@my-scope/common-constructs';
 
 export class ApplicationStack extends Stack {
   constructor(scope: Construct, id: string) {
     super(scope, id);
 
-    // Website can be declared at any point — runtime config is resolved lazily
+    // Website can be declared at any point, since runtime config is resolved lazily
     new MyWebsite(this, 'MyWebsite');
 
     // Automatically adds values to the RuntimeConfig
@@ -214,11 +532,11 @@ With CDK, the website construct can be declared at any point in your stack. Runt
 :::
 </Fragment>
 <Fragment slot="terraform">
-With Terraform, runtime configuration is managed through the runtime-config modules. The Terraform modules generated by `@aws/nx-plugin` generators (such as <Link path="guides/trpc">`ts#trpc-api`</Link> and <Link path="guides/fastapi">`py#fast-api`</Link>) will automatically add appropriate values to the runtime configuration.
+With Terraform, runtime configuration is managed through the runtime-config modules. The Terraform modules generated by `@aws/nx-plugin` generators (such as <Link path="guides/trpc">`ts#api`</Link> and <Link path="guides/fastapi">`py#api`</Link>) will automatically add appropriate values to the runtime configuration.
 
 Your website Terraform module will deploy the `connection` namespace of the runtime configuration as a `runtime-config.json` file to the root of your S3 bucket.
 
-```hcl title="packages/infra/src/main.tf" {18-19}
+```hcl title="packages/infra/src/main.tf" {20-21}
 module "asset_bucket" {
   source = "../../common/terraform/src/core/asset-bucket"
 }
@@ -272,26 +590,30 @@ For details on how runtime configuration is stored in AWS AppConfig and how serv
 
 When running the [local development server](#local-development-server), you will need a `runtime-config.json` file in your `public` directory in order for your local website to know the backend URLs, identity configuration, etc.
 
-Your website project is configured with a `load:runtime-config` target which you can use to pull down the `runtime-config.json` file from a deployed application:
+Your website project is configured with a `load-runtime-config` target which you can use to pull down the `runtime-config.json` file from a deployed application:
 
-<NxCommands commands={['run <my-website>:"load:runtime-config"']} />
+<NxCommands commands={['load-runtime-config <my-website>']} />
 
 :::note[Custom Stage Names]
 <Infrastructure>
 <Fragment slot="cdk">
-If you change the prefix for your stage names in your infrastructure project's `src/main.ts`, you will need to update the `load:runtime-config` target in your website's `project.json` file accordingly.
+If you change the prefix for your stage names in your infrastructure project's `src/main.ts`, you will need to update the `load-runtime-config` target in your website's `project.json` file accordingly.
 
-Additionally it's worth noting that the `load:runtime-config` target assumes a single stage of your application is deployed to the environment you have AWS credentials for. You will need to adjust the command if you deploy multiple stages to the same account and region.
+Additionally it's worth noting that the `load-runtime-config` target assumes a single stage of your application is deployed to the environment you have AWS credentials for. You will need to adjust the command if you deploy multiple stages to the same account and region.
 </Fragment>
 <Fragment slot="terraform">
-For Terraform projects, the `load:runtime-config` target copies the `runtime-config.json` file that was created after your most recent local `terraform apply`.
+For Terraform projects, the `load-runtime-config` target copies the `runtime-config.json` file that was created after your most recent local `terraform apply`.
 </Fragment>
 </Infrastructure>
 :::
 
 ## Local Development Server
 
-You can run a local development server using either the `serve` or `serve-local` target.
+The canonical command for local development is `dev`, which starts your website (and any local servers for APIs you've connected it to) with one command:
+
+<NxCommands commands={['dev <my-website>']} />
+
+The `serve` target is also available for when you need to control how much of your application runs locally versus pointing at deployed AWS infrastructure. For a broader overview of local development across connected projects, including how `dev` behaves for projects with multiple components, see the <Link path="guides/local-development">Local Development</Link> guide.
 
 ### Serve Target
 
@@ -303,46 +625,50 @@ You can run this target with the following command:
 
 This target is useful for working on website changes while pointing to "real" deployed APIs and other infrastructure.
 
-### Serve Local Target
+### Dev Target
 
-The `serve-local` target starts a local development server for your website (with [Vite `MODE`](https://vite.dev/guide/env-and-mode) set to `serve-local`), as well as starting any local servers for APIs you have connected your website to via the <Link path="/guides/connection">Connection generator</Link>.
+The `dev` target starts a local development server for your website (with [Vite `MODE`](https://vite.dev/guide/env-and-mode) set to `local-dev`), as well as starting any local servers for APIs you have connected your website to via the <Link path="/guides/connection">Connection generator</Link>.
 
 When your local website server is run via this target, `runtime-config.json` is automatically overridden to point to your locally running API urls.
 
 You can run this target with the following command:
 
-<NxCommands commands={['serve-local <my-website>']} />
+<NxCommands commands={['dev <my-website>']} />
 
 This target is useful when you are working across your website and API and wish to quickly iterate without deploying your infrastructure.
 
-:::note[`dev` script]
-If no `dev` script exists in your root `package.json` when this generator runs, a `dev` script is added that invokes `serve-local` for the generated website, meaning you can also start the local development server with:
+:::note[Workspace `dev` script]
+Your workspace's root `package.json` includes a `dev` script that runs the `dev` target for every project that has one:
 
 <PackageManagerShortCommand commands={["dev"]} />
 
-This makes the first React website you generate the default `dev` target for the workspace. Subsequent websites do not overwrite the existing `dev` script — you can invoke their `serve-local` targets directly, or update the script manually.
+This starts the local development server for your website (and any other projects with a `dev` target) in one command. To run just this website, use its own `dev` target (e.g. `nx dev <my-website>`).
 :::
 
 :::warning[Mock Authentication]
 When run in this mode and no `runtime-config.json` is present, if you have configured Cognito Authentication (via the <Link path="/guides/react-website-auth">`ts#website#auth` generator</Link>), login will be skipped and requests to your local servers will not include authentication headers.
 
-To enable login and authentication for `serve-local`, deploy your infrastructure and load runtime config.
+To enable login and authentication for `dev`, deploy your infrastructure and load runtime config.
 :::
 
-:::tip[Serve-Local Behavior]
-When running with `serve-local`, you can specify any environment variables required by your APIs to point to other deployed AWS resources, for example:
+:::tip[Dev Behavior]
+When running with `dev`, you can specify any environment variables required by your APIs to point to other deployed AWS resources, for example:
 
-<NxCommands env={{DYNAMODB_TABLE_NAME: 'xxxxx'}} commands={['serve-local <my-website>']} />
+<NxCommands env={{DYNAMODB_TABLE_NAME: 'xxxxx'}} commands={['dev <my-website>']} />
 
 Note that your local API servers will run with the AWS credentials you have configured locally.
 :::
 
 ## Building
 
-You can build your website using the `build` target. This use Vite to create a production bundle in the root `dist/packages/<my-website>/bundle` directory, as well as type-checking, compiling and linting your website.
+You can build your website using the `build` target. This runs the `bundle`, `compile`, `test` and `lint` targets, type-checking, bundling, testing and linting your website.
 
 <NxCommands commands={['build <my-website>']} />
 
+The `bundle` target uses Vite to create a production bundle in the root `dist/packages/<my-website>/bundle` directory. This is the deployable artifact consumed by your website infrastructure. You can run it on its own:
+
+<NxCommands commands={['bundle <my-website>']} />
+
 ## Testing
 
 Testing your website is much like writing tests in a standard TypeScript project, so please refer to the <Link path="guides/typescript-project#testing">TypeScript project guide</Link> for more details.
@@ -353,72 +679,60 @@ You can run your tests using the `test` target:
 
 <NxCommands commands={['test <my-website>']} />
 
-## Deploying Your Website
-
-The React website generator creates CDK or Terraform infrastructure as code based on your selected `iacProvider`. You can use this to deploy your website.
-
-<Infrastructure>
-<Fragment slot="cdk">
-To deploy your website, we recommend using the <Link path="guides/typescript-infrastructure">`ts#infra` generator</Link> to create a CDK application.
-
-You can use the CDK construct generated for you in `packages/common/constructs` to deploy your website.
-
-```ts title="packages/infra/src/stacks/application-stack.ts" {3, 9}
-import { Stack } from 'aws-cdk-lib';
-import { Construct } from 'constructs';
-import { MyWebsite } from ':my-scope/common-constructs';
-
-export class ApplicationStack extends Stack {
-  constructor(scope: Construct, id: string) {
-    super(scope, id);
-
-    new MyWebsite(this, 'MyWebsite');
-  }
-}
-```
-
-This sets up:
-
-1. An S3 bucket for hosting your static website files
-2. CloudFront distribution for global content delivery
-3. WAF Web ACL for security protection
-4. Origin Access Control for secure S3 access
-5. Automatic deployment of website files and runtime configuration
-</Fragment>
-<Fragment slot="terraform">
-To deploy your website, we recommend using the <Link path="guides/terraform-infrastructure">`terraform#project` generator</Link> to create a Terraform project.
-
-You can use the Terraform module generated for you in `packages/common/terraform` to deploy your website.
-
-```hcl title="packages/infra/src/main.tf" {3}
-# Deploy website
-module "my_website" {
-  source = "../../common/terraform/src/app/static-websites/my-website"
-
-  providers = {
-    aws.us_east_1 = aws.us_east_1
-  }
-}
-```
-
-This sets up:
-
-1. An S3 bucket for hosting your static website files
-2. CloudFront distribution for global content delivery
-3. WAF Web ACL for security protection (deployed in us-east-1)
-4. Origin Access Control for secure S3 access
-5. Automatic deployment of website files and runtime configuration
-
-:::note[WAF Provider Region]
-The `aws.us_east_1` provider is required for CloudFront and WAF resources, which must be deployed in the us-east-1 region. Make sure your Terraform configuration includes this provider:
-
-```hcl title="packages/infra/src/providers.tf"
-provider "aws" {
-  alias  = "us_east_1"
-  region = "us-east-1"
-}
-```
-:::
-</Fragment>
-</Infrastructure>
-
+## Connections
+
+Use the <Link path="guides/connection">`connection`</Link> generator to integrate this project with others in your workspace. The following connections involve this project:
+
+<CardGrid>
+  <ConnectionCard
+    title="React to tRPC"
+    description="Call a tRPC API from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-trpc`}
+    source="react"
+    target="trpc"
+  />
+  <ConnectionCard
+    title="React to FastAPI"
+    description="Call a Python FastAPI from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-fastapi`}
+    source="react"
+    target="fastapi"
+  />
+  <ConnectionCard
+    title="React to Smithy API"
+    description="Call a Smithy API from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-smithy`}
+    source="react"
+    target="smithy"
+  />
+  <ConnectionCard
+    title="React to Python Agent"
+    description="Call a Python Agent from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-py-agent`}
+    source="react"
+    target="strands"
+    targetBadge="python"
+  />
+  <ConnectionCard
+    title="React to TypeScript Agent"
+    description="Call a TypeScript Agent from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-ts-agent`}
+    source="react"
+    target="strands"
+    targetBadge="typescript"
+  />
+  <ConnectionCard
+    title="React to AG-UI Agent"
+    description="Call an Agent exposing the AG-UI protocol from a React website via CopilotKit"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-agui`}
+    source="react"
+    target="copilotkit"
+  />
+  <ConnectionCard
+    title="React Website to AgentCore Gateway"
+    description="Connect a React website to agents through an AgentCore Gateway"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-agentcore-gateway`}
+    source="react"
+    target="agentcore"
+  />
+</CardGrid>