From 3f42eaa8249a20f0362b9b2cb6c1ecbf992d22b7 Mon Sep 17 00:00:00 2001 From: chris-bateman Date: Mon, 20 Nov 2023 10:37:01 +1100 Subject: [PATCH] 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 978c2254..82d35629 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 a6e362cf..dfa76d9b 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 6380d825..3f7be28b 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 b2be6e14..2843ca46 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