Error occurred while trying to proxy

[mcrot]

Hi all,

I've used this great project several times before, and now it's the first time I'm developing a django project on Windows (always Linux before) and also first time with webpack. I've just started with the fresh project and have difficulties getting the webpack part running.

The documentation states here that I can just run npm run dev in order to run to static asset build loop and the runserver. I haven't changed any code of the project so far. The installation of node modules via npm install worked well.

This is the output of npm run dev:

> triage_client@0.1.0 dev
> webpack serve --config webpack/dev.config.js

<i> [webpack-dev-server] [HPM] Proxy created: /  -> http://django:8000
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.178.64:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\roettgem\Documents\prj\triage-client\public' directory
asset js/vendors-7a074c704afce6023835.js 1.58 MiB [emitted] [immutable] (name: vendors)
asset css/project.f07a59d960b76a7e3438.css 761 KiB [emitted] [immutable] (name: project)
asset js/project-7a074c704afce6023835.js 745 KiB [emitted] [immutable] (name: project)
Entrypoint project 1.47 MiB = css/project.f07a59d960b76a7e3438.css 761 KiB js/project-7a074c704afce6023835.js 745 KiB
Entrypoint vendors 1.58 MiB = js/vendors-7a074c704afce6023835.js
orphan modules 703 KiB (javascript) 975 bytes (runtime) [orphan] 25 modules
runtime modules 1.94 KiB 10 modules
modules by path ./node_modules/ 419 KiB
  modules by path ./node_modules/@popperjs/core/lib/ 76.6 KiB 60 modules
  modules by path ./node_modules/webpack-dev-server/client/ 76.3 KiB 16 modules
  modules by path ./node_modules/html-entities/lib/*.js 115 KiB 4 modules
  modules by path ./node_modules/webpack/hot/*.js 1.44 KiB 2 modules
  + 3 modules
modules by path ./triage_client/static/ 170 bytes (javascript) 301 KiB (css/mini-extract)
  modules by path ./triage_client/static/js/*.js 120 bytes
    ./triage_client/static/js/project.js 76 bytes [built] [code generated]
    ./triage_client/static/js/vendors.js 44 bytes [built] [code generated]
  modules by path ./triage_client/static/sass/*.scss 50 bytes (javascript) 301 KiB (css/mini-extract)
    ./triage_client/static/sass/project.scss 50 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./triage_client/static/sass/project.scss 301 KiB [built] [code generated]
webpack 5.82.0 compiled successfully in 6616 ms

This looks good to me, but when I try to access http://localhost:3000, I get the following error message:

<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:3000/ to http://django:8000/ [ENOTFOUND] (https://nodejs.org/api/errors.html#errors_common_system_errors)

I can run python manage.py runserver without problems, so the database is found and the requirements have been installed.

My question: How can npm run dev resolve the reference to the django host? Or is npm run dev only applicable in a Docker context? How could I resolve this issue? I don't fully understand the setup, I guess. Since I'm new to webpack, I'm probably missing sth.

[mcrot]

Addition: If I change the proxy entry in webpack/dev.config.js to

proxy: {
      // '/': 'http://django:8000',
      '/': 'http://localhost:8000'
    },

and start python manage.py runserver in another powershell, the application is working.
I don't understand, how is it expected to run only with npm run dev and http://django:8000 as proxy as written in the docs.

[foarsitter]

The django proxy is used in a docker environment. In docker networking each container is accessible through there service name defined in the docker-compose file (local.yml or production.yml).

[browniebroke]

@foarsitter is right. Are you using Docker or not in your project?

[mcrot]

Ah okay, thanks @foarsitter and @browniebroke !

Yes, I'd like to use Docker on my laptop, but it's currently not possible - I haven't managed yet to install it (wsl etc.) on by corporate Windows laptop. I've chosen Docker during setup, because I'll need it for deployment on the target machine.

When reading the docs here, I misunderstood that npm run dev could be entered manually without a docker context.
If I could use docker compose, the command npm run dev would be started implicitly via local.yaml, so I won't need to
enter them manually.

However, since I don't have Docker on my development machine yet, is there a proposed way how to start my application then
for development? Now, when I just try python manage.py runserver, the static files are missing, but they are served when using npm run dev additionally in parallel. Is this the best way given that I've specified "webpack" during setup?

[foarsitter]

Just run npm run dev in another terminal alongside python manage.py runserver. With the addition you made in webpack/dev.config.js this should work and is the way to go.