The web page appears blank without displaying any content

[hellosmarter]

Issues：When I accesse remotely through http://:8000 in the browser. （ I have deployed a service on an overseas server (using Tencent Cloud server in Silicon Valley) and I am accessing this service through a browser in china. ）However, the web page appears blank without displaying any content (as shown in Image 1). The error logs in your browser console (as shown in Image 2), On the frontend server logs (as shown in Image 3), it can be observed that requests are being received , but the issue causing the error is unknown. Please help to investigate and identify the source of the problem. Thank you.

Below are the specific steps for deploying the service. Is it not possible to deploy the corresponding remote service using the command below? Could you please review and see if there are any issues with it? Great thanks！

1、 python cli.py web-build 2、npm install -g serve 3、serve -s /root/RealChar/client/web/build -l 8000 4、 accesses the frontend service by using ":8000" for accessing in the browser

Furthermore, I have opened port 8000 on the server's firewall, allowing access.

[pycui]

You can follow the message in the screenshot to get the non-minified version of the error message, which will give you a much better understanding of the problem

[hellosmarter]

@pycui I visit the screenshot link get full message as below，please help to take a look it，thanks Besides, I accesse remotely through http://IP:8000 in the browser , Do we need to switch to HTTPS for accessing?

The full text of the error you just encountered is: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[pycui]

remote microphone access does require SSL certificate.

[hellosmarter]

@pycui I've installed an SSL certificate on the server, and the specific Nginx configuration is shown （ picture 1）. However, when I open my domain in Google Chrome, the service is aborted, with the specific errors shown in picture 2 and picture 3. I really don't know what to do next. I've been stuck here for a long time and I feel like giving up. Could you please check where the problem is? Below are the steps I took to install your service. I'm wondering if I've missed something that I didn't execute? Thank you.

Below are the specific steps for deploying the service：1、 python cli.py web-build 2、npm install -g serve 3、serve -s /root/RealChar/client/web/build 4、 accesses the frontend service by https://hellodora.net in the browser

[pycui]

have you tried to use client/web/Dockerfile to build a docker container to serve the front end? This is how we serve it on production traffic.

[y1guo]

Have you solved this issue? I might've misunderstood, but it seems you didn't start the backend. I think you need to run

uvicorn realtime_ai_character.main:app

to start the backend after building the frontend with

python cli.py web-build

The backend listens at port 8000, and it also serves a static frontend I think. But you can also serve a development frontend from client/web at port 3000.

Best,

[hellosmarter]

to start the backend after building the frontend with

No, I'm stuck and I don't know what the problem is. I've started the backend. Here are the detailed descriptions of my problem. Can you help me figure out what's wrong?

I have started the backend service by executing the command (uvicorn realtime_ai_character.main:app). I have also built the web frontend by executing the command ( python cli.py web-build ). I have configured Nginix as well, the specific configuration is shown in screenshot-1. However, when I access my service through the browser domain, it still does not display any content. When I open the network in the browser, I see that the GET requests for js and main.css both return 200, but the console displays the following error, as shown in screenshot-2. I don't know where the problem lies. Is there something wrong with my Nginx configuration? could you help me have a look，great thanks.

[hellosmarter]

@y1guo could you help me have a look，great thanks！

[y1guo]

I'm confused how you could start both uvicorn and serve at port 8000. On my machin they apparently refuse to do so. I think maybe deploying on a remote server introduced some complication. Have you tried get it running on a local machine? So that you can be confident on the procedure regardless of all the server certificate / proxy stuff.

To deploy locally you can follow the README - Installation via Python, and to serve the frontend locally, you can run python cli.py web-build then uvicorn realtime_ai_character.main:app and open localhost:8000. You should be able to see the App. Or, you can go to the client/web folder and do npm start or serve -s build as you did, then open up localhost:3000. In this scenario you would have both uvicorn and serve running. uvicorn running at port 8000 and serve at 3000. I don't think you can open both things at port 8000 though.

[hellosmarter]

I'm confused how you could start both uvicorn and serve at port 8000. On my machin they apparently refuse to do so. I think maybe deploying on a remote server introduced some complication. Have you tried get it running on a local machine? So that you can be confident on the procedure regardless of all the server certificate / proxy stuff.

To deploy locally you can follow the README - Installation via Python, and to serve the frontend locally, you can run python cli.py web-build then uvicorn realtime_ai_character.main:app and open localhost:8000. You should be able to see the App. Or, you can go to the client/web folder and do npm start or serve -s build as you did, then open up localhost:3000. In this scenario you would have both uvicorn and serve running. uvicorn running at port 8000 and serve at 3000. I don't think you can open both things at port 8000 though.

@y1guo Finally, the front end is not used in a sever way. I used the Nginx service (that is, I configured the buid directory with the Nginx service after executing python cli.py web-build). The back-end is on port 8000, and the front-end is on port 80 by default, so there should be no problem of port conflict as you said?