|
1 | 1 | # Frontend - Local Development Guide |
2 | 2 |
|
3 | | -This is the React/Next.js frontend for the Fullstack AgentCore Solution Template (FAST). This README focuses on local development setup and workflows. |
| 3 | +This is the React + Vite frontend for the Fullstack AgentCore Solution Template (FAST). This README focuses on local development setup and workflows. |
4 | 4 |
|
5 | 5 | For full stack deployment instructions, see the [top-level README](../README.md) and [deployment documentation](../docs/DEPLOYMENT.md). |
6 | 6 |
|
@@ -45,38 +45,38 @@ By default, the app uses Cognito authentication. To test this locally: |
45 | 45 | 2. Set the redirect URI for local development: |
46 | 46 |
|
47 | 47 | ```bash |
48 | | -export NEXT_PUBLIC_COGNITO_REDIRECT_URI=http://localhost:3000 |
| 48 | +export VITE_COGNITO_REDIRECT_URI=http://localhost:3000 |
49 | 49 | npm run dev |
50 | 50 | ``` |
51 | 51 |
|
52 | 52 | ### Option 2: Disable Authentication (ONLY for Local Development!!!) |
53 | 53 |
|
54 | 54 | For faster local development without needing to deploy Cognito, you can disable authentication: |
55 | 55 |
|
56 | | -**⚠️ IMPORTANT: Remove the AuthProvider wrapper from `src/app/layout.tsx`** |
| 56 | +**⚠️ IMPORTANT: Remove the AuthProvider wrapper from `src/App.tsx`** |
57 | 57 |
|
58 | 58 | Change this: |
59 | 59 |
|
60 | 60 | ```tsx |
61 | | -export default function RootLayout({ children }: { children: React.ReactNode }) { |
| 61 | +export default function App() { |
62 | 62 | return ( |
63 | | - <html lang="en"> |
64 | | - <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}> |
65 | | - <AuthProvider>{children}</AuthProvider> |
66 | | - </body> |
67 | | - </html> |
| 63 | + <BrowserRouter> |
| 64 | + <AuthProvider> |
| 65 | + <AppRoutes /> |
| 66 | + </AuthProvider> |
| 67 | + </BrowserRouter> |
68 | 68 | ) |
69 | 69 | } |
70 | 70 | ``` |
71 | 71 |
|
72 | 72 | To this: |
73 | 73 |
|
74 | 74 | ```tsx |
75 | | -export default function RootLayout({ children }: { children: React.ReactNode }) { |
| 75 | +export default function App() { |
76 | 76 | return ( |
77 | | - <html lang="en"> |
78 | | - <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body> |
79 | | - </html> |
| 77 | + <BrowserRouter> |
| 78 | + <AppRoutes /> |
| 79 | + </BrowserRouter> |
80 | 80 | ) |
81 | 81 | } |
82 | 82 | ``` |
@@ -139,22 +139,47 @@ Popular icons include Camera, Search, Menu, User, Settings, Download, Upload, an |
139 | 139 | ``` |
140 | 140 | frontend/ |
141 | 141 | ├── src/ |
142 | | -│ ├── app/ # Next.js app router |
| 142 | +│ ├── main.tsx # Application entry point |
| 143 | +│ ├── App.tsx # Root component with routing |
| 144 | +│ ├── routes/ # Route components |
143 | 145 | │ ├── components/ |
144 | 146 | │ │ ├── ui/ # shadcn components |
145 | 147 | │ │ └── auth/ # Authentication components |
146 | 148 | │ ├── lib/ # Utilities and configurations |
147 | | -│ └── services/ # API service layers |
| 149 | +│ ├── services/ # API service layers |
| 150 | +│ └── styles/ # Global styles |
148 | 151 | ├── public/ # Static assets |
| 152 | +├── index.html # HTML entry point |
149 | 153 | └── package.json |
150 | 154 | ``` |
151 | 155 |
|
| 156 | +## Environment Variables |
| 157 | + |
| 158 | +The application uses Vite environment variables with the `VITE_` prefix: |
| 159 | + |
| 160 | +- `VITE_COGNITO_USER_POOL_ID` - Cognito User Pool ID |
| 161 | +- `VITE_COGNITO_CLIENT_ID` - Cognito Client ID |
| 162 | +- `VITE_COGNITO_REGION` - AWS Region |
| 163 | +- `VITE_COGNITO_REDIRECT_URI` - Redirect URI after authentication |
| 164 | +- `VITE_COGNITO_POST_LOGOUT_REDIRECT_URI` - Redirect URI after logout |
| 165 | + |
| 166 | +These can be set in a `.env` file or as environment variables. The application will fall back to `aws-exports.json` if environment variables are not set. |
| 167 | + |
| 168 | +## Available Scripts |
| 169 | + |
| 170 | +- `npm run dev` - Start the Vite development server |
| 171 | +- `npm run build` - Build for production (runs TypeScript check + Vite build) |
| 172 | +- `npm run preview` - Preview the production build locally |
| 173 | +- `npm run lint` - Run ESLint |
| 174 | +- `npm run lint:fix` - Run ESLint with auto-fix |
| 175 | +- `npm run clean` - Clean build artifacts and dependencies |
| 176 | + |
152 | 177 | ## Development Tips |
153 | 178 |
|
154 | | -- **Hot Reload**: Changes auto-reload in the browser |
155 | | -- **TypeScript**: Full type safety with AI assistant support |
156 | | -- **Tailwind CSS**: Utility-first styling |
| 179 | +- **Hot Reload**: Changes auto-reload in the browser with Vite's fast HMR |
| 180 | +- **TypeScript**: Full type safety with strict mode enabled |
157 | 181 | - **Vibe Coding**: Optimized for AI-assisted development |
| 182 | +- **Tailwind CSS**: Utility-first styling with Tailwind CSS 4 |
158 | 183 |
|
159 | 184 | ## Building with AI Assistants |
160 | 185 |
|
|
0 commit comments