Uncaught runtime errors

[ryangar888]

Hi dev, I tried run with docker compose, then i access the IP:3000 and get this error:

[dev-lu]

The error occurs when attempting to access the app from a remote address. Since there is currently no authentication in place, I suggest running it from localhost. However, if you still wish to use the app from a location other than localhost, such as when running it on a Raspberry Pi, I have implemented an update that allows you to configure CORS origins in the Docker Compose file. For example, you can use "ALLOWED_ORIGINS=*" to enable access from any location.

[hasamba]

i also have the same problem, i tried allowed origins=* - didnt work also tried to add it under frontadd - didnt work

can you please post a working docker-compose.yaml? thanks

[dev-lu]

Try this one with the latest files from the repository. I tested it a couple minutes ago on a Raspberry Pi and it worked for me.

version: "3.8"
services:
  backend:
    build: ./backend
    container_name: backend
    ports:
      - "8000:8000"
  frontend:
    build: ./frontend
    container_name: frontend
    ports:
      - "3000:3000"
    environment:
      - BACKEND_URL=http://<IP_ADDRESS>:8000 # Backend URL without trailing slash
    stdin_open: true
    tty: true

[hasamba]

Try this one with the latest files from the repository. I tested it a couple minutes ago on a Raspberry Pi and it worked for me.

version: "3.8"
services:
  backend:
    build: ./backend
    container_name: backend
    ports:
      - "8000:8000"
  frontend:
    build: ./frontend
    container_name: frontend
    ports:
      - "3000:3000"
    environment:
      - BACKEND_URL=http://<IP_ADDRESS>:8000 # Backend URL without trailing slash
    stdin_open: true
    tty: true

didnt help, the backend url should help in case the backend and frontend does not sit in the same machine, our problem is reaching the UI from remote

[dev-lu]

Is the frontend and backend installed on the same machine where your browser is located? The frontend runs locally in your browser, so if your browser is not installed on the same host as the backend, you will need the backend URL. You can check for CORS errors in your browser console. Have you cloned the latest repository? Otherwise the backend URL will not do anything.

[hasamba]

i cloned the latest repo, i install the entire docker (backend + frontend) on the same machine on azure my browser is at my pc, trying to remotely connect to azure at the backend_url i entered localhost:8000 because as i understand is where the frontend look for the backend

[dev-lu]

When you enter localhost as the backend URL, your browser searches for the backend on your local computer. Instead, you should enter the IP address of your Azure instance. However, please keep in mind that the application has no authentication in place. Therefore, if you deploy it publicly, everyone will have access to it.

[hasamba]

When you enter localhost as the backend URL, your browser searches for the backend on your local computer. Instead, you should enter the IP address of your Azure instance. However, please keep in mind that the application has no authentication in place. Therefore, if you deploy it publicly, everyone will have access to it.

tried that also, i entered my azure instance ip, still getting same error page.

[dev-lu]

Please take a look at your browser console, to see where the frontend is trying to connect to and check if you can access this address from you local machine.

[hasamba]

the frontend indeed tries to connect locally even that the docker-compose.yaml point to my azure ip

[dev-lu]

Maybe Docker is using images that were built in the past. Try docker-compose up --build to rebuild your images.

[hasamba]

Maybe Docker is using images that were built in the past. Try docker-compose up --build to rebuild your images.

tried, same :(

[dev-lu]

The app uses http://localhost:8000/ as a fallback when it's not possible to retrieve the environment variable for the backend. Maybe your system is preventing Docker from setting it. Could you please try manually setting the value for REACT_APP_BACKEND_URL?

On Linux you can use the following command:

export REACT_APP_BACKEND_URL="http://<IP>:<PORT>"

[hasamba]

tried it, same error

[dev-lu]

Sorry, I forgot to mention that you need to set the variable within your Docker container since you're using the Docker Compose setup.

If this approach doesn't work either, navigate to the frontend folder and hardcode the URL in the api.js file.

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://<IP>:<PORT>',
});

export default api;

Not an elegant solution, but I'm running out of ideas.

[hasamba]

both didn't work, maybe it's something in my setup thanks anyway