Django can't find assetss generated by Webpack

[acyment]

What happened?

I created a new project using Webpack, tried to run it locally and no JS nor CSS are found.

What should've happened instead?

JS and CSS files should have been loaded and used by the page

Additional details

• Host system configuration:

  • Cookiecutter 2.1.1
  • Ventura 13.5
  • Python 3.11.4
  • Docker version 24.0.2, build cb74dfc
  • Docker Compose version v2.19.1

  "cookiecutter": {
    "project_name": "Cyment.com",
    "project_slug": "cyment_com",
    "description": "Web de cyment.com",
    "author_name": "Alan Cyment",
    "domain_name": "cyment.com",
    "email": "alan@cyment.com",
    "version": "0.1.0",
    "open_source_license": "Not open source",
    "username_type": "email",
    "timezone": "UTC",
    "windows": "n",
    "editor": "VS Code",
    "use_docker": "y",
    "postgresql_version": "15",
    "cloud_provider": "None",
    "mail_service": "Other SMTP",
    "use_async": "n",
    "use_drf": "n",
    "frontend_pipeline": "Webpack",
    "use_celery": "n",
    "use_mailhog": "y",
    "use_sentry": "n",
    "use_whitenoise": "y",
    "use_heroku": "n",
    "ci_tool": "Github",
    "keep_local_envs_in_vcs": "y",
    "debug": "y",
    "_template": "https://github.com/cookiecutter/cookiecutter-django",
    "_output_dir": "/Users/acyment/dev/nuevo"
  }
}⏎

Extracted from Docker output:

cyment_com_local_node      | <i> [webpack-dev-server] [HPM] Proxy created: /  -> http://django:8000
cyment_com_local_node      | <i> [webpack-dev-server] Project is running at:
cyment_com_local_node      | <i> [webpack-dev-server] Loopback: http://localhost:3000/
cyment_com_local_node      | <i> [webpack-dev-server] Content not from webpack is served from '/app/public' directory
cyment_com_local_node      | asset js/vendors-8494b38a89cf0f574904.js 1.55 MiB [emitted] [immutable] (name: vendors)
cyment_com_local_node      | asset css/project.1c48eb8cb5559be06b89.css 856 KiB [emitted] [immutable] (name: project)
cyment_com_local_node      | asset js/project-8494b38a89cf0f574904.js 748 KiB [emitted] [immutable] (name: project)
cyment_com_local_node      | Entrypoint project 1.57 MiB = css/project.1c48eb8cb5559be06b89.css 856 KiB js/project-8494b38a89cf0f574904.js 748 KiB
cyment_com_local_node      | Entrypoint vendors 1.55 MiB = js/vendors-8494b38a89cf0f574904.js
cyment_com_local_node      | orphan modules 781 KiB (javascript) 975 bytes (runtime) [orphan] 28 modules
cyment_com_local_node      | runtime modules 1.94 KiB 10 modules
cyment_com_local_node      | modules by path ./node_modules/ 412 KiB
cyment_com_local_node      |   modules by path ./node_modules/@popperjs/core/lib/ 68.5 KiB 57 modules
cyment_com_local_node      |   modules by path ./node_modules/webpack-dev-server/client/ 76.3 KiB 16 modules
cyment_com_local_node      |   modules by path ./node_modules/html-entities/lib/*.js 115 KiB 4 modules
cyment_com_local_node      |   modules by path ./node_modules/webpack/hot/*.js 1.96 KiB 2 modules
cyment_com_local_node      |   + 3 modules
cyment_com_local_node      | modules by path ./cyment_com/static/ 170 bytes (javascript) 356 KiB (css/mini-extract)
cyment_com_local_node      |   modules by path ./cyment_com/static/js/*.js 120 bytes
cyment_com_local_node      |     ./cyment_com/static/js/project.js 76 bytes [built] [code generated]
cyment_com_local_node      |     ./cyment_com/static/js/vendors.js 44 bytes [built] [code generated]
cyment_com_local_node      |   modules by path ./cyment_com/static/sass/*.scss 50 bytes (javascript) 356 KiB (css/mini-extract)
cyment_com_local_node      |     ./cyment_com/static/sass/project.scss 50 bytes [built] [code generated]
cyment_com_local_node      |     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!./cyment_com/static/sass/project.scss 356 KiB [built] [code generated]
cyment_com_local_node      | webpack 5.88.2 compiled successfully in 6090 ms
cyment_com_local_django    | 172.24.0.1 - - [09/Aug/2023 19:23:18] "GET / HTTP/1.1" 200 -
cyment_com_local_django    | 172.24.0.1 - - [09/Aug/2023 19:23:18] "GET /static/debug_toolbar/css/toolbar.css HTTP/1.1" 200 -
cyment_com_local_django    | 172.24.0.1 - - [09/Aug/2023 19:23:18] "GET /static/debug_toolbar/js/toolbar.js HTTP/1.1" 200 -
cyment_com_local_django    | 172.24.0.1 - - [09/Aug/2023 19:23:18] "GET /static/debug_toolbar/js/utils.js HTTP/1.1" 200 -
cyment_com_local_django    | Not Found: /static/webpack_bundles/css/project.1c48eb8cb5559be06b89.css
cyment_com_local_django    | WARNING 2023-08-09 19:23:18,637 log 9 281472753721824 Not Found: /static/webpack_bundles/css/project.1c48eb8cb5559be06b89.css
cyment_com_local_django    | 172.24.0.1 - - [09/Aug/2023 19:23:18] "
cyment_com_local_django    | GET /static/webpack_bundles/css/project.1c48eb8cb5559be06b89.css HTTP/1.1" 404 -
cyment_com_local_django    | Not Found: /static/webpack_bundles/js/project-8494b38a89cf0f574904.js
cyment_com_local_django    | WARNING 2023-08-09 19:23:18,638 log 9 281473249505760 Not Found: /static/webpack_bundles/js/project-8494b38a89cf0f574904.js
cyment_com_local_django    | 172.24.0.1 - - [09/Aug/2023 19:23:18] "GET /static/webpack_bundles/js/project-8494b38a89cf0f574904.js HTTP/1.1" 404 -
cyment_com_local_django    | Not Found: /static/webpack_bundles/js/vendors-8494b38a89cf0f574904.js
cyment_com_local_django    | WARNING 2023-08-09 19:23:18,643 log 9 281472762114528 Not Found: /static/webpack_bundles/js/vendors-8494b38a89cf0f574904.js
cyment_com_local_django    | 172.24.0.1 - - [09/Aug/2023 19:23:18] "GET /static/webpack_bundles/js/vendors-8494b38a89cf0f574904.js HTTP/1.1" 404 -
cyment_com_local_django    | 172.24.0.1 - - [09/Aug/2023 19:23:18] "GET /static/debug_toolbar/css/print.css HTTP/1.1" 200 -

[browniebroke]

Which port did you use to access the page, 3000 or 8000? With Gulp and Webpack one needs to use the port from node service, as explained in our docs: https://cookiecutter-django.readthedocs.io/en/latest/developing-locally-docker.html#using-webpack-or-gulp

[acyment]

My bad :(((((

Thanks so much for the hard work (and the patience!!!)