cookiecutter/cookiecutter-django
1
1
Fork 0
mirror of https://github.com/cookiecutter/cookiecutter-django.git synced 2025-02-23 06:50:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added webpack tip for port 3000 instead of 8000 in developing-locally… (#4413)

Browse Source 
* Added webpack tip for port 3000 instead of 8000 in developing-locally.rst

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

---------

Co-authored-by: Bruno Alla <alla.brunoo@gmail.com>
This commit is contained in:
villancikos 2023-07-10 11:35:57 -06:00 committed by GitHub
parent 8076e8cee8
commit 1507360b1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 7 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

@ -80,10 +80,12 @@ First things first.
$ python manage.py runserver 0.0.0.0:8000
or if you're running asynchronously: ::
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,9 +187,12 @@ 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.
#. Access your application at the address of the ``node`` service in order to see your correct styles. This is http://localhost:3000 by default.
.. 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.
.. 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``.
.. _Node.js: http://nodejs.org/download/
.. _Sass: https://sass-lang.com/