create-aws-project 1.2.1

package/templates/apps/web/src/config/amplify-config.ts

@@ -0,0 +1,31 @@
+import { Amplify } from 'aws-amplify';
+
+/**
+ * Configure Amplify with Cognito settings
+ * Values should be set via environment variables
+ */
+export function configureAmplify(): void {
+  Amplify.configure({
+    Auth: {
+      Cognito: {
+        userPoolId: import.meta.env.VITE_COGNITO_USER_POOL_ID,
+        userPoolClientId: import.meta.env.VITE_COGNITO_CLIENT_ID,
+        // Optional: Identity Pool for AWS credentials
+        // identityPoolId: import.meta.env.VITE_COGNITO_IDENTITY_POOL_ID,
+        loginWith: {
+          email: true,
+        },
+        signUpVerificationMethod: 'code',
+        userAttributes: {
+          email: { required: true },
+        },
+        passwordFormat: {
+          minLength: 8,
+          requireLowercase: true,
+          requireUppercase: true,
+          requireNumbers: true,
+        },
+      },
+    },
+  });
+}

package/templates/apps/web/src/config/api.ts

@@ -0,0 +1,38 @@
+import { createApiClient, createConfig } from '{{PACKAGE_SCOPE}}/api-client';
+
+/**
+ * API Client instance for the web application
+ *
+ * Configuration is loaded from environment variables (if available):
+ * - VITE_API_BASE_URL: API base URL (optional, auto-detects if not set)
+ * - VITE_API_TIMEOUT: Request timeout in milliseconds
+ * - VITE_API_KEY: API key for authentication
+ * - VITE_API_WITH_CREDENTIALS: Whether to send credentials
+ * - VITE_API_DEBUG: Enable debug logging
+ *
+ * Create a .env.local file in the web app directory with these variables.
+ * See .env.example for more details.
+ *
+ * API URL is automatically derived from current web URL if not set:
+ * - Local dev (localhost): http://localhost:3000
+ * - Production: https://your-domain.com
+ *
+ * The API client methods include the /api prefix, so:
+ * - Calling getUsers() → https://your-domain.com/api/users
+ * - CloudFront routes /api/* to API Gateway
+ */
+export const apiClient = createApiClient(createConfig());
+
+/**
+ * Set authentication token (call this after user login)
+ */
+export function setAuthToken(token: string): void {
+  apiClient.setAuthToken(token);
+}
+
+/**
+ * Clear authentication token (call this on logout)
+ */
+export function clearAuthToken(): void {
+  apiClient.clearAuthToken();
+}

package/templates/apps/web/src/config/auth0-config.ts

@@ -0,0 +1,17 @@
+/**
+ * Auth0 configuration
+ * Values should be set via environment variables
+ */
+export interface Auth0Config {
+  domain: string;
+  clientId: string;
+  audience?: string;
+  redirectUri: string;
+}
+
+export const auth0Config: Auth0Config = {
+  domain: import.meta.env.VITE_AUTH0_DOMAIN || '',
+  clientId: import.meta.env.VITE_AUTH0_CLIENT_ID || '',
+  audience: import.meta.env.VITE_AUTH0_AUDIENCE || undefined,
+  redirectUri: typeof window !== 'undefined' ? window.location.origin : '',
+};

package/templates/apps/web/src/main.tsx

@@ -0,0 +1,41 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { ChakraProvider } from '@chakra-ui/react';
+// {{#if AUTH_COGNITO}}
+import { Amplify } from 'aws-amplify';
+import { amplifyConfig } from './config/amplify-config';
+import { AuthProvider } from './auth';
+// {{/if AUTH_COGNITO}}
+// {{#if AUTH_AUTH0}}
+import { AuthProvider } from './auth';
+// {{/if AUTH_AUTH0}}
+import App from './App';
+import theme from './theme';
+
+// {{#if AUTH_COGNITO}}
+Amplify.configure(amplifyConfig);
+// {{/if AUTH_COGNITO}}
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <StrictMode>
+    <ChakraProvider theme={theme}>
+      {/* {{#if AUTH_COGNITO}} */}
+      <AuthProvider>
+      {/* {{/if AUTH_COGNITO}} */}
+      {/* {{#if AUTH_AUTH0}} */}
+      <AuthProvider>
+      {/* {{/if AUTH_AUTH0}} */}
+        <App />
+      {/* {{#if AUTH_COGNITO}} */}
+      </AuthProvider>
+      {/* {{/if AUTH_COGNITO}} */}
+      {/* {{#if AUTH_AUTH0}} */}
+      </AuthProvider>
+      {/* {{/if AUTH_AUTH0}} */}
+    </ChakraProvider>
+  </StrictMode>
+);

package/templates/apps/web/src/store/user-store.ts

@@ -0,0 +1,56 @@
+import { create } from 'zustand';
+import type { User } from '{{PACKAGE_SCOPE}}/common-types';
+
+interface UserState {
+  user: User | null;
+  users: User[];
+  isLoading: boolean;
+  error: string | null;
+  setUser: (user: User | null) => void;
+  setUsers: (users: User[]) => void;
+  addUser: (user: User) => void;
+  updateUser: (id: string, updates: Partial<User>) => void;
+  removeUser: (id: string) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  clearError: () => void;
+}
+
+export const useUserStore = create<UserState>((set) => ({
+  user: null,
+  users: [],
+  isLoading: false,
+  error: null,
+
+  setUser: (user) => set({ user }),
+
+  setUsers: (users) => set({ users }),
+
+  addUser: (user) =>
+    set((state) => ({
+      users: [...state.users, user],
+    })),
+
+  updateUser: (id, updates) =>
+    set((state) => ({
+      users: state.users.map((u) =>
+        u.id === id ? { ...u, ...updates } : u
+      ),
+      user:
+        state.user?.id === id
+          ? { ...state.user, ...updates }
+          : state.user,
+    })),
+
+  removeUser: (id) =>
+    set((state) => ({
+      users: state.users.filter((u) => u.id !== id),
+      user: state.user?.id === id ? null : state.user,
+    })),
+
+  setLoading: (loading) => set({ isLoading: loading }),
+
+  setError: (error) => set({ error }),
+
+  clearError: () => set({ error: null }),
+}));

package/templates/apps/web/src/styles.css

@@ -0,0 +1,165 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-color: #3b82f6;
+  --secondary-color: #8b5cf6;
+  --background: #0f172a;
+  --surface: #1e293b;
+  --text: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --border: #334155;
+  --success: #10b981;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--background);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  padding: 2rem;
+  text-align: center;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.app-header h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: 700;
+}
+
+.app-header p {
+  font-size: 1.1rem;
+  opacity: 0.9;
+}
+
+.app-main {
+  flex: 1;
+  padding: 3rem 2rem;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.card {
+  background: var(--surface);
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border);
+}
+
+.card h2 {
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+.card p {
+  color: var(--text-secondary);
+  margin-bottom: 1.5rem;
+}
+
+.features {
+  margin: 2rem 0;
+  padding: 1.5rem;
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: 8px;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.features h3 {
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+.features ul {
+  list-style: none;
+  padding: 0;
+}
+
+.features li {
+  padding: 0.5rem 0;
+  font-size: 1.05rem;
+}
+
+.user-info {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: rgba(16, 185, 129, 0.1);
+  border-radius: 8px;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.user-info h3 {
+  color: var(--success);
+  margin-bottom: 1rem;
+}
+
+.user-info p {
+  margin: 0.5rem 0;
+  color: var(--text);
+}
+
+button {
+  margin-top: 1rem;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: white;
+  background: var(--primary-color);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+button:hover {
+  background: #2563eb;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+button:active {
+  transform: translateY(0);
+}
+
+.app-footer {
+  padding: 2rem;
+  text-align: center;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  color: var(--text-secondary);
+}
+
+@media (max-width: 768px) {
+  .app-header h1 {
+    font-size: 2rem;
+  }
+
+  .app-main {
+    padding: 2rem 1rem;
+  }
+
+  .card {
+    padding: 1.5rem;
+  }
+}

package/templates/apps/web/src/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/templates/apps/web/src/theme/index.ts

@@ -0,0 +1,30 @@
+import { extendTheme, type ThemeConfig, theme as baseTheme } from '@chakra-ui/react';
+
+const config: ThemeConfig = {
+  initialColorMode: 'dark',
+  useSystemColorMode: false,
+};
+
+const theme = extendTheme({
+  config,
+  colors: {
+    brand: baseTheme.colors['{{BRAND_COLOR}}'],
+  },
+  styles: {
+    global: {
+      body: {
+        bg: 'gray.900',
+        color: 'white',
+      },
+    },
+  },
+  components: {
+    Button: {
+      defaultProps: {
+        colorScheme: 'brand',
+      },
+    },
+  },
+});
+
+export default theme;

package/templates/apps/web/src/vite-env.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+
+// Global constants defined in vite.config.ts
+declare const __DEV__: boolean;
+declare const __PROD__: boolean;
+
+// Extend ImportMetaEnv with custom environment variables
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL?: string;
+  readonly VITE_API_TIMEOUT?: string;
+  readonly VITE_API_KEY?: string;
+  readonly VITE_API_WITH_CREDENTIALS?: string;
+  readonly VITE_API_DEBUG?: string;
+  readonly VITE_DEV_MODE?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/apps/web/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node", "vite/client"]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "src/__mocks__/**/*"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}

package/templates/apps/web/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/templates/apps/web/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "baseUrl": "../../",
+    "paths": {
+      "@/config/*": ["apps/web/src/config/*"],
+      "@/config/api": ["apps/web/src/__mocks__/config/api.ts"],
+      "{{PACKAGE_SCOPE}}/common-types": ["packages/common-types/src/index.ts"],
+      "{{PACKAGE_SCOPE}}/api-client": ["packages/api-client/src/index.ts"]
+    }
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts",
+    "src/test-setup.ts",
+    "src/__mocks__/**/*.ts"
+  ]
+}

package/templates/apps/web/vite.config.ts

@@ -0,0 +1,87 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import * as path from 'path';
+
+export default defineConfig(({ mode }) => {
+  return {
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/apps/web',
+
+    // Development server configuration
+    server: {
+      port: 3000,
+      host: true, // Listen on all addresses (0.0.0.0)
+      strictPort: false, // Try next port if 3000 is taken
+      open: false, // Don't auto-open browser
+      cors: true,
+      // Proxy API requests to backend during development
+      // Note: Vite automatically loads VITE_ prefixed env vars
+      proxy: mode === 'development' ? {
+        '/api': {
+          target: process.env.VITE_API_BASE_URL || 'http://localhost:3000',
+          changeOrigin: true,
+          secure: false,
+        },
+      } : undefined,
+    },
+
+    preview: {
+      port: 3001,
+      host: 'localhost',
+    },
+
+    plugins: [
+      react({
+        // Fast Refresh is enabled by default
+        babel: {
+          plugins: [
+            // Add any Babel plugins for dev mode here
+          ],
+        },
+      }),
+      nxViteTsPaths(),
+    ],
+
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+
+    // Optimize dependencies
+    optimizeDeps: {
+      include: ['react', 'react-dom', '@chakra-ui/react', 'zustand', 'axios'],
+    },
+
+    build: {
+      outDir: '../../dist/apps/web',
+      emptyOutDir: true,
+      reportCompressedSize: true,
+      sourcemap: mode === 'development',
+      minify: mode === 'production' ? 'esbuild' : false,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
+      // Chunk splitting for better caching
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            'react-vendor': ['react', 'react-dom'],
+            'chakra-vendor': ['@chakra-ui/react', '@emotion/react', '@emotion/styled'],
+            'utils': ['zustand', 'axios'],
+          },
+        },
+      },
+    },
+
+    // Environment variable handling
+    envPrefix: 'VITE_',
+
+    // Define global constants
+    define: {
+      __DEV__: mode === 'development',
+      __PROD__: mode === 'production',
+    },
+  };
+});

package/templates/manifest.json

@@ -0,0 +1,28 @@
+{
+  "shared": [
+    { "src": "root/package.json", "dest": "package.json" },
+    { "src": "root/tsconfig.base.json", "dest": "tsconfig.base.json" },
+    { "src": "root/nx.json", "dest": "nx.json" },
+    { "src": "root/jest.preset.js", "dest": "jest.preset.js" },
+    { "src": "root/eslint.config.js", "dest": "eslint.config.js" },
+    { "src": "root/.npmrc", "dest": ".npmrc" },
+    { "src": "root/.nvmrc", "dest": ".nvmrc" },
+    { "src": "root/.editorconfig", "dest": ".editorconfig" },
+    { "src": "root/.gitignore", "dest": ".gitignore" },
+    { "src": "packages/common-types", "dest": "packages/common-types" },
+    { "src": "packages/api-client", "dest": "packages/api-client" },
+    { "src": ".vscode", "dest": ".vscode" },
+    { "src": ".github", "dest": ".github" }
+  ],
+  "byPlatform": {
+    "web": [
+      { "src": "apps/web", "dest": "apps/web" }
+    ],
+    "mobile": [
+      { "src": "apps/mobile", "dest": "apps/mobile" }
+    ],
+    "api": [
+      { "src": "apps/api", "dest": "apps/api" }
+    ]
+  }
+}

package/templates/packages/api-client/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.js"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/templates/packages/api-client/jest.config.ts

@@ -0,0 +1,13 @@
+export default {
+  displayName: 'api-client',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/packages/api-client',
+  moduleNameMapper: {
+    '^{{PACKAGE_SCOPE}}/common-types$': '<rootDir>/../../packages/common-types/src/index.ts',
+  },
+};

package/templates/packages/api-client/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "{{PACKAGE_SCOPE}}/api-client",
+  "version": "1.0.0",
+  "description": "API client for the monorepo",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "type": "module"
+}

package/templates/packages/api-client/project.json.template

@@ -0,0 +1,34 @@
+{
+  "name": "api-client",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/api-client/src",
+  "projectType": "library",
+  "tags": ["type:library"],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/api-client/**/*.ts"]
+      }
+    },
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/api-client",
+        "main": "packages/api-client/src/index.ts",
+        "tsConfig": "packages/api-client/tsconfig.lib.json",
+        "assets": ["packages/api-client/*.md"]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/packages/api-client"],
+      "options": {
+        "jestConfig": "packages/api-client/jest.config.ts",
+        "passWithNoTests": true
+      }
+    }
+  }
+}