From 3f42eaa8249a20f0362b9b2cb6c1ecbf992d22b7 Mon Sep 17 00:00:00 2001 From: chris-bateman Date: Mon, 20 Nov 2023 10:37:01 +1100 Subject: [PATCH 1/5] Upgrade Node 14 to Node 16 Upgrade Node from 14 to 16 and associated packages and WebPack config --- Dockerfile | 9 ++- app/plugins/templates/webpack.config.js.tmpl | 36 ++++++------ package.json | 10 ++-- webpack.config.js | 58 +++++++++++--------- 4 files changed, 61 insertions(+), 52 deletions(-) diff --git a/Dockerfile b/Dockerfile index 978c22543..82d356298 100644 --- a/Dockerfile +++ b/Dockerfile @@ -2,6 +2,7 @@ FROM ubuntu:21.04 MAINTAINER Piero Toffanin ARG TEST_BUILD +ARG DEBIAN_FRONTEND=noninteractive ENV PYTHONUNBUFFERED 1 ENV PYTHONPATH $PYTHONPATH:/webodm ENV PROJ_LIB=/usr/share/proj @@ -13,9 +14,13 @@ WORKDIR /webodm # Use old-releases for 21.04 RUN printf "deb http://old-releases.ubuntu.com/ubuntu/ hirsute main restricted\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute-updates main restricted\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute universe\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute-updates universe\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute multiverse\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute-updates multiverse\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute-backports main restricted universe multiverse" > /etc/apt/sources.list -# Install Node.js +# Install Node.js using new Node install method RUN apt-get -qq update && apt-get -qq install -y --no-install-recommends wget curl && \ - wget --no-check-certificate https://deb.nodesource.com/setup_14.x -O /tmp/node.sh && bash /tmp/node.sh && \ + apt-get install -y ca-certificates gnupg && \ + mkdir -p /etc/apt/keyrings && \ + curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \ + NODE_MAJOR=16 && \ + echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && \ apt-get -qq update && apt-get -qq install -y nodejs && \ # Install Python3, GDAL, PDAL, nginx, letsencrypt, psql apt-get -qq update && apt-get -qq install -y --no-install-recommends python3 python3-pip python3-setuptools python3-wheel git g++ python3-dev python2.7-dev libpq-dev binutils libproj-dev gdal-bin pdal libgdal-dev python3-gdal nginx certbot gettext-base cron postgresql-client-13 gettext tzdata && \ diff --git a/app/plugins/templates/webpack.config.js.tmpl b/app/plugins/templates/webpack.config.js.tmpl index a6e362cf1..dfa76d9bb 100644 --- a/app/plugins/templates/webpack.config.js.tmpl +++ b/app/plugins/templates/webpack.config.js.tmpl @@ -6,7 +6,7 @@ process.env.NODE_PATH = webodmRoot + "node_modules"; require("module").Module._initPaths(); let path = require("path"); -let ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: 'production', @@ -21,8 +21,9 @@ module.exports = { }, plugins: [ - new ExtractTextPlugin('[name].css', { - allChunks: true + new MiniCssExtractPlugin({ + filename: '[name].css', + chunkFilename: '[id].css' }) ], @@ -34,7 +35,7 @@ module.exports = { use: [ { loader: 'babel-loader', - query: { + options: { plugins: [ '@babel/syntax-class-properties', '@babel/proposal-class-properties' @@ -49,22 +50,21 @@ module.exports = { }, { test: /\.s?css$$/, - use: ExtractTextPlugin.extract({ - use: [ - { loader: 'css-loader' }, - { - loader: 'sass-loader', - options: { - implementation: require("sass") - } - } - ] - }) + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + 'sass-loader', + ] }, - { +{ test: /\.(png|jpg|jpeg|svg)/, - loader: "url-loader?limit=100000" - } + use: { + loader: 'url-loader', + options: { + limit: 100000, + }, + }, + }, ] }, diff --git a/package.json b/package.json index 6380d8257..3f7be28bf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "WebODM", - "version": "2.3.0", + "version": "3.0.0", "description": "User-friendly, extendable application and API for processing aerial imagery.", "main": "index.js", "scripts": { @@ -37,7 +37,6 @@ "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.15.1", "exifr": "^6.0.0", - "extract-text-webpack-plugin": "^4.0.0-beta.0", "fbemitter": "^2.1.1", "file-loader": "^0.9.0", "file-saver": "^2.0.2", @@ -56,7 +55,7 @@ "react-dom": "^16.4.0", "react-router": "^4.1.1", "react-router-dom": "^4.1.1", - "react-test-renderer": "^15.6.1", + "react-test-renderer": "^16.14.0", "regenerator-runtime": "^0.11.0", "sass": "^1.22.7", "sass-loader": "^7.1.0", @@ -68,7 +67,8 @@ "uglifyjs-webpack-plugin": "^1.2.7", "url-loader": "^0.5.7", "webpack": "^4.16.2", - "webpack-bundle-tracker": "0.0.93", - "webpack-livereload-plugin": "^2.1.1" + "webpack-bundle-tracker": "0.4.3", + "webpack-livereload-plugin": "3.0.2", + "mini-css-extract-plugin": "1.6.2" } } diff --git a/webpack.config.js b/webpack.config.js index b2be6e149..2843ca463 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,16 +1,17 @@ const webpack = require('webpack'); let path = require("path"); let BundleTracker = require('webpack-bundle-tracker'); -let ExtractTextPlugin = require('extract-text-webpack-plugin'); +let MiniCssExtractPlugin = require("mini-css-extract-plugin"); let LiveReloadPlugin = require('webpack-livereload-plugin'); + const mode = process.argv.indexOf("production") !== -1 ? "production" : "development"; console.log(`Webpack mode: ${mode}`); module.exports = { mode, context: __dirname, - + entry: { main: ['./app/static/app/js/main.jsx'], Console: ['./app/static/app/js/Console.jsx'], @@ -20,30 +21,34 @@ module.exports = { }, output: { - path: path.join(__dirname, './app/static/app/bundles/'), - filename: "[name]-[hash].js" + path: path.join(__dirname, './app/static/app/bundles/'), + filename: "[name]-[hash].js", }, plugins: [ - new LiveReloadPlugin({appendScriptTag: true}), - new BundleTracker({filename: './webpack-stats.json'}), - new ExtractTextPlugin('css/[name]-[hash].css', { - allChunks: true - }) + new LiveReloadPlugin({ appendScriptTag: true }), + new BundleTracker({ + filename: 'webpack-stats.json', + path: path.join(__dirname, './'), + }), + new MiniCssExtractPlugin({ + filename: "[name]-[hash].css", + chunkFilename: "[id].css" + }), ], module: { rules: [ - { - test: /\.jsx?$/, - exclude: /(node_modules|bower_components)/, + { + test: /\.jsx?$/, + exclude: /(node_modules|bower_components)/, use: [ { loader: 'babel-loader', - query: { + options: { plugins: [ - '@babel/syntax-class-properties', - '@babel/proposal-class-properties' + '@babel/syntax-class-properties', + '@babel/proposal-class-properties' ], presets: [ '@babel/preset-env', @@ -55,21 +60,20 @@ module.exports = { }, { test: /\.s?css$/, - use: ExtractTextPlugin.extract({ - use: [ - { loader: 'css-loader' }, - { - loader: 'sass-loader', - options: { - implementation: require("sass") - } - } - ] - }) + use: [ + MiniCssExtractPlugin.loader, + "css-loader", + "sass-loader", + ] }, { test: /\.(png|jpg|jpeg|svg)/, - loader: "url-loader?limit=100000" + use: { + loader: 'url-loader', + options: { + limit: 100000, + }, + }, }, { // shaders From 6ea180dd43c1603ce01381fced934a6f0eec9c84 Mon Sep 17 00:00:00 2001 From: chris-bateman Date: Tue, 21 Nov 2023 10:22:00 +1100 Subject: [PATCH 2/5] Bump to node 18 Upgraded to node 18 and Webpack 5. Package cleanup for webpack 5 --- Dockerfile | 4 ++-- package.json | 5 ++--- webpack.config.js | 8 ++++++-- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/Dockerfile b/Dockerfile index 82d356298..2457c98ca 100644 --- a/Dockerfile +++ b/Dockerfile @@ -19,7 +19,7 @@ RUN apt-get -qq update && apt-get -qq install -y --no-install-recommends wget cu apt-get install -y ca-certificates gnupg && \ mkdir -p /etc/apt/keyrings && \ curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \ - NODE_MAJOR=16 && \ + NODE_MAJOR=18 && \ echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && \ apt-get -qq update && apt-get -qq install -y nodejs && \ # Install Python3, GDAL, PDAL, nginx, letsencrypt, psql @@ -30,7 +30,7 @@ RUN apt-get -qq update && apt-get -qq install -y --no-install-recommends wget cu # Setup cron ln -s /webodm/nginx/crontab /var/spool/cron/crontabs/root && chmod 0644 /webodm/nginx/crontab && service cron start && chmod +x /webodm/nginx/letsencrypt-autogen.sh && \ /webodm/nodeodm/setup.sh && /webodm/nodeodm/cleanup.sh && cd /webodm && \ - npm install --quiet -g webpack@4.16.5 && npm install --quiet -g webpack-cli@4.2.0 && npm install --quiet && webpack --mode production && \ + npm install --quiet -g webpack@5.89.0 && npm install --quiet -g webpack-cli@5.1.4 && npm install --quiet && webpack --mode production && \ echo "UTC" > /etc/timezone && \ python manage.py collectstatic --noinput && \ python manage.py rebuildplugins && \ diff --git a/package.json b/package.json index 3f7be28bf..29f37b316 100644 --- a/package.json +++ b/package.json @@ -58,15 +58,14 @@ "react-test-renderer": "^16.14.0", "regenerator-runtime": "^0.11.0", "sass": "^1.22.7", - "sass-loader": "^7.1.0", + "sass-loader": "13.3.2", "shpjs": "^3.4.2", "sinon": "^4.0.0", "statuses": "^1.3.1", "style-loader": "^0.13.1", "tween.js": "^16.6.0", - "uglifyjs-webpack-plugin": "^1.2.7", "url-loader": "^0.5.7", - "webpack": "^4.16.2", + "webpack": "5.89.0", "webpack-bundle-tracker": "0.4.3", "webpack-livereload-plugin": "3.0.2", "mini-css-extract-plugin": "1.6.2" diff --git a/webpack.config.js b/webpack.config.js index 2843ca463..6b5b20cd0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,6 +23,7 @@ module.exports = { output: { path: path.join(__dirname, './app/static/app/bundles/'), filename: "[name]-[hash].js", + publicPath: '/static/app/bundles/' }, plugins: [ @@ -32,7 +33,7 @@ module.exports = { path: path.join(__dirname, './'), }), new MiniCssExtractPlugin({ - filename: "[name]-[hash].css", + filename: "./css/[name]-[hash].css", chunkFilename: "[id].css" }), ], @@ -85,7 +86,10 @@ module.exports = { resolve: { modules: ['node_modules', 'bower_components'], - extensions: ['.js', '.jsx'] + extensions: ['.js', '.jsx'], + fallback: { + "buffer": false + } }, externals: { From dae49a7b2c20e62d1c56321a06e0a859558417a8 Mon Sep 17 00:00:00 2001 From: chris-bateman Date: Thu, 23 Nov 2023 12:32:35 +1100 Subject: [PATCH 3/5] added buffer package and version change Added buffer as webpack 5 does not use it anymore. Version change in package.json --- package.json | 5 +++-- webpack.config.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 29f37b316..042ae9df1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "WebODM", - "version": "3.0.0", + "version": "2.4.0", "description": "User-friendly, extendable application and API for processing aerial imagery.", "main": "index.js", "scripts": { @@ -68,6 +68,7 @@ "webpack": "5.89.0", "webpack-bundle-tracker": "0.4.3", "webpack-livereload-plugin": "3.0.2", - "mini-css-extract-plugin": "1.6.2" + "mini-css-extract-plugin": "1.6.2", + "buffer": "^6.0.3" } } diff --git a/webpack.config.js b/webpack.config.js index 6b5b20cd0..443ead2b5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -88,7 +88,7 @@ module.exports = { modules: ['node_modules', 'bower_components'], extensions: ['.js', '.jsx'], fallback: { - "buffer": false + buffer: require.resolve('buffer'), } }, From 5ca0cf82db94cbb542ea919e61577c5c7f89110d Mon Sep 17 00:00:00 2001 From: chris-bateman Date: Thu, 23 Nov 2023 12:54:42 +1100 Subject: [PATCH 4/5] bump to node 20 bump to node 20 --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index 2457c98ca..d6f6ea784 100644 --- a/Dockerfile +++ b/Dockerfile @@ -19,7 +19,7 @@ RUN apt-get -qq update && apt-get -qq install -y --no-install-recommends wget cu apt-get install -y ca-certificates gnupg && \ mkdir -p /etc/apt/keyrings && \ curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \ - NODE_MAJOR=18 && \ + NODE_MAJOR=20 && \ echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && \ apt-get -qq update && apt-get -qq install -y nodejs && \ # Install Python3, GDAL, PDAL, nginx, letsencrypt, psql From 8ff81f74c4f40347a1c8d92394a7bcd9aa0f35fc Mon Sep 17 00:00:00 2001 From: chris-bateman Date: Mon, 27 Nov 2023 10:22:38 +1100 Subject: [PATCH 5/5] Buffer Polyfill for WP5 --- webpack.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/webpack.config.js b/webpack.config.js index 443ead2b5..5ca2465d1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -36,6 +36,9 @@ module.exports = { filename: "./css/[name]-[hash].css", chunkFilename: "[id].css" }), + new webpack.ProvidePlugin({ + Buffer: ['buffer', 'Buffer'], + }), ], module: {