diff --git a/Dockerfile b/Dockerfile index 978c22543..d6f6ea784 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=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 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 && \ @@ -25,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/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..042ae9df1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "WebODM", - "version": "2.3.0", + "version": "2.4.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,19 +55,20 @@ "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", + "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-bundle-tracker": "0.0.93", - "webpack-livereload-plugin": "^2.1.1" + "webpack": "5.89.0", + "webpack-bundle-tracker": "0.4.3", + "webpack-livereload-plugin": "3.0.2", + "mini-css-extract-plugin": "1.6.2", + "buffer": "^6.0.3" } } diff --git a/webpack.config.js b/webpack.config.js index b2be6e149..5ca2465d1 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,38 @@ 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", + publicPath: '/static/app/bundles/' }, 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: "./css/[name]-[hash].css", + chunkFilename: "[id].css" + }), + new webpack.ProvidePlugin({ + Buffer: ['buffer', 'Buffer'], + }), ], 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 +64,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 @@ -81,7 +89,10 @@ module.exports = { resolve: { modules: ['node_modules', 'bower_components'], - extensions: ['.js', '.jsx'] + extensions: ['.js', '.jsx'], + fallback: { + buffer: require.resolve('buffer'), + } }, externals: {