⚡️ Added Vite config and removed useless files

.babelrc

@@ -1,17 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    "@babel/transform-runtime",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-syntax-top-level-await"
-  ],
-  "env": {
-    "production": {
-      "presets": ["minify"]
-    }
-  }
-}

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "webpack --mode production",
     "start": "npm run build && npm run server",
-    "client": "webpack serve --mode development --devtool inline-source-map --hot",
+    "client": "vite serve public/",
     "server": "tsc -p tsconfig.server.json && node server/",
     "dev": "concurrently \"nodemon\" \"npm run client\"",
     "server-dev": "nodemon",
@@ -35,6 +35,7 @@
     "@types/sharp": "^0.28.0",
     "@types/socket.io": "^3.0.2",
     "@types/socket.io-client": "^3.0.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "airdcpp-apisocket": "^2.4.4",
     "array-sort-by": "^1.2.1",
     "axios": "^0.27.2",
@@ -55,6 +56,7 @@
     "html-to-text": "^8.1.0",
     "jsdoc": "^3.6.10",
     "lodash": "^4.17.21",
+    "node-sass": "npm:sass",
     "opds-extra": "^3.0.9",
     "pretty-bytes": "^5.6.0",
     "prop-types": "^15.8.1",
@@ -88,6 +90,7 @@
     "socket.io-client": "^4.3.2",
     "styled-components": "^5.3.5",
     "threetwo-ui-typings": "^1.0.14",
+    "vite-plugin-html": "^3.2.0",
     "voca": "^1.4.0",
     "websocket": "^1.0.34",
     "ws": "^7.5.3",
@@ -99,10 +102,7 @@
     "@babel/core": "^7.13.10",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-interactions": "^6.5.9",
@@ -127,16 +127,11 @@
     "@typescript-eslint/parser": "^4.17.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
     "body-parser": "^1.19.0",
     "buffer": "^6.0.3",
     "bulma": "^0.9.3",
-    "clean-webpack-plugin": "^1.0.0",
     "comlink": "^4.3.0",
     "concurrently": "^4.0.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^5.1.2",
     "eslint": "^7.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -147,7 +142,6 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "express": "^4.17.1",
-    "file-loader": "^6.2.0",
     "fs-extra": "^9.1.0",
     "html-webpack-plugin": "^5.3.1",
     "http-response-stream": "^1.0.9",
@@ -155,24 +149,17 @@
     "install": "^0.13.0",
     "jest": "^26.6.3",
     "mini-css-extract-plugin": "^1.4.1",
-    "node-sass": "^7.0.1",
     "nodemon": "^1.17.3",
     "npm": "^8.11.0",
     "prettier": "^2.2.1",
     "react-refresh": "^0.14.0",
     "rimraf": "^3.0.2",
-    "sass-loader": "^11.0.1",
     "source-map-loader": "^0.2.4",
     "string-similarity": "^4.0.4",
-    "style-loader": "^2.0.0",
     "tslint": "^6.1.3",
     "typescript": "^4.2.3",
     "url-loader": "^1.0.1",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^4.7.4",
-    "webpack-merge": "^5.7.3"
+    "vite": "^4.1.1"
   },
   "resolutions": {
     "@storybook/react/webpack": "^5"

tsconfig.json

@@ -14,6 +14,7 @@
     "lib": ["dom", "dom.iterable", "esnext", "webworker"],
     "baseUrl": ".",
     "esModuleInterop": true,
+    "isolatedModules": true,
     "strict": true
   },
   "settings": {

vite.config.js

@@ -0,0 +1,15 @@
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  publicDir: './public',
+  plugins: [
+    // …
+    react({
+      // Use React plugin in all *.jsx and *.tsx files
+      include: '**/*.{jsx,tsx}',
+      babel: {
+        plugins: ['babel-plugin-styled-components'],
+      },
+    }),
+  ],
+});

webpack.config.js

@@ -1,128 +0,0 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const webpack = require("webpack");
-const outputDirectory = "dist";
-const BundleAnalyzerPlugin =
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
-const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
-const CopyPlugin = require("copy-webpack-plugin");
-
-module.exports = (_, argv) => {
-  const mode = argv.mode;
-  const isDevelopment = mode === "development";
-  return {
-    entry: ["babel-polyfill", "./src/client/index.tsx"],
-    output: {
-      path: path.resolve(__dirname, outputDirectory),
-      filename: "./js/[name].bundle.js",
-    },
-    devtool: "source-map",
-    stats: {
-      children: true,
-    },
-    experiments: {
-      topLevelAwait: true,
-    },
-    module: {
-      rules: [
-        {
-          test: /\.worker\.(js|ts)$/i,
-          use: [
-            {
-              loader: "comlink-loader",
-              options: {
-                singleton: true,
-              },
-            },
-          ],
-        },
-        {
-          test: [/\.js?$/, /\.jsx?$/, /\.tsx?$/],
-          use: [
-            {
-              loader: "babel-loader",
-              options: {
-                plugins: [
-                  isDevelopment && require("react-refresh/babel"),
-                ].filter(Boolean),
-              },
-            },
-          ],
-          exclude: /node_modules/,
-        },
-        {
-          enforce: "pre",
-          test: /\.js$/,
-          loader: "source-map-loader",
-        },
-        {
-          test: /\.css$/i,
-          use: ["style-loader", "css-loader"],
-        },
-        {
-          test: /\.s[ac]ss$/i,
-          use: [
-            // Creates `style` nodes from JS strings
-            "style-loader",
-            // Translates CSS into CommonJS
-            "css-loader",
-            // Compiles Sass to CSS
-            "sass-loader",
-          ],
-        },
-        {
-          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i,
-          use: [
-            "file-loader?hash=sha512&digest=hex&name=img/[contenthash].[ext]",
-            "image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false",
-          ],
-        },
-      ],
-    },
-    resolve: {
-      extensions: ["*", ".ts", ".tsx", ".js", ".jsx", ".json"],
-      aliasFields: ["browser", "browser.esm"],
-    },
-    mode: process.env.NODE_ENV,
-    devServer: {
-      hot: true,
-      port: 3050,
-      open: true,
-      proxy: {
-        "/api/**": {
-          target: "http://localhost:8050",
-          secure: false,
-          changeOrigin: true,
-        },
-      },
-    },
-    optimization: {
-      usedExports: false,
-    },
-    plugins: [
-      // new BundleAnalyzerPlugin(),
-      new CopyPlugin({
-        patterns: [{ from: "./src/client/assets/img/", to: "img/" }],
-        options: {
-          concurrency: 100,
-        },
-      }),
-      isDevelopment && new ReactRefreshWebpackPlugin(),
-      new HtmlWebpackPlugin({
-        template: "./public/index.html",
-        favicon: "./public/favicon.ico",
-        title: "express-typescript-react",
-      }),
-      new webpack.DefinePlugin({
-        "process.env.UNDERLYING_HOSTNAME": JSON.stringify(
-          process.env.UNDERLYING_HOSTNAME,
-        ),
-      }),
-      new MiniCssExtractPlugin({
-        filename: "./css/[name].css",
-        chunkFilename: "./css/[id].css",
-      }),
-    ].filter(Boolean),
-  };
-};