yarn dev: Error: Must provide a proper URL as target at ProxyServer.<anonymous>

[lincolnneu]

Describe the bug In yarn dev mode, opening http://localhost:8010/ run into

Error: Must provide a proper URL as target
    at ProxyServer.<anonymous> (/label-studio/web/node_modules/http-proxy/lib/http-proxy/index.js:69:35)
    at HttpProxyMiddleware.middleware (/label-studio/web/node_modules/http-proxy-middleware/dist/http-proxy-middleware.js:22:32)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

To Reproduce Steps to reproduce the behavior:

1. Install for local development

Download latest dev branch. Following the READM.md in under web folder https://github.com/HumanSignal/label-studio/blob/0f5a47873a24080f74e3edf50cf3cbee96ef98a0/web/README.md#installation-instructions

yarn install --frozen-lockfile

create the .env (with the same content as .env.development From the web directory: Run yarn dev and wait till

webpack compiled successfully

2. Go to http://localhost:8010
3. The yarn session will show the error msg reported above, and the browser also shows the same error msg.

Expected behavior yarn dev should result in working frontend session, and http://localhost:8010 should show the label-studio UI

Environment (please complete the following information):

• Ubuntu 22.04.1 LTS
• Browser: Chrome
• Label Studio Version origin/develop e4c2721131e1d4b62319b42410d0a8c06ec533fd

[heidi-humansignal]

Hello,

The error you're encountering indicates that the frontend development server's proxy configuration lacks a proper target URL. This usually happens when the backend server is not running or the proxy settings are incorrect. To resolve this issue, please follow these steps:

Step 1: Start the Backend Server

1. Navigate to the root directory of Label Studio where manage.py is located.

2. Start the backend server by running:

   python label_studio/manage.py runserver

By default, this will start the server at http://localhost:8080.

Step 2: Verify the Backend Server is Running

• Open your browser and navigate to http://localhost:8080 to confirm that the backend server is running.

Step 3: Check Frontend Proxy Configuration

1. In the web directory, ensure you have a .env file. If not, create one and copy the contents from .env.development.

2. Open the .env file and verify that the VITE_BACKEND_HOST variable is set correctly:

   VITE_BACKEND_HOST=http://localhost:8080 Adjust the host and port if your backend server is running on a different address.

Thank you, Abu

Comment by Abubakar Saad Workflow Run

[lincolnneu]

Hello,

The error you're encountering indicates that the frontend development server's proxy configuration lacks a proper target URL. This usually happens when the backend server is not running or the proxy settings are incorrect. To resolve this issue, please follow these steps:

Step 1: Start the Backend Server

1. Navigate to the root directory of Label Studio where manage.py is located.
2. Start the backend server by running: python label_studio/manage.py runserver

By default, this will start the server at http://localhost:8080.

Step 2: Verify the Backend Server is Running

• Open your browser and navigate to http://localhost:8080 to confirm that the backend server is running.

Step 3: Check Frontend Proxy Configuration

1. In the web directory, ensure you have a .env file. If not, create one and copy the contents from .env.development.
2. Open the .env file and verify that the VITE_BACKEND_HOST variable is set correctly: VITE_BACKEND_HOST=http://localhost:8080 Adjust the host and port if your backend server is running on a different address.

Thank you, Abu

Comment by Abubakar Saad Workflow Run

Hi, I followed your instruction and added VITE_BACKEND_HOST=http://localhost:8080 under /web/.env and still get the same errors.

I can confirm that the drango backend is running as the UI shows up when visiting http://localhost:8080. However, when visiting the frontend http://localhost:8010, it shows the error mentioned in this issue.

I also tried running the django backend and yarn dev from a mac, and get the same errors.

[WangCheng0928]

so, how do you solve this? I have the same question~ thanks!

[ArthurAlesi]

having the same issue. even on windows or linux (wsl)

[max82645235]

having the same issue in mac . Error: Must provide a proper URL as target

[faleandroid]

I'm having the same issue.

[Buckler89]

Any update on this? I have the same problem

[max82645235]

I solved the problem by updating the devServer.proxy option in the webpack.config.js file like this:

{ host: "127.0.0.1", // Port for the Webpack dev server port: HMR_PORT, // Enable HMR hot: true, // Allow cross-origin requests from Django headers: { "Access-Control-Allow-Origin": "*" }, static: { directory: path.resolve(__dirname, "../label_studio/core/static/"), publicPath: "/static", }, devMiddleware: { publicPath: ${FRONTEND_HOSTNAME}/react-app/, }, allowedHosts: "all", // Allow access from Django's server proxy: { '/api': { target: ${DJANGO_HOSTNAME}/api, changeOrigin: true, pathRewrite: { '^/api': '' }, secure: false, }, '/': { target: ${DJANGO_HOSTNAME}, changeOrigin: true, secure: false, } }, }

[Buckler89]

thanks, it works!

[heidi-humansignal]

Please try out max82645235 solution and if there are still issues, please let us know. We will try to simplify this.

Thank you, Abu

Comment by Abubakar Saad Workflow Run

[cnhgscc]

          proxy: [
            // {
            //   router: {
            //     "/api": `${DJANGO_HOSTNAME}/api`, // Proxy api requests to Django's server
            //   },
            // },
            {
              context: ["/api"],
              target: `${DJANGO_HOSTNAME}`,
              secure: false,
              changeOrigin: true,
              logLevel: "debug",
            }
          ],

[Bradly-s]

I solved the problem by updating the devServer.proxy option in the webpack.config.js file like this: { host: "127.0.0.1", // Port for the Webpack dev server port: HMR_PORT, // Enable HMR hot: true, // Allow cross-origin requests from Django headers: { "Access-Control-Allow-Origin": "*" }, static: { directory: path.resolve(__dirname, "../label_studio/core/static/"), publicPath: "/static", }, devMiddleware: { publicPath: ${FRONTEND_HOSTNAME}/react-app/, }, allowedHosts: "all", // Allow access from Django's server proxy: { '/api': { target: ${DJANGO_HOSTNAME}/api, changeOrigin: true, pathRewrite: { '^/api': '' }, secure: false, }, '/': { target: ${DJANGO_HOSTNAME}, changeOrigin: true, secure: false, } }, }

I use it, but i get the issue below, how to solve it?

Loading CSS chunk defaultVendors-node_modules_react-datepicker_dist_react-datepicker_css-node_modules_ant-desig-55163c failed. (http://localhost:8010/react-app/defaultVendors-node_modules_react-datepicker_dist_react-datepicker_css-node_modules_ant-desig-55163c.css)

[heidi-humansignal]

Hello Bradly-s,

Please try out this suggestion:

1. Verify the Build Output Paths

• In your revised webpack.config.js, check if the publicPath and static directories match how your chunks (CSS and JS) are referenced.
• For example, if your devMiddleware.publicPath is set to "/react-app/", confirm that the missing CSS file path matches it (e.g., “/react-app/defaultVendors…”).

Thank you, Abu

Comment by Abubakar Saad Workflow Run