@aws/nx-plugin 0.0.0

package/src/cloudscape-website/app/__snapshots__/generator.spec.ts.snap

@@ -0,0 +1,539 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`cloudscape-website generator > should configure TypeScript correctly > tsconfig.json 1`] = `
+{
+  "compilerOptions": {
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": false,
+    "jsx": "react-jsx",
+    "module": "Preserve",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "types": [
+      "vite/client",
+      "vitest",
+    ],
+  },
+  "extends": "../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json",
+    },
+    {
+      "path": "./tsconfig.spec.json",
+    },
+  ],
+}
+`;
+
+exports[`cloudscape-website generator > should configure vite correctly > vite.config.ts 1`] = `
+"/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+export default defineConfig({
+  define: {
+    global: {},
+  },
+  root: __dirname,
+  cacheDir: '../node_modules/.vite/test-app',
+  server: {
+    port: 4200,
+    host: 'localhost',
+  },
+  preview: {
+    port: 4300,
+    host: 'localhost',
+  },
+  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  build: {
+    outDir: '../dist/test-app',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../coverage/test-app',
+      provider: 'v8',
+    },
+    passWithNoTests: true,
+  },
+});
+"
+`;
+
+exports[`cloudscape-website generator > should generate base files and structure > app-layout.tsx 1`] = `
+"/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0 */
+import { useCognitoAuthContext } from '@aws-northstar/ui';
+import getBreadcrumbs from '@aws-northstar/ui/components/AppLayout/utils/getBreadcrumbs';
+import NavHeader from '@aws-northstar/ui/components/AppLayout/components/NavHeader';
+import * as React from 'react';
+import { createContext, useCallback, useEffect, useState } from 'react';
+import { NavItems } from './navitems';
+import Config from '../../config';
+import Routes from '../Routes';
+
+import {
+  BreadcrumbGroup,
+  BreadcrumbGroupProps,
+  SideNavigation,
+} from '@cloudscape-design/components';
+import AppLayout, {
+  AppLayoutProps,
+} from '@cloudscape-design/components/app-layout';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+/**
+ * Context for updating/retrieving the AppLayout.
+ */
+export const AppLayoutContext = createContext({
+  appLayoutProps: {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setAppLayoutProps: (_: AppLayoutProps) => {},
+});
+
+/**
+ * Defines the App layout and contains logic for routing.
+ */
+const App: React.FC = () => {
+  const [username, setUsername] = useState<string | undefined>();
+  const [email, setEmail] = useState<string | undefined>();
+  const { getAuthenticatedUser } = useCognitoAuthContext();
+
+  const navigate = useNavigate();
+  const [activeHref, setActiveHref] = useState('/');
+  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
+    BreadcrumbGroupProps.Item[]
+  >([{ text: '/', href: '/' }]);
+  const [appLayoutProps, setAppLayoutProps] = useState<AppLayoutProps>({});
+  const location = useLocation();
+
+  useEffect(() => {
+    const authUser = getAuthenticatedUser();
+    setUsername(authUser?.getUsername());
+
+    authUser?.getSession(() => {
+      authUser.getUserAttributes((_, attributes) => {
+        setEmail(attributes?.find((a) => a.Name === 'email')?.Value);
+      });
+    });
+  }, [getAuthenticatedUser, setUsername, setEmail]);
+
+  const setAppLayoutPropsSafe = useCallback(
+    (props: AppLayoutProps) => {
+      JSON.stringify(appLayoutProps) !== JSON.stringify(props) &&
+        setAppLayoutProps(props);
+    },
+    [appLayoutProps]
+  );
+
+  useEffect(() => {
+    setActiveHref(location.pathname);
+    const breadcrumbs = getBreadcrumbs(location.pathname, location.search, '/');
+    setActiveBreadcrumbs(breadcrumbs);
+  }, [location]);
+
+  const onNavigate = useCallback(
+    (e: CustomEvent<{ href: string; external?: boolean }>) => {
+      if (!e.detail.external) {
+        e.preventDefault();
+        setAppLayoutPropsSafe({
+          contentType: undefined,
+          splitPanelOpen: false,
+          splitPanelSize: undefined,
+          splitPanelPreferences: undefined,
+        });
+        navigate(e.detail.href);
+      }
+    },
+    [navigate, setAppLayoutPropsSafe]
+  );
+
+  return (
+    <AppLayoutContext.Provider
+      value={{ appLayoutProps, setAppLayoutProps: setAppLayoutPropsSafe }}
+    >
+      <NavHeader
+        title={Config.applicationName}
+        logo={Config.logo}
+        user={
+          username
+            ? {
+                username,
+                email,
+              }
+            : undefined
+        }
+        onSignout={() =>
+          new Promise(() => {
+            getAuthenticatedUser()?.signOut();
+            window.location.href = '/';
+          })
+        }
+      />
+      <AppLayout
+        breadcrumbs={
+          <BreadcrumbGroup onFollow={onNavigate} items={activeBreadcrumbs} />
+        }
+        toolsHide
+        navigation={
+          <SideNavigation
+            header={{ text: Config.applicationName, href: '/' }}
+            activeHref={activeHref}
+            onFollow={onNavigate}
+            items={NavItems}
+          />
+        }
+        content={<Routes />}
+        splitPanelOpen={false}
+        splitPanelPreferences={{ position: 'bottom' }}
+        {...appLayoutProps}
+      />
+    </AppLayoutContext.Provider>
+  );
+};
+
+export default App;
+"
+`;
+
+exports[`cloudscape-website generator > should generate base files and structure > config.ts 1`] = `
+"export default {
+  applicationName: 'test-app',
+  logo: 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjMjQ4YmFlIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZT0iIzI0OGJhZSI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+Cg08dGl0bGU+aW9uaWNvbnMtdjVfbG9nb3M8L3RpdGxlPgoNPHBhdGggZD0iTTQxMC42NiwxODAuNzJoMHEtNy42Ny0yLjYyLTE1LjQ1LTQuODgsMS4yOS01LjI1LDIuMzgtMTAuNTZjMTEuNy01Ni45LDQuMDUtMTAyLjc0LTIyLjA2LTExNy44My0yNS0xNC40OC02NiwuNjEtMTA3LjM2LDM2LjY5cS02LjEsNS4zNC0xMS45NSwxMS0zLjktMy43Ni04LTcuMzZjLTQzLjM1LTM4LjU4LTg2LjgtNTQuODMtMTEyLjg4LTM5LjY5LTI1LDE0LjUxLTMyLjQzLDU3LjYtMjEuOSwxMTEuNTNxMS41OCw4LDMuNTUsMTUuOTNjLTYuMTUsMS43NS0xMi4wOSwzLjYyLTE3Ljc3LDUuNkM0OC40NiwxOTguOSwxNiwyMjYuNzMsMTYsMjU1LjU5YzAsMjkuODIsMzQuODQsNTkuNzIsODcuNzcsNzcuODVxNi40NCwyLjE5LDEzLDQuMDdRMTE0LjY0LDM0NiwxMTMsMzU0LjY4Yy0xMCw1My0yLjIsOTUuMDcsMjIuNzUsMTA5LjQ5LDI1Ljc3LDE0Ljg5LDY5LS40MSwxMTEuMTQtMzcuMzFxNS00LjM4LDEwLTkuMjUsNi4zMiw2LjExLDEzLDExLjg2YzQwLjgsMzUuMTgsODEuMDksNDkuMzksMTA2LDM0LjkzLDI1Ljc1LTE0Ljk0LDM0LjEyLTYwLjE0LDIzLjI1LTExNS4xM3EtMS4yNS02LjMtMi44OC0xMi44Niw0LjU2LTEuMzUsOC45My0yLjc5YzU1LTE4LjI3LDkwLjgzLTQ3LjgxLDkwLjgzLTc4QzQ5NiwyMjYuNjIsNDYyLjUsMTk4LjYxLDQxMC42NiwxODAuNzJabS0xMjktODEuMDhjMzUuNDMtMzAuOTEsNjguNTUtNDMuMTEsODMuNjUtMzQuMzloMGMxNi4wNyw5LjI5LDIyLjMyLDQ2Ljc1LDEyLjIyLDk1Ljg4cS0xLDQuOC0yLjE2LDkuNTdhNDg3LjgzLDQ4Ny44MywwLDAsMC02NC4xOC0xMC4xNiw0ODEuMjcsNDgxLjI3LDAsMCwwLTQwLjU3LTUwLjc1UTI3NiwxMDQuNTcsMjgxLjY0LDk5LjY0Wk0xNTcuNzMsMjgwLjI1cTYuNTEsMTIuNiwxMy42MSwyNC44OSw3LjIzLDEyLjU0LDE1LjA3LDI0LjcxYTQzNS4yOCw0MzUuMjgsMCwwLDEtNDQuMjQtNy4xM0MxNDYuNDEsMzA5LDE1MS42MywyOTQuNzUsMTU3LjczLDI4MC4yNVptMC00OC4zM2MtNi0xNC4xOS0xMS4wOC0yOC4xNS0xNS4yNS00MS42MywxMy43LTMuMDcsMjguMy01LjU4LDQzLjUyLTcuNDhxLTcuNjUsMTEuOTQtMTQuNzIsMjQuMjNUMTU3LjcsMjMxLjkyWm0xMC45LDI0LjE3cTkuNDgtMTkuNzcsMjAuNDItMzguNzhoMHExMC45My0xOSwyMy4yNy0zNy4xM2MxNC4yOC0xLjA4LDI4LjkyLTEuNjUsNDMuNzEtMS42NXMyOS41Mi41Nyw0My43OSwxLjY2cTEyLjIxLDE4LjA5LDIzLjEzLDM3dDIwLjY5LDM4LjZRMzM0LDI3NS42MywzMjMsMjk0LjczaDBxLTEwLjkxLDE5LTIzLDM3LjI0Yy0xNC4yNSwxLTI5LDEuNTUtNDQsMS41NXMtMjkuNDctLjQ3LTQzLjQ2LTEuMzhxLTEyLjQzLTE4LjE5LTIzLjQ2LTM3LjI5VDE2OC42LDI1Ni4wOVpNMzQwLjc1LDMwNXE3LjI1LTEyLjU4LDEzLjkyLTI1LjQ5aDBhNDQwLjQxLDQ0MC40MSwwLDAsMSwxNi4xMiw0Mi4zMkE0MzQuNDQsNDM0LjQ0LDAsMCwxLDMyNiwzMjkuNDhRMzMzLjYyLDMxNy4zOSwzNDAuNzUsMzA1Wm0xMy43Mi03My4wN3EtNi42NC0xMi42NS0xMy44MS0yNWgwcS03LTEyLjE4LTE0LjU5LTI0LjA2YzE1LjMxLDEuOTQsMzAsNC41Miw0My43Nyw3LjY3QTQzOS44OSw0MzkuODksMCwwLDEsMzU0LjQ3LDIzMS45M1pNMjU2LjIzLDEyNC40OGgwYTQzOS43NSw0MzkuNzUsMCwwLDEsMjguMjUsMzQuMThxLTI4LjM1LTEuMzUtNTYuNzQsMEMyMzcuMDcsMTQ2LjMyLDI0Ni42MiwxMzQuODcsMjU2LjIzLDEyNC40OFpNMTQ1LjY2LDY1Ljg2YzE2LjA2LTkuMzIsNTEuNTcsNCw4OSwzNy4yNywyLjM5LDIuMTMsNC44LDQuMzYsNy4yLDYuNjdBNDkxLjM3LDQ5MS4zNywwLDAsMCwyMDEsMTYwLjUxYTQ5OS4xMiw0OTkuMTIsMCwwLDAtNjQuMDYsMTBxLTEuODMtNy4zNi0zLjMtMTQuODJoMEMxMjQuNTksMTA5LjQ2LDEzMC41OCw3NC42MSwxNDUuNjYsNjUuODZaTTEyMi4yNSwzMTcuNzFxLTYtMS43MS0xMS44NS0zLjcxYy0yMy40LTgtNDIuNzMtMTguNDQtNTYtMjkuODFDNDIuNTIsMjc0LDM2LjUsMjYzLjgzLDM2LjUsMjU1LjU5YzAtMTcuNTEsMjYuMDYtMzkuODUsNjkuNTItNTVxOC4xOS0yLjg1LDE2LjUyLTUuMjFhNDkzLjU0LDQ5My41NCwwLDAsMCwyMy40LDYwLjc1QTUwMi40Niw1MDIuNDYsMCwwLDAsMTIyLjI1LDMxNy43MVptMTExLjEzLDkzLjY3Yy0xOC42MywxNi4zMi0zNy4yOSwyNy44OS01My43NCwzMy43MmgwYy0xNC43OCw1LjIzLTI2LjU1LDUuMzgtMzMuNjYsMS4yNy0xNS4xNC04Ljc1LTIxLjQ0LTQyLjU0LTEyLjg1LTg3Ljg2cTEuNTMtOCwzLjUtMTZhNDgwLjg1LDQ4MC44NSwwLDAsMCw2NC42OSw5LjM5LDUwMS4yLDUwMS4yLDAsMCwwLDQxLjIsNTFDMjM5LjU0LDQwNS44MywyMzYuNDksNDA4LjY1LDIzMy4zOCw0MTEuMzhabTIzLjQyLTIzLjIyYy05LjcyLTEwLjUxLTE5LjQyLTIyLjE0LTI4Ljg4LTM0LjY0cTEzLjc5LjU0LDI4LjA4LjU0YzkuNzgsMCwxOS40Ni0uMjEsMjktLjY0QTQzOS4zMyw0MzkuMzMsMCwwLDEsMjU2LjgsMzg4LjE2Wm0xMjQuNTIsMjguNTljLTIuODYsMTUuNDQtOC42MSwyNS43NC0xNS43MiwyOS44Ni0xNS4xMyw4Ljc4LTQ3LjQ4LTIuNjMtODIuMzYtMzIuNzItNC0zLjQ0LTgtNy4xMy0xMi4wNy0xMWE0ODQuNTQsNDg0LjU0LDAsMCwwLDQwLjIzLTUxLjIsNDc3Ljg0LDQ3Ny44NCwwLDAsMCw2NS0xMC4wNXExLjQ3LDUuOTQsMi42LDExLjY0aDBDMzgzLjgxLDM3Ny41OCwzODQuNSwzOTkuNTYsMzgxLjMyLDQxNi43NVptMTcuNC0xMDIuNjRoMGMtMi42Mi44Ny01LjMyLDEuNzEtOC4wNiwyLjUzYTQ4My4yNiw0ODMuMjYsMCwwLDAtMjQuMzEtNjAuOTQsNDgxLjUyLDQ4MS41MiwwLDAsMCwyMy4zNi02MC4wNmM0LjkxLDEuNDMsOS42OCwyLjkzLDE0LjI3LDQuNTIsNDQuNDIsMTUuMzIsNzEuNTIsMzgsNzEuNTIsNTUuNDNDNDc1LjUsMjc0LjE5LDQ0Ni4yMywyOTguMzMsMzk4LjcyLDMxNC4xMVoiLz4KDTxwYXRoIGQ9Ik0yNTYsMjk4LjU1YTQzLDQzLDAsMSwwLTQyLjg2LTQzQTQyLjkxLDQyLjkxLDAsMCwwLDI1NiwyOTguNTVaIi8+Cg08L2c+Cg08L3N2Zz4=',
+};
+"
+`;
+
+exports[`cloudscape-website generator > should generate base files and structure > main.tsx 1`] = `
+"/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0 */
+import { NorthStarThemeProvider } from '@aws-northstar/ui';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nProvider } from '@cloudscape-design/components/i18n';
+import messages from '@cloudscape-design/components/i18n/messages/all.en';
+import App from './layouts/App';
+
+const root = document.getElementById('root');
+root &&
+  createRoot(root).render(
+    <React.StrictMode>
+      <NorthStarThemeProvider>
+        <I18nProvider locale="en" messages={[messages]}>
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </I18nProvider>
+      </NorthStarThemeProvider>
+    </React.StrictMode>
+  );
+"
+`;
+
+exports[`cloudscape-website generator > should generate shared constructs > common/constructs-index.ts 1`] = `
+"/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0 */
+export * from './cloudfront-web-acl.js';
+export * from './static-website.js';
+"
+`;
+
+exports[`cloudscape-website generator > should generate shared constructs > static-website.ts 1`] = `
+"/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0 */
+import * as url from 'url';
+import { PDKNag } from '@aws/pdk/pdk-nag';
+import { CfnOutput, RemovalPolicy, Stack } from 'aws-cdk-lib';
+import { Distribution, ViewerProtocolPolicy } from 'aws-cdk-lib/aws-cloudfront';
+import { S3BucketOrigin } from 'aws-cdk-lib/aws-cloudfront-origins';
+import {
+  BlockPublicAccess,
+  Bucket,
+  BucketEncryption,
+  IBucket,
+  ObjectOwnership,
+} from 'aws-cdk-lib/aws-s3';
+import { BucketDeployment, Source } from 'aws-cdk-lib/aws-s3-deployment';
+import { NagSuppressions } from 'cdk-nag';
+import { Construct } from 'constructs';
+import { CloudfrontWebAcl } from './cloudfront-web-acl.js';
+import { RuntimeConfig } from '../runtime-config/index.js';
+
+const DEFAULT_RUNTIME_CONFIG_FILENAME = 'runtime-config.json';
+
+/**
+ * Deploys a Static Website using by default a private S3 bucket as an origin and Cloudfront as the entrypoint.
+ *
+ * This construct configures a webAcl containing rules that are generally applicable to web applications. This
+ * provides protection against exploitation of a wide range of vulnerabilities, including some of the high risk
+ * and commonly occurring vulnerabilities described in OWASP publications such as OWASP Top 10.
+ *
+ */
+export class StaticWebsite extends Construct {
+  public readonly websiteBucket: IBucket;
+  public readonly cloudFrontDistribution: Distribution;
+  public readonly bucketDeployment: BucketDeployment;
+
+  constructor(scope: Construct, id: string) {
+    super(scope, id);
+
+    this.node.setContext(
+      '@aws-cdk/aws-s3:serverAccessLogsUseBucketPolicy',
+      true
+    );
+
+    const accessLogsBucket = new Bucket(this, 'AccessLogsBucket', {
+      versioned: false,
+      enforceSSL: true,
+      autoDeleteObjects: true,
+      removalPolicy: RemovalPolicy.DESTROY,
+      encryption: BucketEncryption.S3_MANAGED,
+      objectOwnership: ObjectOwnership.OBJECT_WRITER,
+      publicReadAccess: false,
+      blockPublicAccess: BlockPublicAccess.BLOCK_ALL,
+    });
+
+    // S3 Bucket to hold website files
+    this.websiteBucket = new Bucket(this, 'WebsiteBucket', {
+      versioned: true,
+      enforceSSL: true,
+      autoDeleteObjects: true,
+      removalPolicy: RemovalPolicy.DESTROY,
+      encryption: BucketEncryption.S3_MANAGED,
+      objectOwnership: ObjectOwnership.BUCKET_OWNER_ENFORCED,
+      publicReadAccess: false,
+      blockPublicAccess: BlockPublicAccess.BLOCK_ALL,
+      serverAccessLogsPrefix: 'website-access-logs',
+      serverAccessLogsBucket: accessLogsBucket,
+    });
+
+    // Web ACL
+    const webAclArn = new CloudfrontWebAcl(this, 'WebsiteAcl').webAclArn;
+
+    // Cloudfront Distribution
+    const logBucket = new Bucket(this, 'DistributionLogBucket', {
+      enforceSSL: true,
+      autoDeleteObjects: true,
+      removalPolicy: RemovalPolicy.DESTROY,
+      encryption: BucketEncryption.S3_MANAGED,
+      objectOwnership: ObjectOwnership.BUCKET_OWNER_PREFERRED,
+      publicReadAccess: false,
+      blockPublicAccess: BlockPublicAccess.BLOCK_ALL,
+      serverAccessLogsPrefix: 'distribution-access-logs',
+      serverAccessLogsBucket: accessLogsBucket,
+    });
+
+    const defaultRootObject = 'index.html';
+    this.cloudFrontDistribution = new Distribution(
+      this,
+      'CloudfrontDistribution',
+      {
+        webAclId: webAclArn,
+        enableLogging: true,
+        logBucket: logBucket,
+        defaultBehavior: {
+          origin: S3BucketOrigin.withOriginAccessControl(this.websiteBucket),
+          viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
+        },
+        defaultRootObject,
+        errorResponses: [
+          {
+            httpStatus: 404, // We need to redirect "key not found errors" to index.html for single page apps
+            responseHttpStatus: 200,
+            responsePagePath: \`/\${defaultRootObject}\`,
+          },
+        ],
+      }
+    );
+
+    // Deploy Website
+    const runtimeConfig = RuntimeConfig.ensure(this).config;
+    this.bucketDeployment = new BucketDeployment(this, 'WebsiteDeployment', {
+      sources: [
+        Source.asset(
+          url.fileURLToPath(
+            new URL('../../../../../dist/test-app', import.meta.url)
+          )
+        ),
+        ...(Object.keys(runtimeConfig).length > 0
+          ? [Source.jsonData(DEFAULT_RUNTIME_CONFIG_FILENAME, runtimeConfig)]
+          : []),
+      ],
+      destinationBucket: this.websiteBucket,
+      // Files in the distribution's edge caches will be invalidated after files are uploaded to the destination bucket.
+      distribution: this.cloudFrontDistribution,
+    });
+
+    new CfnOutput(this, 'DistributionDomainName', {
+      value: this.cloudFrontDistribution.domainName,
+    });
+
+    this.suppressCDKNagViolations();
+  }
+
+  private suppressCDKNagViolations = () => {
+    const stack = Stack.of(this);
+
+    NagSuppressions.addResourceSuppressions(
+      this,
+      [
+        {
+          id: 'AwsPrototyping-CloudFrontDistributionGeoRestrictions',
+          reason:
+            'Suppressed to allow unrestricted access. Not recommended in production.',
+        },
+      ],
+      true
+    );
+
+    [
+      'AwsSolutions-CFR4',
+      'AwsPrototyping-CloudFrontDistributionHttpsViewerNoOutdatedSSL',
+    ].forEach((RuleId) => {
+      NagSuppressions.addResourceSuppressions(this.cloudFrontDistribution, [
+        {
+          id: RuleId,
+          reason:
+            'Certificate is not mandatory therefore the Cloudfront certificate will be used.',
+        },
+      ]);
+    });
+
+    ['AwsSolutions-L1', 'AwsPrototyping-LambdaLatestVersion'].forEach(
+      (RuleId) => {
+        NagSuppressions.addResourceSuppressions(
+          this,
+          [
+            {
+              id: RuleId,
+              reason:
+                'Latest runtime cannot be configured. CDK will need to upgrade the BucketDeployment construct accordingly.',
+            },
+          ],
+          true
+        );
+      }
+    );
+
+    ['AwsSolutions-IAM5', 'AwsPrototyping-IAMNoWildcardPermissions'].forEach(
+      (RuleId) => {
+        NagSuppressions.addResourceSuppressions(
+          this,
+          [
+            {
+              id: RuleId,
+              reason:
+                'All Policies have been scoped to a Bucket. Given Buckets can contain arbitrary content, wildcard resources with bucket scope are required.',
+              appliesTo: [
+                {
+                  regex: '/^Action::s3:.*$/g',
+                },
+                {
+                  regex: \`/^Resource::.*$/g\`,
+                },
+              ],
+            },
+          ],
+          true
+        );
+      }
+    );
+
+    ['AwsSolutions-IAM4', 'AwsPrototyping-IAMNoManagedPolicies'].forEach(
+      (RuleId) => {
+        NagSuppressions.addResourceSuppressions(
+          this,
+          [
+            {
+              id: RuleId,
+              reason:
+                'Buckets can contain arbitrary content, therefore wildcard resources under a bucket are required.',
+              appliesTo: [
+                {
+                  regex: \`/^Policy::arn:\${PDKNag.getStackPartitionRegex(
+                    stack
+                  )}:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole$/g\`,
+                },
+              ],
+            },
+          ],
+          true
+        );
+      }
+    );
+
+    ['AwsSolutions-S1', 'AwsPrototyping-S3BucketLoggingEnabled'].forEach(
+      (RuleId) => {
+        NagSuppressions.addResourceSuppressions(
+          this,
+          [
+            {
+              id: RuleId,
+              reason: 'Access Log buckets should not have s3 bucket logging',
+            },
+          ],
+          true
+        );
+      }
+    );
+  };
+}
+"
+`;
+
+exports[`cloudscape-website generator > should handle custom directory option > custom-dir-main.tsx 1`] = `
+"/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0 */
+import { NorthStarThemeProvider } from '@aws-northstar/ui';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nProvider } from '@cloudscape-design/components/i18n';
+import messages from '@cloudscape-design/components/i18n/messages/all.en';
+import App from './layouts/App';
+
+const root = document.getElementById('root');
+root &&
+  createRoot(root).render(
+    <React.StrictMode>
+      <NorthStarThemeProvider>
+        <I18nProvider locale="en" messages={[messages]}>
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </I18nProvider>
+      </NorthStarThemeProvider>
+    </React.StrictMode>
+  );
+"
+`;
+
+exports[`cloudscape-website generator > should handle npm scope prefix correctly > scoped-dependencies 1`] = `
+{
+  "@aws-northstar/ui": "^1.1.13",
+  "@aws/pdk": "^0.25.7",
+  "@cloudscape-design/board-components": "^3.0.84",
+  "@cloudscape-design/components": "^3.0.823",
+  "aws-cdk-lib": "^2.166.0",
+  "cdk-nag": "^2.32.2",
+  "constructs": "^10.4.2",
+  "react": "18.3.1",
+  "react-dom": "18.3.1",
+  "react-router-dom": "^6.28.0",
+}
+`;

package/src/cloudscape-website/app/files/app/src/config.ts.template

@@ -0,0 +1,4 @@
+export default {
+  "applicationName": "<%= name %>",
+  "logo": "data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjMjQ4YmFlIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZT0iIzI0OGJhZSI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+Cg08dGl0bGU+aW9uaWNvbnMtdjVfbG9nb3M8L3RpdGxlPgoNPHBhdGggZD0iTTQxMC42NiwxODAuNzJoMHEtNy42Ny0yLjYyLTE1LjQ1LTQuODgsMS4yOS01LjI1LDIuMzgtMTAuNTZjMTEuNy01Ni45LDQuMDUtMTAyLjc0LTIyLjA2LTExNy44My0yNS0xNC40OC02NiwuNjEtMTA3LjM2LDM2LjY5cS02LjEsNS4zNC0xMS45NSwxMS0zLjktMy43Ni04LTcuMzZjLTQzLjM1LTM4LjU4LTg2LjgtNTQuODMtMTEyLjg4LTM5LjY5LTI1LDE0LjUxLTMyLjQzLDU3LjYtMjEuOSwxMTEuNTNxMS41OCw4LDMuNTUsMTUuOTNjLTYuMTUsMS43NS0xMi4wOSwzLjYyLTE3Ljc3LDUuNkM0OC40NiwxOTguOSwxNiwyMjYuNzMsMTYsMjU1LjU5YzAsMjkuODIsMzQuODQsNTkuNzIsODcuNzcsNzcuODVxNi40NCwyLjE5LDEzLDQuMDdRMTE0LjY0LDM0NiwxMTMsMzU0LjY4Yy0xMCw1My0yLjIsOTUuMDcsMjIuNzUsMTA5LjQ5LDI1Ljc3LDE0Ljg5LDY5LS40MSwxMTEuMTQtMzcuMzFxNS00LjM4LDEwLTkuMjUsNi4zMiw2LjExLDEzLDExLjg2YzQwLjgsMzUuMTgsODEuMDksNDkuMzksMTA2LDM0LjkzLDI1Ljc1LTE0Ljk0LDM0LjEyLTYwLjE0LDIzLjI1LTExNS4xM3EtMS4yNS02LjMtMi44OC0xMi44Niw0LjU2LTEuMzUsOC45My0yLjc5YzU1LTE4LjI3LDkwLjgzLTQ3LjgxLDkwLjgzLTc4QzQ5NiwyMjYuNjIsNDYyLjUsMTk4LjYxLDQxMC42NiwxODAuNzJabS0xMjktODEuMDhjMzUuNDMtMzAuOTEsNjguNTUtNDMuMTEsODMuNjUtMzQuMzloMGMxNi4wNyw5LjI5LDIyLjMyLDQ2Ljc1LDEyLjIyLDk1Ljg4cS0xLDQuOC0yLjE2LDkuNTdhNDg3LjgzLDQ4Ny44MywwLDAsMC02NC4xOC0xMC4xNiw0ODEuMjcsNDgxLjI3LDAsMCwwLTQwLjU3LTUwLjc1UTI3NiwxMDQuNTcsMjgxLjY0LDk5LjY0Wk0xNTcuNzMsMjgwLjI1cTYuNTEsMTIuNiwxMy42MSwyNC44OSw3LjIzLDEyLjU0LDE1LjA3LDI0LjcxYTQzNS4yOCw0MzUuMjgsMCwwLDEtNDQuMjQtNy4xM0MxNDYuNDEsMzA5LDE1MS42MywyOTQuNzUsMTU3LjczLDI4MC4yNVptMC00OC4zM2MtNi0xNC4xOS0xMS4wOC0yOC4xNS0xNS4yNS00MS42MywxMy43LTMuMDcsMjguMy01LjU4LDQzLjUyLTcuNDhxLTcuNjUsMTEuOTQtMTQuNzIsMjQuMjNUMTU3LjcsMjMxLjkyWm0xMC45LDI0LjE3cTkuNDgtMTkuNzcsMjAuNDItMzguNzhoMHExMC45My0xOSwyMy4yNy0zNy4xM2MxNC4yOC0xLjA4LDI4LjkyLTEuNjUsNDMuNzEtMS42NXMyOS41Mi41Nyw0My43OSwxLjY2cTEyLjIxLDE4LjA5LDIzLjEzLDM3dDIwLjY5LDM4LjZRMzM0LDI3NS42MywzMjMsMjk0LjczaDBxLTEwLjkxLDE5LTIzLDM3LjI0Yy0xNC4yNSwxLTI5LDEuNTUtNDQsMS41NXMtMjkuNDctLjQ3LTQzLjQ2LTEuMzhxLTEyLjQzLTE4LjE5LTIzLjQ2LTM3LjI5VDE2OC42LDI1Ni4wOVpNMzQwLjc1LDMwNXE3LjI1LTEyLjU4LDEzLjkyLTI1LjQ5aDBhNDQwLjQxLDQ0MC40MSwwLDAsMSwxNi4xMiw0Mi4zMkE0MzQuNDQsNDM0LjQ0LDAsMCwxLDMyNiwzMjkuNDhRMzMzLjYyLDMxNy4zOSwzNDAuNzUsMzA1Wm0xMy43Mi03My4wN3EtNi42NC0xMi42NS0xMy44MS0yNWgwcS03LTEyLjE4LTE0LjU5LTI0LjA2YzE1LjMxLDEuOTQsMzAsNC41Miw0My43Nyw3LjY3QTQzOS44OSw0MzkuODksMCwwLDEsMzU0LjQ3LDIzMS45M1pNMjU2LjIzLDEyNC40OGgwYTQzOS43NSw0MzkuNzUsMCwwLDEsMjguMjUsMzQuMThxLTI4LjM1LTEuMzUtNTYuNzQsMEMyMzcuMDcsMTQ2LjMyLDI0Ni42MiwxMzQuODcsMjU2LjIzLDEyNC40OFpNMTQ1LjY2LDY1Ljg2YzE2LjA2LTkuMzIsNTEuNTcsNCw4OSwzNy4yNywyLjM5LDIuMTMsNC44LDQuMzYsNy4yLDYuNjdBNDkxLjM3LDQ5MS4zNywwLDAsMCwyMDEsMTYwLjUxYTQ5OS4xMiw0OTkuMTIsMCwwLDAtNjQuMDYsMTBxLTEuODMtNy4zNi0zLjMtMTQuODJoMEMxMjQuNTksMTA5LjQ2LDEzMC41OCw3NC42MSwxNDUuNjYsNjUuODZaTTEyMi4yNSwzMTcuNzFxLTYtMS43MS0xMS44NS0zLjcxYy0yMy40LTgtNDIuNzMtMTguNDQtNTYtMjkuODFDNDIuNTIsMjc0LDM2LjUsMjYzLjgzLDM2LjUsMjU1LjU5YzAtMTcuNTEsMjYuMDYtMzkuODUsNjkuNTItNTVxOC4xOS0yLjg1LDE2LjUyLTUuMjFhNDkzLjU0LDQ5My41NCwwLDAsMCwyMy40LDYwLjc1QTUwMi40Niw1MDIuNDYsMCwwLDAsMTIyLjI1LDMxNy43MVptMTExLjEzLDkzLjY3Yy0xOC42MywxNi4zMi0zNy4yOSwyNy44OS01My43NCwzMy43MmgwYy0xNC43OCw1LjIzLTI2LjU1LDUuMzgtMzMuNjYsMS4yNy0xNS4xNC04Ljc1LTIxLjQ0LTQyLjU0LTEyLjg1LTg3Ljg2cTEuNTMtOCwzLjUtMTZhNDgwLjg1LDQ4MC44NSwwLDAsMCw2NC42OSw5LjM5LDUwMS4yLDUwMS4yLDAsMCwwLDQxLjIsNTFDMjM5LjU0LDQwNS44MywyMzYuNDksNDA4LjY1LDIzMy4zOCw0MTEuMzhabTIzLjQyLTIzLjIyYy05LjcyLTEwLjUxLTE5LjQyLTIyLjE0LTI4Ljg4LTM0LjY0cTEzLjc5LjU0LDI4LjA4LjU0YzkuNzgsMCwxOS40Ni0uMjEsMjktLjY0QTQzOS4zMyw0MzkuMzMsMCwwLDEsMjU2LjgsMzg4LjE2Wm0xMjQuNTIsMjguNTljLTIuODYsMTUuNDQtOC42MSwyNS43NC0xNS43MiwyOS44Ni0xNS4xMyw4Ljc4LTQ3LjQ4LTIuNjMtODIuMzYtMzIuNzItNC0zLjQ0LTgtNy4xMy0xMi4wNy0xMWE0ODQuNTQsNDg0LjU0LDAsMCwwLDQwLjIzLTUxLjIsNDc3Ljg0LDQ3Ny44NCwwLDAsMCw2NS0xMC4wNXExLjQ3LDUuOTQsMi42LDExLjY0aDBDMzgzLjgxLDM3Ny41OCwzODQuNSwzOTkuNTYsMzgxLjMyLDQxNi43NVptMTcuNC0xMDIuNjRoMGMtMi42Mi44Ny01LjMyLDEuNzEtOC4wNiwyLjUzYTQ4My4yNiw0ODMuMjYsMCwwLDAtMjQuMzEtNjAuOTQsNDgxLjUyLDQ4MS41MiwwLDAsMCwyMy4zNi02MC4wNmM0LjkxLDEuNDMsOS42OCwyLjkzLDE0LjI3LDQuNTIsNDQuNDIsMTUuMzIsNzEuNTIsMzgsNzEuNTIsNTUuNDNDNDc1LjUsMjc0LjE5LDQ0Ni4yMywyOTguMzMsMzk4LjcyLDMxNC4xMVoiLz4KDTxwYXRoIGQ9Ik0yNTYsMjk4LjU1YTQzLDQzLDAsMSwwLTQyLjg2LTQzQTQyLjkxLDQyLjkxLDAsMCwwLDI1NiwyOTguNTVaIi8+Cg08L2c+Cg08L3N2Zz4="
+}

package/src/cloudscape-website/app/files/app/src/layouts/App/index.tsx.template

@@ -0,0 +1,132 @@
+/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0 */
+import { useCognitoAuthContext } from "@aws-northstar/ui";
+import getBreadcrumbs from "@aws-northstar/ui/components/AppLayout/utils/getBreadcrumbs";
+import NavHeader from "@aws-northstar/ui/components/AppLayout/components/NavHeader";
+import * as React from "react";
+import { createContext, useCallback, useEffect, useState } from "react";
+import { NavItems } from "./navitems";
+import Config from "../../config";
+import Routes from "../Routes";
+
+import {
+  BreadcrumbGroup,
+  BreadcrumbGroupProps,
+  SideNavigation,
+} from "@cloudscape-design/components";
+import AppLayout, {
+  AppLayoutProps,
+} from "@cloudscape-design/components/app-layout";
+import { useLocation, useNavigate } from "react-router-dom";
+
+/**
+ * Context for updating/retrieving the AppLayout.
+ */
+export const AppLayoutContext = createContext({
+  appLayoutProps: {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setAppLayoutProps: (_: AppLayoutProps) => {},
+});
+
+/**
+ * Defines the App layout and contains logic for routing.
+ */
+const App: React.FC = () => {
+  const [username, setUsername] = useState<string | undefined>();
+  const [email, setEmail] = useState<string | undefined>();
+  const { getAuthenticatedUser } = useCognitoAuthContext();
+
+  const navigate = useNavigate();
+  const [activeHref, setActiveHref] = useState("/");
+  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
+    BreadcrumbGroupProps.Item[]
+  >([{ text: "/", href: "/" }]);
+  const [appLayoutProps, setAppLayoutProps] = useState<AppLayoutProps>({});
+  const location = useLocation();
+
+  useEffect(() => {
+    const authUser = getAuthenticatedUser();
+    setUsername(authUser?.getUsername());
+
+    authUser?.getSession(() => {
+      authUser.getUserAttributes((_, attributes) => {
+        setEmail(attributes?.find((a) => a.Name === "email")?.Value);
+      });
+    });
+  }, [getAuthenticatedUser, setUsername, setEmail]);
+
+  const setAppLayoutPropsSafe = useCallback(
+    (props: AppLayoutProps) => {
+      JSON.stringify(appLayoutProps) !== JSON.stringify(props) &&
+        setAppLayoutProps(props);
+    },
+    [appLayoutProps],
+  );
+
+  useEffect(() => {
+    setActiveHref(location.pathname);
+    const breadcrumbs = getBreadcrumbs(location.pathname, location.search, "/");
+    setActiveBreadcrumbs(breadcrumbs);
+  }, [location]);
+
+  const onNavigate = useCallback(
+    (e: CustomEvent<{ href: string; external?: boolean }>) => {
+      if (!e.detail.external) {
+        e.preventDefault();
+        setAppLayoutPropsSafe({
+          contentType: undefined,
+          splitPanelOpen: false,
+          splitPanelSize: undefined,
+          splitPanelPreferences: undefined,
+        });
+        navigate(e.detail.href);
+      }
+    },
+    [navigate, setAppLayoutPropsSafe],
+  );
+
+  return (
+    <AppLayoutContext.Provider
+      value={{ appLayoutProps, setAppLayoutProps: setAppLayoutPropsSafe }}
+    >
+      <NavHeader
+        title={Config.applicationName}
+        logo={Config.logo}
+        user={
+          username
+            ? {
+                username,
+                email,
+              }
+            : undefined
+        }
+        onSignout={() =>
+          new Promise(() => {
+            getAuthenticatedUser()?.signOut();
+            window.location.href = "/";
+          })
+        }
+      />
+      <AppLayout
+        breadcrumbs={
+          <BreadcrumbGroup onFollow={onNavigate} items={activeBreadcrumbs} />
+        }
+        toolsHide
+        navigation={
+          <SideNavigation
+            header={{ text: Config.applicationName, href: "/" }}
+            activeHref={activeHref}
+            onFollow={onNavigate}
+            items={NavItems}
+          />
+        }
+        content={<Routes />}
+        splitPanelOpen={false}
+        splitPanelPreferences={{ position: 'bottom' }}
+        {...appLayoutProps}
+      />
+    </AppLayoutContext.Provider>
+  );
+};
+
+export default App;

package/src/cloudscape-website/app/files/app/src/layouts/App/navitems.ts.template

@@ -0,0 +1,8 @@
+import { SideNavigationProps } from "@cloudscape-design/components";
+
+/**
+ * Define your Navigation Items here
+ */
+export const NavItems: SideNavigationProps.Item[] = [
+  { text: "Home", type: "link", href: "/" }
+];