Can't access frontend, it will remain loaded and cannot be accessed.

[xyfacai]

I have encountered a similar issue. I am running on my Mac M1 16G, Bash shows successful startup, and the quivr backend is successfully accessed in the browser. Indicates {"message": "Hello World"}

But I visited http://localhost:3000/ It will remain loaded and cannot be accessed.

Attaching to backend, web
web      | yarn run v1.22.19
web      | $ next dev
web      | - ready started server on 0.0.0.0:3000, url: http://localhost:3000
web      | - info Loaded env from /app/.env
web      | Attention: Next.js now collects completely anonymous telemetry regarding usage.
web      | This information is used to shape Next.js' roadmap and prioritize features.
web      | You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
web      | https://nextjs.org/telemetry
web      |
backend  | INFO:     Will watch for changes in these directories: ['/code']
backend  | INFO:     Uvicorn running on http://0.0.0.0:5050 (Press CTRL+C to quit)
backend  | INFO:     Started reloader process [1] using StatReload
web      | - event compiled client and server successfully in 2.6s (311 modules)
web      | - wait compiling...
web      | - event compiled client and server successfully in 304 ms (311 modules)
backend  | INFO:     Started server process [10]
backend  | INFO:     Waiting for application startup.
web      | - wait compiling /middleware (client and server)...
web      | - event compiled successfully in 514 ms (193 modules)
backend  | [INFO] Using already downloaded file pandoc-3.1.2-1-arm64.deb
backend  | 2023-05-31 02:35:38,734:INFO - Using already downloaded file pandoc-3.1.2-1-arm64.deb
backend  | [INFO] Unpacking pandoc-3.1.2-1-arm64.deb to tempfolder...
backend  | 2023-05-31 02:35:38,735:INFO - Unpacking pandoc-3.1.2-1-arm64.deb to tempfolder...
backend  | [INFO] Copying pandoc to /root/bin ...
backend  | 2023-05-31 02:35:40,627:INFO - Copying pandoc to /root/bin ...
web      | - wait compiling /(home)/page (client and server)...
backend  | [INFO] Making /root/bin/pandoc executeable...
backend  | 2023-05-31 02:35:40,781:INFO - Making /root/bin/pandoc executeable...
backend  | [INFO] Copying copyright to /root/bin ...
backend  | 2023-05-31 02:35:40,781:INFO - Copying copyright to /root/bin ...
backend  | INFO:     Application startup complete.
web      | - event compiled client and server successfully in 12.9s (1959 modules)
web      | - wait compiling...
web      | - event compiled successfully in 562 ms (874 modules)

[xyfacai]

I still have 4 GB of usable memory left

[xyfacai]

I started the frontend project locally instead of using Docker, which is working

[iRedScarf]

I have deployed the project on an Azure B1S host, and when accessing port 5050 through a custom domain, it also indicates {"message": "Hello World"}.

Attaching to backend, web
backend  | INFO:     Will watch for changes in these directories: ['/code']
backend  | INFO:     Uvicorn running on http://0.0.0.0:5050 (Press CTRL+C to quit)
backend  | INFO:     Started reloader process [1] using StatReload
web      | yarn run v1.22.19
web      | $ next dev
web      | - ready started server on 0.0.0.0:3000, url: http://localhost:3000
web      | - info Loaded env from /app/.env
web      | Attention: Next.js now collects completely anonymous telemetry regarding usage.
web      | This information is used to shape Next.js' roadmap and prioritize features.
web      | You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
web      | https://nextjs.org/telemetry
web      | 
backend  | INFO:     Started server process [7]
backend  | INFO:     Waiting for application startup.
backend  | [INFO] Downloading pandoc from https://github.com/jgm/pandoc/releases/download/3.1.2/pandoc-3.1.2-1-amd64.deb ...
backend  | 2023-05-31 04:09:22,442:INFO - Downloading pandoc from https://github.com/jgm/pandoc/releases/download/3.1.2/pandoc-3.1.2-1-amd64.deb ...
backend  | [INFO] Unpacking pandoc-3.1.2-1-amd64.deb to tempfolder...
backend  | 2023-05-31 04:09:23,411:INFO - Unpacking pandoc-3.1.2-1-amd64.deb to tempfolder...
backend  | [INFO] Copying pandoc to /root/bin ...
backend  | 2023-05-31 04:09:27,376:INFO - Copying pandoc to /root/bin ...
backend  | [INFO] Making /root/bin/pandoc executeable...
backend  | 2023-05-31 04:09:38,381:INFO - Making /root/bin/pandoc executeable...
backend  | [INFO] Copying copyright to /root/bin ...
backend  | 2023-05-31 04:09:42,924:INFO - Copying copyright to /root/bin ...
backend  | INFO:     Application startup complete.

[princealirehman1]

@xyfacai
The front-end which you are running is in debug mode
If you don't want to wait for loadings, please build and serve the build project

That will work just fine

For a quick solution, you deploy frontend on vercel

[iRedScarf]

@xyfacai The front-end which you are running is in debug mode If you don't want to wait for loadings, please build and serve the build project

That will work just fine

For a quick solution, you deploy frontend on vercel

Deploying the front end on Vercel is a good choice. Could you please tell me where I can find a detailed guide on how to deploy the front end on Vercel? Thank you.

[princealirehman1]

@xyfacai The front-end which you are running is in debug mode If you don't want to wait for loadings, please build and serve the build project
That will work just fine
For a quick solution, you deploy frontend on vercel

Deploying the front end on Vercel is a good choice. Could you please tell me where I can find a detailed guide on how to deploy the front end on Vercel? Thank you.

There are many guides online but its quick & easy, here are some quick steps

1. Login to vercel with your github
2. Give vercel access to your repo
3. Create a project on vercel using that repo, simple next next wizard on vercel
4. Make sure to select the /frontend folder while creating project if you have both backend & fronend in the same repo
5. For .env you can add these values under Environment Varible in project settings on vercel
6. Tada its done, Vercel will now build and deploy it on a subdomain of your choice with .vercel

[adityanandanx]

I have deployed the project on an Azure B1S host, and when accessing port 5050 through a custom domain, it also indicates {"message": "Hello World"}.

Attaching to backend, web
backend  | INFO:     Will watch for changes in these directories: ['/code']
backend  | INFO:     Uvicorn running on http://0.0.0.0:5050 (Press CTRL+C to quit)
backend  | INFO:     Started reloader process [1] using StatReload
web      | yarn run v1.22.19
web      | $ next dev
web      | - ready started server on 0.0.0.0:3000, url: http://localhost:3000
web      | - info Loaded env from /app/.env
web      | Attention: Next.js now collects completely anonymous telemetry regarding usage.
web      | This information is used to shape Next.js' roadmap and prioritize features.
web      | You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
web      | https://nextjs.org/telemetry
web      | 
backend  | INFO:     Started server process [7]
backend  | INFO:     Waiting for application startup.
backend  | [INFO] Downloading pandoc from https://github.com/jgm/pandoc/releases/download/3.1.2/pandoc-3.1.2-1-amd64.deb ...
backend  | 2023-05-31 04:09:22,442:INFO - Downloading pandoc from https://github.com/jgm/pandoc/releases/download/3.1.2/pandoc-3.1.2-1-amd64.deb ...
backend  | [INFO] Unpacking pandoc-3.1.2-1-amd64.deb to tempfolder...
backend  | 2023-05-31 04:09:23,411:INFO - Unpacking pandoc-3.1.2-1-amd64.deb to tempfolder...
backend  | [INFO] Copying pandoc to /root/bin ...
backend  | 2023-05-31 04:09:27,376:INFO - Copying pandoc to /root/bin ...
backend  | [INFO] Making /root/bin/pandoc executeable...
backend  | 2023-05-31 04:09:38,381:INFO - Making /root/bin/pandoc executeable...
backend  | [INFO] Copying copyright to /root/bin ...
backend  | 2023-05-31 04:09:42,924:INFO - Copying copyright to /root/bin ...
backend  | INFO:     Application startup complete.

The Next js frontend needs to be built first and it takes time when it's run for the first time. Just wait for some time to let it build.

Or run only the backend docker container and manually run the frontend by-

cd frontend
yarn && yarn dev