cookiecutter/cookiecutter-django
1
1
Fork 0
mirror of https://github.com/cookiecutter/cookiecutter-django.git synced 2025-08-14 00:44:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

Rework Webpack/Gulp documentation to be more consistent across the board

Browse Source
This commit is contained in:
Bruno Alla 2023-07-10 18:11:30 +01:00
parent a5c50f6dd1
commit 47159c6129
No known key found for this signature in database
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/developing-locally-docker.rst
View File

@ -66,6 +66,8 @@ To run in a detached (background) mode, just::
$ docker-compose up -d
The site should start and be accessible at http://localhost:3000 if you selected Webpack or Gulp as frontend pipeline and http://localhost:8000 otherwise.
Execute Management Commands
---------------------------
@ -229,7 +231,12 @@ By default, it's enabled both in local and production environments (``local.yml`
Using Webpack or Gulp
~~~~~~~~~~~~~~~~~~~~~
When using Webpack or Gulp as the ``frontend_pipeline`` option, you should access your application at the address of the ``node`` service in order to see your correct styles. This is http://localhost:3000 by default. When using any of the other ``frontend_pipeline`` options, you should use the address of the ``django`` service, http://localhost:8000.
If you've opted for Gulp or Webpack as front-end pipeline, the project comes configured with `Sass`_ compilation and `live reloading`_. As you change your Sass/JS source files, the task runner will automatically rebuild the corresponding CSS and JS assets and reload them in your browser without refreshing the page.
The stack comes with a dedicated node service to build the static assets, watch for changes and proxy requests to the Django app with live reloading scripts injected in the response. For everything to work smoothly, you need to access the application at the port served by the node service, which is http://localhost:3000 by default.
.. _Sass: https://sass-lang.com/
.. _live reloading: https://browsersync.io
Developing locally with HTTPS
-----------------------------

19
docs/developing-locally.rst
View File

@ -84,6 +84,8 @@ or if you're running asynchronously: ::
$ uvicorn config.asgi:application --host 0.0.0.0 --reload --reload-include '*.html'
If you've opted for Webpack or Gulp as frontend pipeline, please see the :ref:`dedicated section <bare-metal-webpack-gulp>` below.
.. _PostgreSQL: https://www.postgresql.org/download/
.. _Redis: https://redis.io/download
.. _CookieCutter: https://github.com/cookiecutter/cookiecutter
@ -169,10 +171,12 @@ You can also use Django admin to queue up tasks, thanks to the `django-celerybea
.. _django-celerybeat: https://django-celery-beat.readthedocs.io/en/latest/
Sass Compilation & Live Reloading
---------------------------------
.. _bare-metal-webpack-gulp:
If you've opted for Gulp or Webpack as front-end pipeline, the project comes configured with `Sass`_ compilation and `live reloading`_. As you change you Sass/JS source files, the task runner will automatically rebuild the corresponding CSS and JS assets and reload them in your browser without refreshing the page.
Using Webpack or Gulp
---------------------
If you've opted for Gulp or Webpack as front-end pipeline, the project comes configured with `Sass`_ compilation and `live reloading`_. As you change your Sass/JS source files, the task runner will automatically rebuild the corresponding CSS and JS assets and reload them in your browser without refreshing the page.
#. Make sure that `Node.js`_ v18 is installed on your machine.
#. In the project root, install the JS dependencies with::
@ -183,14 +187,11 @@ If you've opted for Gulp or Webpack as front-end pipeline, the project comes con
$ npm run dev
The app will now run with live reloading enabled, applying front-end changes dynamically.
This will start 2 processes in parallel: the static assets build loop on one side, and the Django server on the other.
.. note:: The task will start 2 processes in parallel: the static assets build loop on one side, and the Django server on the other. You do NOT need to run Django as your would normally with ``manage.py runserver``.
#. Access your application at the address of the ``node`` service in order to see your correct styles. This is http://localhost:3000 by default.
Using Webpack or Gulp
~~~~~~~~~~~~~~~~~~~~~
When using Webpack or Gulp as the ``frontend_pipeline`` option, you should access your application at the address of the ``node`` service in order to see your correct styles. This is http://localhost:3000 by default. When using any of the other ``frontend_pipeline`` options, you should use the address of the ``django`` service, http://localhost:8000.
.. note:: Do NOT access the application using the Django port (8000 by default), as it will result in broken styles and 404s when accessing static assets.
.. _Node.js: http://nodejs.org/download/