I'm having a problem installing the Frontend

[giulianetti]

⚠️ Search for existing issues first ⚠️

• I have searched the existing issues, and there is no existing issue for my problem

Which Operating System are you using?

Windows

Which version of AutoGPT are you using?

Latest Release

What LLM Provider do you use?

Other (detail in issue)

Which area covers your issue best?

Installation and setup

What commit or version are you using?

6584935

Describe your issue.

When compiling the solution the home page loads but does not work.

Upload Activity Log Content

No response

Upload Error Log Content

This is the console log:

(node:11560) [DEP0040] DeprecationWarning: The punycodemodule is deprecated. Please use a userland alternative instead. (Usenode --trace-deprecation ...to show where the warning was created) ✓ Compiled /login in 30s (5474 modules) Error: Route "/login" usedcookies().getAll(). cookies()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
at getAll (src\lib\supabase\getServerSupabase.ts:15:31)
13 | cookies: {
14 | getAll() {

15 | return cookieStore.getAll();
| ^
16 | },
17 | setAll(cookiesToSet) {
18 | try {
GET /login 200 in 34286ms
○ Compiling /store ...
[webpack.cache.PackFileCacheStrategy] Serializing big strings (317kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
✓ Compiled /store in 21.9s (5512 modules)
Error: Route "/store" used cookies().getAll(). cookies() should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
at getAll (src\lib\supabase\getServerSupabase.ts:15:31)
13 | cookies: {
14 | getAll() {
15 | return cookieStore.getAll();
| ^
16 | },
17 | setAll(cookiesToSet) {
18 | try {
⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
Error: Route "/login" used cookies().getAll(). cookies() should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
at getAll (src\lib\supabase\getServerSupabase.ts:15:31)
13 | cookies: {
14 | getAll() {
15 | return cookieStore.getAll();
| ^
16 | },
17 | setAll(cookiesToSet) {
18 | try {
Error fetching store data: TypeError: fetch failed
at async BackendAPI._request (src\lib\autogpt-server-api\client.ts:470:21)
at async getStoreData (webpack-internal:(rsc)\src\app\store\src\app\store\page.tsx:60:54)
at async Page (webpack-internal:(rsc)\src\app\store\src\app\store\page.tsx:154:58)
468 |
470 | const response = await fetch(url, {
| ^
471 | method,
472 | headers: {
473 | ...(hasRequestBody && { "Content-Type": "application/json" }), {
[cause]: Error: connect ECONNREFUSED ::1:8006
at (Error: connect ECONNREFUSED ::1:8006) {
errno: -4078,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '::1',
port: 8006
}
}
GET /login 200 in 754ms
POST /store?o=4505260022104064&p=4507946746380288&r=us 200 in 25236ms`

These are the errors shown on the screen:

[clmarshall]

Same:

GET /store 200 in 4947ms Error fetching store data: TypeError: fetch failed at node:internal/deps/undici/undici:12618:11 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async BackendAPI._request (webpack-internal:///(rsc)/./src/lib/autogpt-server-api/client.ts:280:26) at async Promise.all (index 0) at async getStoreData (webpack-internal:///(rsc)/./src/app/store/page.tsx:73:61) at async Page (webpack-internal:///(rsc)/./src/app/store/page.tsx:177:61) { cause: Error: connect ECONNREFUSED 127.0.0.1:8006 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16) at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:128:17) { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 8006 } }

[clmarshall]

This did it for me... Thanks to ROO CLINE and DeepSeek:

Procedure to Resolve Backend Connection Issues

1. Verify Docker Containers

1. Check Container Status
   Run the following command to verify all containers are running:

   docker ps -a

   Ensure the following containers are in the "Up" state:

   • autogpt_platform-rest_server-1
   • autogpt_platform-redis-1
   • supabase-db

2. Restart Containers if Needed
   If any containers are not running, restart them:

   docker-compose up -d

---

2. Apply Database Migrations

1. Run Migrations
   Ensure the database schema is up-to-date by running migrations:

   docker-compose run --rm migrate

   Verify the output for successful migration completion.

---

3. Verify Backend API

1. Test Backend Connection
   Use curl to check if the backend API is responding:

   curl -I http://localhost:8006/api/store/agents

   Expected response:

   HTTP/1.1 200 OK
   

2. Check Backend Logs
   If the API is not responding, inspect the backend logs:

   docker logs autogpt_platform-rest_server-1

   Look for errors or warnings during startup.

---

4. Start Frontend Development Server

1. Navigate to Frontend Directory

   cd frontend

2. Install Dependencies
   Ensure all dependencies are installed:

   npm install

3. Run Development Server
   Start the frontend server:

   npm run dev

4. Verify Frontend Connection
   Open the application in a browser:

   http://localhost:3000
   

---

5. Troubleshooting Common Issues

1. Backend Not Responding

   • Ensure the backend container is running:

     docker-compose up -d rest_server

   • Check for port conflicts (e.g., another service using port 8006).

2. Database Connection Issues

   • Verify the database container is healthy:

     docker ps -a

   • Check the database logs:

     docker logs supabase-db

3. Frontend Connection Errors

   • Ensure the backend URL is correctly configured in the frontend:

     grep NEXT_PUBLIC_AGPT_SERVER_URL frontend/.env

     Expected value:

     NEXT_PUBLIC_AGPT_SERVER_URL=http://localhost:8006/api
     

---

6. Final Verification

1. Test Full Stack

   • Access the frontend at http://localhost:3000.
   • Verify that API requests to http://localhost:8006/api succeed.

2. Check Logs for Errors

   • Frontend logs: Output in the terminal running npm run dev.
   • Backend logs:

     docker logs autogpt_platform-rest_server-1

---

[itsababseh]

@clmarshall Thanks for posting the resolution steps! @giulianetti please try the steps and confirm you're no longer having this issue so we can close this ticket 🙏🏼