Upgrade webpack config and inline svg-s

.dockerignore

@@ -1,3 +1,6 @@
 .dockerignore
 Dockerfile
 **/node_modules
+node_modules
+**/package-lock.json
+package-lock.json

Dockerfile

@@ -1,15 +1,20 @@
 FROM node:14.13.0-alpine3.10 as build
+RUN npm install -g npm@7 
 
+WORKDIR /app
 COPY . .
-RUN npm i -g concurrently
+
-RUN yarn && yarn run build
+RUN npm install --legacy-peer-deps
+RUN npm run build
 
 
 FROM node:14.13.0-alpine3.10
 
+WORKDIR /app
+
 ENV NODE_ENV=production
 COPY backend/package.json .
-RUN npm i --production
+RUN npm install --production
 
 COPY --from=build backend/dist/main.js main.js 
 

backend/package.json

@@ -6,7 +6,7 @@
   "author": "András Schmelczer <andras@schmelczer.dev> (https://schmelczer.dev/)",
   "main": "dist/main.js",
   "bin": {
-    "declared-server": "./dist/main.js"
+    "declared-server": "dist/main.js"
   },
   "scripts": {
     "build": "npx webpack --mode production",
@@ -17,15 +17,15 @@
     "@types/config": "0.0.36",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "gl-matrix": "^3.3.0",
     "minimist": "^1.2.5",
     "socket.io": "^2.3.0",
-    "uws": "^10.148.1",
+    "uws": "^10.148.1"
-    "gl-matrix": "^3.3.0"
   },
   "devDependencies": {
-    "@types/minimist": "^1.2.0",
     "@types/cors": "^2.8.7",
     "@types/express": "^4.17.8",
+    "@types/minimist": "^1.2.0",
     "@types/node": "^14.11.2",
     "@types/socket.io": "^2.1.11",
     "@typescript-eslint/eslint-plugin": "^3.9.1",
@@ -39,17 +39,16 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-unused-imports": "^0.1.3",
     "file-loader": "^6.1.0",
-    "ts-loader": "^8.0.3",
     "nodemon": "^2.0.4",
-    "webpack-node-externals": "^2.5.2",
     "prettier": "^2.0.5",
     "raw-loader": "^4.0.1",
     "resolve-url-loader": "^3.1.1",
-    "shared": "0.0.0",
     "terser-webpack-plugin": "^2.3.5",
+    "ts-loader": "^8.0.3",
     "typescript": "^4.0.3",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
+    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "webpack-node-externals": "^2.5.2"
   }
 }

backend/tsconfig.json

@@ -1,9 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "sourceMap": true,
+    "skipLibCheck": true,
-    "declaration": true,
-    "declarationMap": true,
     "target": "es6",
     "esModuleInterop": true,
     "strict": true,

frontend/package.json

@@ -20,47 +20,30 @@
     "@types/socket.io-client": "^1.4.34",
     "@typescript-eslint/eslint-plugin": "^3.9.1",
     "@typescript-eslint/parser": "^3.9.1",
-    "autoprefixer": "^9.8.5",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.5.2",
+    "common-config-webpack-plugin": "^2.0.1",
-    "cssnano": "^4.1.10",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-json-format": "^2.0.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-unused-imports": "^0.1.3",
-    "file-loader": "^6.1.0",
     "firebase": "^7.22.0",
     "gl-matrix": "^3.3.0",
-    "html-webpack-inline-source-plugin": "0.0.10",
+    "html-webpack-inline-svg-plugin": "^2.3.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.5.0",
-    "image-webpack-loader": "^6.0.0",
+    "image-config-webpack-plugin": "^2.0.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
     "prettier": "^2.0.5",
-    "raw-loader": "^4.0.1",
-    "resolve-url-loader": "^3.1.1",
-    "ts-loader": "^8.0.3",
-    "sass": "^1.26.3",
-    "sass-loader": "^9.0.2",
-    "sdf-2d": "^0.6.0",
-    "shared": "0.0.0",
     "resize-observer-polyfill": "^1.5.1",
+    "resolve-url-loader": "^3.1.1",
+    "scss-config-webpack-plugin": "^2.0.0",
+    "sdf-2d": "^0.6.0",
     "socket.io-client": "^2.3.1",
-    "source-map-loader": "^1.1.0",
+    "source-map-loader": "^1.1.1",
-    "svg-url-loader": "^6.0.0",
+    "ts-config-webpack-plugin": "^2.0.0",
-    "terser-webpack-plugin": "^4.2.2",
     "typescript": "^4.0.3",
     "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.11.0"
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
   }
 }

frontend/src/index.html

@@ -50,20 +50,20 @@
       <section id="settings">
         <label for="enable-relative-movement">
           <input id="enable-relative-movement" type="checkbox" />
-          <img alt="a dashed circle" src="static/circle.svg" />
+          <img alt="a dashed circle" src="../static/circle.svg" />
         </label>
 
         <label for="enable-vibration">
           <input id="enable-vibration" type="checkbox" />
-          <img alt="vibrating mobile" src="static/vibrate.svg" />
+          <img alt="vibrating mobile" src="../static/vibrate.svg" />
         </label>
 
         <label for="enable-sounds">
           <input id="enable-sounds" type="checkbox" />
-          <img alt="speaker with sound waves" src="static/volume.svg" />
+          <img alt="speaker with sound waves" src="../static/volume.svg" />
         </label>
 
-        <img id="logout" alt="logout" src="static/logout.svg" />
+        <img id="logout" alt="logout" src="../static/logout.svg" />
       </section>
     </div>
 
@@ -72,7 +72,7 @@
         id="toggle-settings"
         class="icon"
         alt="toggle-settings"
-        src="static/settings.svg"
+        src="../static/settings.svg"
       />
     </div>
 
@@ -80,13 +80,13 @@
       class="full-screen-controllers"
       id="minimize"
       alt="minimize-application"
-      src="static/minimize.svg"
+      src="../static/minimize.svg"
     />
     <img
       class="full-screen-controllers"
       id="maximize"
       alt="maximize-application"
-      src="static/maximize.svg"
+      src="../static/maximize.svg"
     />
   </body>
 </html>

frontend/src/index.ts

@@ -11,15 +11,12 @@ import { CharacterView } from './scripts/objects/character-view';
 import { LampView } from './scripts/objects/lamp-view';
 import { ProjectileView } from './scripts/objects/projectile-view';
 import { PlanetView } from './scripts/objects/planet-view';
-import './styles/main.scss';
+import './main.scss';
 import { LandingPageBackground } from './scripts/landing-page-background';
 import { JoinFormHandler } from './scripts/join-form-handler';
 import { handleFullScreen } from './scripts/handle-full-screen';
 import { Game } from './scripts/game';
 import { PlayerCharacterView } from './scripts/objects/player-character-view';
-import '../static/settings.svg';
-import '../static/minimize.svg';
-import '../static/maximize.svg';
 import { handleInsights } from './scripts/handle-insights';
 import { getInsightsFromRenderer } from './scripts/get-insights-from-renderer';
 import { Renderer } from 'sdf-2d';
@@ -90,7 +87,6 @@ const toggleSettings = () =>
 
 const applyServerContainerShadows = () => {
   const { scrollHeight, clientHeight, scrollTop } = serverContainer;
-  console.log(scrollHeight, clientHeight, scrollTop);
   if (scrollHeight > clientHeight) {
     serverContainer.className = 'scroll';
     if (scrollTop === 0) {

frontend/src/main.scss

@@ -1,8 +1,8 @@
-@import './vars.scss';
+@import './styles/vars.scss';
-@import './button.scss';
+@import './styles/button.scss';
-@import './form.scss';
+@import './styles/form.scss';
-@import './mixins.scss';
+@import './styles/mixins.scss';
-@import './settings.scss';
+@import './styles/settings.scss';
 
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
 
@@ -148,13 +148,14 @@ body {
     &::-webkit-scrollbar-track,
     &::-webkit-scrollbar {
       background-color: transparent;
-      width: 2px;
+      width: 3px;
     }
     &::-webkit-scrollbar-thumb {
       background-color: $accent;
       border-radius: $border-radius;
     }
 
+    transition: box-shadow $animation-time;
     &.scroll {
       box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4),
         inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);

frontend/src/styles/settings.scss

@@ -6,7 +6,6 @@
   position: absolute;
   display: flex;
   justify-content: center;
-
   top: 0;
   right: 0;
 }
@@ -16,17 +15,17 @@
   cursor: pointer;
 
   #toggle-settings {
-    @include square($large-icon);
-    @media (max-width: $breakpoint) {
-      @include square($small-icon);
-    }
-
     animation: spin 32s linear infinite;
     @keyframes spin {
       100% {
         transform: rotate(360deg);
       }
     }
+
+    @include square($large-icon);
+    @media (max-width: $breakpoint) {
+      @include square($small-icon);
+    }
   }
 }
 
@@ -59,10 +58,12 @@
     opacity: 1;
   }
 
-  img {
+  img,
+  svg {
     cursor: pointer;
     transition: opacity $animation-time;
     margin-bottom: $small-padding;
+    margin-left: 0;
     @include square($large-icon);
     @media (max-width: $breakpoint) {
       @include square($small-icon);
@@ -73,49 +74,49 @@
 
   label {
     position: relative;
-  }
 
-  input[type='checkbox'] {
+    input[type='checkbox'] {
-    width: 0;
+      width: 0;
-    height: 0;
-    appearance: none;
-    cursor: pointer;
-
-    &:not(:checked) + img {
-      opacity: 0.4;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:after {
-      content: ' ';
-      background: white;
-      position: absolute;
-
-      $height: 4px;
-      width: $height;
-      top: $height / 2;
-
-      right: 0;
-      transform-origin: top right;
-      border-radius: 100px;
       height: 0;
-      transform: rotate(45deg) translateY(17%);
+      appearance: none;
-      transition: height $animation-time;
+      cursor: pointer;
 
-      @media (max-width: $breakpoint) {
+      &:not(:checked) + * {
-        $height: 2px;
+        opacity: 0.4;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:after {
+        content: '';
+        background: white;
+        position: absolute;
+
+        $height: 4px;
         width: $height;
         top: $height / 2;
-      }
-    }
 
-    &:not(:checked):after {
+        right: 0;
-      height: $large-icon;
+        transform-origin: top right;
-      @media (max-width: $breakpoint) {
+        border-radius: 100px;
-        height: $small-icon;
+        height: 0;
+        transform: rotate(45deg) translateY(17%);
+        transition: height $animation-time;
+
+        @media (max-width: $breakpoint) {
+          $height: 2px;
+          width: $height;
+          top: $height / 2;
+        }
+      }
+
+      &:not(:checked):after {
+        height: $large-icon;
+        @media (max-width: $breakpoint) {
+          height: $small-icon;
+        }
       }
     }
   }

frontend/tsconfig.json

@@ -7,8 +7,8 @@
     "experimentalDecorators": true,
     "downlevelIteration": true,
     "moduleResolution": "node",
+    "skipLibCheck": true,
     "module": "commonjs",
-    "composite": true,
     "lib": ["dom", "es2017"]
   },
   "include": ["src/**/*.ts", "src/*.ts"]

frontend/webpack.config.js

@@ -1,28 +1,10 @@
-const path = require('path');
+const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
-const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
-const Sass = require('sass');
-const TerserJSPlugin = require('terser-webpack-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
-const PATHS = {
+module.exports = {
-  entryPoint: path.resolve(__dirname, 'src/index.ts'),
-  bundles: path.resolve(__dirname, 'dist'),
-};
-
-module.exports = (env, argv) => ({
-  entry: {
-    index: PATHS.entryPoint,
-  },
-  target: 'web',
-  output: {
-    filename: '[name].js',
-    path: PATHS.bundles,
-  },
-  devtool: argv.mode === 'development' ? 'source-map' : false,
   devServer: {
     host: '0.0.0.0',
     disableHostCheck: true,
@@ -30,94 +12,30 @@ module.exports = (env, argv) => ({
       poll: true,
     },
   },
-  optimization: {
-    minimize: argv.mode !== 'development',
-    minimizer: [
-      new TerserJSPlugin({
-        sourceMap: false,
-        test: /\.js$/,
-        exclude: /node_modules/,
-        terserOptions: {
-          keep_classnames: true,
-        },
-      }),
-      new OptimizeCSSAssetsPlugin({}),
-    ],
-  },
   plugins: [
+    // Cleans the dist folder before the build starts
+    new CleanWebpackPlugin(),
+    // Generate a base html file and injects all generated css and js files
     new HtmlWebpackPlugin({
-      xhtml: true,
       template: './src/index.html',
-      minify: {
-        collapseWhitespace: true,
-        removeComments: true,
-        removeRedundantAttributes: true,
-        removeScriptTypeAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        useShortDoctype: true,
-      },
-      inlineSource: '.(js|css)$',
     }),
-    new HtmlWebpackInlineSourcePlugin(),
+    new HtmlWebpackInlineSVGPlugin({
-    new MiniCssExtractPlugin({
+      inlineAll: true,
-      filename: '[name].css',
+      svgoConfig: [
-      chunkFilename: '[id].css',
+        {
-    }),
+          removeViewBox: false,
-    new CleanWebpackPlugin({
+        },
-      protectWebpackAssets: false,
+      ],
-      cleanAfterEveryBuildPatterns: ['*', '!index.html', '!static*'],
     }),
+    // SCSS Configuration for .css .module.css and .scss .module.scss files
+    // see https://github.com/namics/webpack-config-plugins/tree/master/packages/scss-config-webpack-plugin/config
+    new ScssConfigWebpackPlugin(),
+    // Multi threading typescript loader configuration with caching for .ts and .tsx files
+    // see https://github.com/namics/webpack-config-plugins/tree/master/packages/ts-config-webpack-plugin/config
+    new TsConfigWebpackPlugin(),
   ],
   module: {
     rules: [
-      {
-        test: /\.ico$/,
-        use: {
-          loader: 'file-loader',
-          query: {
-            outputPath: '/',
-            name: '[name].[ext]',
-          },
-        },
-      },
-      {
-        test: /\.svg$/,
-        use: {
-          loader: 'file-loader',
-          query: {
-            outputPath: '/static',
-            name: '[name].[ext]',
-          },
-        },
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          'postcss-loader',
-          {
-            loader: 'resolve-url-loader',
-            options: {
-              keepQuery: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-              implementation: Sass,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.ts$/,
-        use: {
-          loader: 'ts-loader',
-        },
-        exclude: /node_modules/,
-      },
       {
         test: /\.js$/,
         enforce: 'pre',
@@ -125,7 +43,4 @@ module.exports = (env, argv) => ({
       },
     ],
   },
-  resolve: {
+};
-    extensions: ['.ts', '.js'],
-  },
-});

package.json

@@ -6,20 +6,17 @@
       "frontend",
       "shared",
       "backend"
-    ],
-    "nohoist": [
-      "**"
     ]
   },
   "devDependencies": {
     "concurrently": "^5.3.0"
   },
   "scripts": {
-    "build": "yarn workspace shared run build && yarn workspace decla.red-frontend run build && yarn workspace declared-server run build",
+    "build": "cd shared && npm run build && cd ../frontend && npm run build && cd ../backend && npm run build",
     "lint": "eslint './**/src/**/*.{js,ts,json}' --fix",
     "frontend": "yarn workspace decla.red-frontend start",
     "shared": "yarn workspace shared start",
     "backend": "yarn workspace declared-server start",
-    "start": "concurrently --kill-others-on-fail \"yarn frontend\"  \"yarn shared\"  \"yarn backend\""
+    "start": "concurrently --kill-others-on-fail \"cd shared && npm start\"  \"cd backend && npm start\"  \"cd frontend && npm start\""
   }
 }

shared/package.json

@@ -29,6 +29,6 @@
     "ts-loader": "^8.0.3",
     "typescript": "^4.0.3",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.12"
   }
 }