Upgrade JS dependencies and upgrade to node 16 (#3400)

.github/workflows/ci.yml

@@ -60,6 +60,8 @@ jobs:
         script:
           - name: With Celery
             args: "use_celery=y use_compressor=y"
+          - name: With Gulp
+            args: "js_task_runner=Gulp custom_bootstrap_compilation=y"
 
     name: "${{ matrix.script.name }} Bare metal"
     services:
@@ -83,6 +85,9 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-python@v2
         with:
-          python-version: 3.9
+          python-version: "3.9"
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "16"
       - name: Bare Metal ${{ matrix.script.name }}
         run: sh tests/test_bare.sh ${{ matrix.script.args }}

docs/developing-locally.rst

@@ -154,8 +154,24 @@ To run Celery locally, make sure redis-server is installed (instructions are ava
 Sass Compilation & Live Reloading
 ---------------------------------
 
-If you’d like to take advantage of live reloading and Sass compilation you can do so with a little
+If you've opted for Gulp as JS task runner, 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.
-bit of preparation, see :ref:`sass-compilation-live-reload`.
+
+#. Make sure that `Node.js`_ v16 is installed on your machine.
+#. In the project root, install the JS dependencies with::
+
+    $ npm install
+
+#. Now - with your virtualenv activated - start the application by running::
+
+    $ npm run dev
+
+   The app will now run with live reloading enabled, applying front-end changes dynamically.
+
+.. 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 don NOT need to run Django as your would normally with ``manage.py runserver``.
+
+.. _Node.js: http://nodejs.org/download/
+.. _Sass: https://sass-lang.com/
+.. _live reloading: https://browsersync.io
 
 Summary
 -------

docs/live-reloading-and-sass-compilation.rst

@@ -1,24 +0,0 @@
-.. _sass-compilation-live-reload:
-
-Sass Compilation & Live Reloading
-=================================
-
-If you'd like to take advantage of `live reload`_ and Sass compilation:
-
-- Make sure that nodejs_ is installed. Then in the project root run::
-
-    $ npm install
-
-.. _nodejs: http://nodejs.org/download/
-
-- Now you just need::
-
-    $ npm run dev
-
-The base app will now run as it would with the usual ``manage.py runserver`` but with live reloading and Sass compilation enabled.
-When changing your Sass files, they will be automatically recompiled and change will be reflected in your browser without refreshing.
-
-To get live reloading to work you'll probably need to install an `appropriate browser extension`_
-
-.. _live reload: http://livereload.com/
-.. _appropriate browser extension: http://livereload.com/extensions/

tests/test_bare.sh

@@ -35,3 +35,13 @@ pre-commit run --show-diff-on-failure -a
 
 # run the project's tests
 pytest
+
+if [ -f "package.json" ]
+then
+    npm install
+    if [ -f "gulpfile.js" ]
+    then
+        npm run build
+    fi
+fi
+

{{cookiecutter.project_slug}}/compose/local/node/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10-stretch-slim
+FROM node:16-bullseye-slim
 
 WORKDIR /app
 

{{cookiecutter.project_slug}}/compose/production/django/Dockerfile

@@ -1,7 +1,7 @@
 ARG PYTHON_VERSION=3.9-slim-bullseye
 
 {% if cookiecutter.js_task_runner == 'Gulp' -%}
-FROM node:10-stretch-slim as client-builder
+FROM node:16-bullseye-slim as client-builder
 
 ARG APP_HOME=/app
 WORKDIR ${APP_HOME}

{{cookiecutter.project_slug}}/gulpfile.js

@@ -19,7 +19,7 @@ const plumber = require('gulp-plumber')
 const postcss = require('gulp-postcss')
 const reload = browserSync.reload
 const rename = require('gulp-rename')
-const sass = require('gulp-sass')
+const sass = require('gulp-sass')(require('sass'))
 const spawn = require('child_process').spawn
 const uglify = require('gulp-uglify-es').default
 

{{cookiecutter.project_slug}}/package.json

@@ -5,25 +5,27 @@
   "devDependencies": {
     {% if cookiecutter.js_task_runner == 'Gulp' -%}
     {% if cookiecutter.custom_bootstrap_compilation == 'y' -%}
-    "bootstrap": "5.1.1",
+    "bootstrap": "^5.1.3",
     "gulp-concat": "^2.6.1",
-    "@popperjs/core": "2.9.2",
+    "@popperjs/core": "^2.10.2",
     {% endif -%}
-    "autoprefixer": "^9.4.7",
+    "autoprefixer": "^10.4.0",
-    "browser-sync": "^2.14.0",
+    "browser-sync": "^2.27.7",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.0.11",
-    "gulp": "^4.0.0",
+    "gulp": "^4.0.2",
-    "gulp-imagemin": "^5.0.3",
+    "gulp-imagemin": "^7.1.0",
     "gulp-plumber": "^1.2.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.1",
-    "gulp-rename": "^1.2.2",
+    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.0.2",
+    "gulp-sass": "^5.0.0",
-    "gulp-uglify-es": "^1.0.4",
+    "gulp-uglify-es": "^3.0.0",
-    "pixrem": "^5.0.0"
+    "pixrem": "^5.0.0",
+    "postcss": "^8.3.11",
+    "sass": "^1.43.4"
     {%- endif %}
   },
   "engines": {
-    "node": "10"
+    "node": "16"
   },
   "browserslist": [
     "last 2 versions"

{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html

@@ -13,7 +13,7 @@
     {% block css %}
     {%- endraw %}{% if cookiecutter.custom_bootstrap_compilation == "n" %}{% raw %}
     <!-- Latest compiled and minified Bootstrap CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     {%- endraw %}{% endif %}{% raw %}
 
     <!-- Your stuff: Third-party CSS libraries go here -->
@@ -37,7 +37,7 @@
       {%- endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
       {%- endraw %}{% else %}{% raw %}
       <!-- Bootstrap JS -->
-      <script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+      <script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
       <!-- Your stuff: Third-party javascript libraries go here -->
       {%- endraw %}{% endif %}{% raw %}