Use local certs for webpack serve (#5460)

Author: DaneEveritt

package.json

@@ -136,7 +136,7 @@
         "watch": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
         "build": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --progress",
         "build:production": "yarn run clean && cross-env NODE_ENV=production ./node_modules/.bin/webpack --mode production",
-        "serve": "yarn run clean && cross-env NODE_ENV=development WEBPACK_PUBLIC_PATH=https://localhost:5173/ webpack serve --progress --hot --server-type https"
+        "serve": "yarn run clean && cross-env NODE_ENV=development USE_LOCAL_CERTS=true WEBPACK_PUBLIC_PATH=https://pterodactyl.test:5173/ webpack serve --progress --hot --server-type https"
     },
     "browserslist": [
         "> 0.5%",

webpack.config.js

@@ -18,7 +18,7 @@ module.exports = {
         path: path.join(__dirname, '/public/assets'),
         filename: isProduction ? 'bundle.[chunkhash:8].js' : 'bundle.[fullhash:8].js',
         chunkFilename: isProduction ? '[name].[chunkhash:8].js' : '[name].[fullhash:8].js',
-        publicPath: (process.env.WEBPACK_PUBLIC_PATH || '/assets/'),
+        publicPath: process.env.WEBPACK_PUBLIC_PATH || '/assets/',
         crossOriginLoading: 'anonymous',
     },
     module: {
@@ -77,7 +77,7 @@ module.exports = {
                 test: /\.js$/,
                 enforce: 'pre',
                 loader: 'source-map-loader',
-            }
+            },
         ],
     },
     stats: {
@@ -105,7 +105,13 @@ module.exports = {
             DEBUG: process.env.NODE_ENV !== 'production',
             WEBPACK_BUILD_HASH: Date.now().toString(16),
         }),
-        new WebpackAssetsManifest({ output: 'manifest.json', writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
+        new WebpackAssetsManifest({
+            output: 'manifest.json',
+            writeToDisk: true,
+            publicPath: true,
+            integrity: true,
+            integrityHashes: ['sha384'],
+        }),
     ],
     optimization: {
         usedExports: true,
@@ -133,13 +139,21 @@ module.exports = {
     devServer: {
         compress: true,
         port: 5173,
+        server: {
+            type: 'https',
+            options: process.env.USE_LOCAL_CERTS
+                ? {
+                      ca: path.join(__dirname, '../../docker/certificates/root_ca.pem'),
+                      cert: path.join(__dirname, '../../docker/certificates/pterodactyl.test.pem'),
+                      key: path.join(__dirname, '../../docker/certificates/pterodactyl.test-key.pem'),
+                  }
+                : undefined,
+        },
         static: {
             directory: path.join(__dirname, '/public'),
             publicPath: process.env.WEBPACK_PUBLIC_PATH || '/assets/',
         },
-        allowedHosts: [
-            '.pterodactyl.test',
-        ],
+        allowedHosts: ['.pterodactyl.test'],
         headers: {
             'Access-Control-Allow-Origin': '*',
         },