Make React app accessible via domain

[madhawk001]

Describe the bug
I installed GPT-Researcher on my Linux server via Docker and so far everything has worked perfectly when I did the first test runs under http://localhost:8000 and http://localhost:3000.

Now I would like to make my GPT-Researcher installation accessible from anywhere via corresponding domains. So I have set up/configured the following two domains:

• Python server: https://gptr-be.meinedomain.de (Port 8000)
• React app: https://gptr-fe.meinedomain.de (port 3000)

I have also created an SSL certificate for both domains via Let's Encrypt and configured them so that they can only be accessed via https.

I was then able to access both domains and the appropriate display was loaded. However, I can only successfully perform a search with the Python server (gptr-be.meinedomain.de / Port 8000). If I start a search via the React app (gptr-fe.meinedomain.de / Port 3000), nothing happens (see screenshot)

To Reproduce
Steps to reproduce the behavior:

1. install the gptr tools as described at https://docs.gptr.dev/docs/gpt-researcher/getting-started/getting-started-with-docker
2. configure one domain each for calling port 8000 and 3000

Expected behavior
When the domain gptr-fe.mydomain.com is called up, the React app should not only be displayed cleanly, but should also work when a search is started.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu Linux
• Browser: Brave

Additional context
The very first time I call up the domain gptr-fe.meinedomain.de (React app / Port 3000) and before I start a search, I get the following error message in the browser's developer console:

Error fetching config: 
Object { stack: “AxiosError@webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/core/AxiosError.js:24:19\nsettle@webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/core/settle.js:24:12\nonloadend@webpack-internal:///(app-pages-browser)/. /node_modules/axios/lib/adapters/xhr.js:70:66\nEventHandlerNonNull*dispatchXhrRequest@webpack-internal:///(app-pages-browser)/. /node_modules/axios/lib/adapters/xhr.js:84:7\n__webpack_exports__.default<@webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/adapters/xhr. js:26:10\ndispatchRequest@webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/core/dispatchRequest.js:61:10\n_request@webpack-internal:///(app-pages-browser)/. /node_modules/axios/lib/core/Axios.js:187:77\nrequest@webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/core/Axios. js:49:25\nforEachMethodNoData/Axios.prototype[method]@webpack-internal:///(app-pages-browser)/./node_modules/axios/lib/core/Axios.js:213:17\nwrap@webpack-internal:///(app-pages-bro...”, message: ‘Request failed with status code 404’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {...}, request: XMLHttpRequest, response: {...}, status: 404 }

What do I have to do so that I can also access and use the React app via my own domain outside the server? Or is it simply not possible at the current stage to make the setup I want?

[ElishaKay]

Welcome @madhawk001

It's an important use case & something I'll do my best to handle in the the current 2-week sprint.

The API Endpoint that the React app points to is hard-coded in the getHosts file and throughout the nextjs folder (you can search for the strings "localhost:8000" to locate where it's hardcoded)

We'll create a new BACKEND_API_URL environment variable for a smoother dev experience

I'll update here when there's news

[Mizokuiam]

Thank you for raising this issue! I'll look into it and try to help if I can.