[Question] Frontend development, how to hot reload?

[HalkScout]

I followed the developer install instructions here.

After running the dependencies in VSCode and running yarn run start:cvat-ui, it seems as if I need to re-run yarn run start:cvat-ui in order to see my changes. Am I doing something wrong? I made no changes to the code, trying both commit 6b96298 and release v2.17.0.

Specifically, I am trying to edit canvas-layout.tsx with just a console.log('Test'); to see if it works. Editing other files, such as the package.json triggers the reload, but the actual code that I want to work on does not.

I'm new to this, so any help would be appreciated! I tried my best to research Webpack 5 HMR fixes before coming here, and none of the ones I tried worked either.

If any of this matters:

• VSCode is running task: server: debug
• CVAT_UI_HOST is not set
• Testing reload on both 127.0.0.1:3000 and localhost:3000
• Using Windows WSL2 (Ubuntu 22.04.4 LTS)
• Chrome v128.0.6613.85
• Node v20.17.0
• Yarn v1.22.22
• Python 3.10.12

Something else to note, while following the guide I needed to install extra packages:

Error:

Collecting lxml==5.3.0 (from -r cvat/requirements/base.txt (line 173))
  Downloading lxml-5.3.0.tar.gz (3.7 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3.7/3.7 MB 39.7 MB/s eta 0:00:00
  Installing build dependencies ... done
  Getting requirements to build wheel ... error
  error: subprocess-exited-with-error

  × Getting requirements to build wheel did not run successfully.
  │ exit code: 1
  ╰─> [4 lines of output]
      <string>:67: DeprecationWarning: pkg_resources is deprecated as an API. See https://setuptools.pypa.io/en/latest/pkg_resources.html
      Building lxml version 5.3.0.
      Building without Cython.
      Error: Please make sure the libxml2 and libxslt development packages are installed.
      [end of output]

Fixed with:

apt-get install pkg-config libxml2-dev libxmlsec1-dev libxmlsec1-openssl

And removing these lines:

--no-binary lxml
--no-binary xmlsec

See https://github.com/cvat-ai/cvat/commit/ec2807692a788858334293470a3b9cc0c4f0cd24#r145899115 and https://github.com/xmlsec/python-xmlsec

Please let me know if you need any info / logs. Thank you for your time!

EDIT: Included the right link to install instructions & fixed typos, oops!

[bsekachev]

Hot reload works for me out of the box, following the guide. If it does not for you, there is not enough info to understand the root cause.

[HalkScout]

Is there any information that would be helpful? Here are the few errors that I can see:

Docker cvat_opa:

{"level":"error","msg":"Bundle load failed: request failed: Get \"http://cvat-server:8080/api/auth/rules\": dial tcp 172.25.0.6:8080: connect: connection refused","name":"cvat","plugin":"bundle","time":"2024-08-28T15:25:50Z"}

Browser console:

[HalkScout]

It seems that setting WATCHPACK_POLLING=true causes reloading to work, but this is not the same as hot reload to my understanding.

{
  "scripts": {
    "start": "WATCHPACK_POLLING=true webpack serve --env API_URL=http://localhost:7000 --config ./webpack.config.js --mode=development",
  }
}

See: https://github.com/facebook/create-react-app/issues/10253

[bsekachev]

Is there any information that would be helpful? Here are the few errors that I can see:

All these errors are not related to webpack and hot reload.

[HalkScout]

I wish I could help you help me, but I don't know enough to know what logs to provide that would be helpful.

Other than to say that, for some reason, it is not working on my system. What would be your first steps to fix this problem? How can I help?