fix(build): use webapp for npm dependencies

Author: ReenigneArcher

.github/workflows/CI.yml

@@ -90,7 +90,7 @@ jobs:
         working-directory: Themerr-plex.bundle
         run: |
           npm install
-          mv ./node_modules ./Contents/Resources/web
+          npm run build
 
       - name: Build plist
         shell: bash

Contents/Resources/web/templates/base.html

@@ -12,20 +12,20 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <!-- Bootstrap CSS -->
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='node_modules/bootstrap/dist/css/bootstrap.min.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/css/bootstrap.bundle.css') }}">
 
         <!-- Fonts -->
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/css/all.min.css') }}">
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='node_modules/@fontsource/open-sans/index.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/css/fontawesome.bundle.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/css/open-sans.bundle.css') }}">
 
         <!-- CSS -->
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}">
 
         <!-- Bootstrap Optional JavaScript -->
-        <script type="text/javascript" src="{{ url_for('static', filename='node_modules/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='dist/js/bootstrap.bundle.js') }}"></script>
 
         <!-- JQuery Javascript -->
-        <script type="text/javascript" src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js') }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='dist/js/jquery.bundle.js') }}"></script>
 
         <!-- JS -->
         <script type="text/javascript" src="https://app.lizardbyte.dev/js/discord.js"></script>

Dockerfile

@@ -66,7 +66,7 @@ RUN <<_NPM
 #!/bin/bash
 set -e
 npm install
-mv ./node_modules ./Contents/Resources/web
+npm run build
 _NPM
 
 # clean

docs/source/contributing/build.rst

@@ -2,7 +2,7 @@
 
 Build
 =====
-Compiling Themerr-plex is fairly simple; however it is recommended to use Python 2.7 since the Plex framework is using
+Compiling Themerr-plex is fairly simple; however you need to use Python 2.7 since the Plex framework is using
 Python 2.7.
 
 Clone
@@ -53,17 +53,7 @@ Install npm dependencies.
    .. code-block:: bash
 
       npm install
-
-Move modules directory.
-   Linux/macOS
-      .. code-block:: bash
-
-         mv ./node_modules ./Contents/Resources/web
-
-   Windows
-      .. code-block:: batch
-
-         move .\node_modules .\Contents\Resources\web
+      npm run build
 
 Remote Build
 ------------

package.json

@@ -1,8 +1,17 @@
 {
+  "scripts": {
+    "build": "webpack"
+  },
   "dependencies": {
     "@fontsource/open-sans": "5.0.20",
     "@fortawesome/fontawesome-free": "6.5.1",
     "bootstrap": "5.3.2",
     "jquery": "3.7.1"
+  },
+  "devDependencies": {
+    "css-loader": "6.10.0",
+    "mini-css-extract-plugin": "2.8.1",
+    "webpack": "5.90.3",
+    "webpack-cli": "5.1.4"
   }
 }

webpack.config.js

@@ -0,0 +1,32 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: {
+    bootstrap: [
+      'bootstrap/dist/js/bootstrap.bundle.min.js',
+      'bootstrap/dist/css/bootstrap.min.css'
+    ],
+    fontawesome: '@fortawesome/fontawesome-free/css/all.min.css',
+    jquery: 'jquery/dist/jquery.min.js',
+    'open-sans': '@fontsource/open-sans/index.css',
+  },
+  output: {
+    filename: 'js/[name].bundle.js',
+    path: path.resolve(__dirname, 'Contents', 'Resources', 'web', 'dist'),
+  },
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].bundle.css',
+    }),
+  ],
+};