From 9f359939a9c0f6342b97e2e5705d45829f70da78 Mon Sep 17 00:00:00 2001 From: Bruno Alla Date: Tue, 16 Nov 2021 20:29:43 +0000 Subject: [PATCH] Upgrade JS dependencies and upgrade to node 16 (#3400) --- .github/workflows/ci.yml | 7 ++++- docs/developing-locally.rst | 20 +++++++++++-- docs/live-reloading-and-sass-compilation.rst | 24 ---------------- tests/test_bare.sh | 10 +++++++ .../compose/local/node/Dockerfile | 2 +- .../compose/production/django/Dockerfile | 2 +- {{cookiecutter.project_slug}}/gulpfile.js | 2 +- {{cookiecutter.project_slug}}/package.json | 28 ++++++++++--------- .../templates/base.html | 4 +-- 9 files changed, 54 insertions(+), 45 deletions(-) delete mode 100644 docs/live-reloading-and-sass-compilation.rst diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 169af527..cb3a9660 100644 --- a/.github/workflows/ci.yml +++ b/.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 }} diff --git a/docs/developing-locally.rst b/docs/developing-locally.rst index 88a71b30..a9a54a03 100644 --- a/docs/developing-locally.rst +++ b/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 -bit of preparation, see :ref:`sass-compilation-live-reload`. +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. + +#. 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 ------- diff --git a/docs/live-reloading-and-sass-compilation.rst b/docs/live-reloading-and-sass-compilation.rst deleted file mode 100644 index a55b4fd8..00000000 --- a/docs/live-reloading-and-sass-compilation.rst +++ /dev/null @@ -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/ diff --git a/tests/test_bare.sh b/tests/test_bare.sh index 1f52d91b..53162f91 100755 --- a/tests/test_bare.sh +++ b/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 + diff --git a/{{cookiecutter.project_slug}}/compose/local/node/Dockerfile b/{{cookiecutter.project_slug}}/compose/local/node/Dockerfile index f9976e20..8062fa68 100644 --- a/{{cookiecutter.project_slug}}/compose/local/node/Dockerfile +++ b/{{cookiecutter.project_slug}}/compose/local/node/Dockerfile @@ -1,4 +1,4 @@ -FROM node:10-stretch-slim +FROM node:16-bullseye-slim WORKDIR /app diff --git a/{{cookiecutter.project_slug}}/compose/production/django/Dockerfile b/{{cookiecutter.project_slug}}/compose/production/django/Dockerfile index fa969f1c..1dd47a2f 100644 --- a/{{cookiecutter.project_slug}}/compose/production/django/Dockerfile +++ b/{{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} diff --git a/{{cookiecutter.project_slug}}/gulpfile.js b/{{cookiecutter.project_slug}}/gulpfile.js index 06d2cde1..387a137a 100644 --- a/{{cookiecutter.project_slug}}/gulpfile.js +++ b/{{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 diff --git a/{{cookiecutter.project_slug}}/package.json b/{{cookiecutter.project_slug}}/package.json index ed3f724e..ac868d95 100644 --- a/{{cookiecutter.project_slug}}/package.json +++ b/{{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", - "browser-sync": "^2.14.0", - "cssnano": "^4.1.10", - "gulp": "^4.0.0", - "gulp-imagemin": "^5.0.3", + "autoprefixer": "^10.4.0", + "browser-sync": "^2.27.7", + "cssnano": "^5.0.11", + "gulp": "^4.0.2", + "gulp-imagemin": "^7.1.0", "gulp-plumber": "^1.2.1", - "gulp-postcss": "^8.0.0", - "gulp-rename": "^1.2.2", - "gulp-sass": "^4.0.2", - "gulp-uglify-es": "^1.0.4", - "pixrem": "^5.0.0" + "gulp-postcss": "^9.0.1", + "gulp-rename": "^2.0.0", + "gulp-sass": "^5.0.0", + "gulp-uglify-es": "^3.0.0", + "pixrem": "^5.0.0", + "postcss": "^8.3.11", + "sass": "^1.43.4" {%- endif %} }, "engines": { - "node": "10" + "node": "16" }, "browserslist": [ "last 2 versions" diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html index 133a0dcc..408696b2 100644 --- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html +++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html @@ -13,7 +13,7 @@ {% block css %} {%- endraw %}{% if cookiecutter.custom_bootstrap_compilation == "n" %}{% raw %} - + {%- endraw %}{% endif %}{% raw %} @@ -37,7 +37,7 @@ {%- endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %} {%- endraw %}{% else %}{% raw %} - + {%- endraw %}{% endif %}{% raw %}