From 1507360b1f5632db86dc05eee9113541c6078275 Mon Sep 17 00:00:00 2001 From: villancikos Date: Mon, 10 Jul 2023 11:35:57 -0600 Subject: [PATCH] =?UTF-8?q?Added=20webpack=20tip=20for=20port=203000=20ins?= =?UTF-8?q?tead=20of=208000=20in=20developing-locally=E2=80=A6=20(#4413)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- docs/developing-locally-docker.rst | 9 ++++++++- docs/developing-locally.rst | 19 +++++++++++++------ 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/developing-locally-docker.rst b/docs/developing-locally-docker.rst index 3dbe6e47..680f249d 100644 --- a/docs/developing-locally-docker.rst +++ b/docs/developing-locally-docker.rst @@ -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 ----------------------------- diff --git a/docs/developing-locally.rst b/docs/developing-locally.rst index b79033aa..88c8b320 100644 --- a/docs/developing-locally.rst +++ b/docs/developing-locally.rst @@ -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 ` 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/