refactor: serve react as compressed br (#339)

apps/client/package.json

@@ -90,6 +90,7 @@
     "stylelint-config-standard-scss": "^6.1.0",
     "typescript": "^4.9.4",
     "vite": "^4.0.4",
+    "vite-plugin-compression2": "^0.8.4",
     "vite-plugin-svgr": "^2.4.0",
     "vite-tsconfig-paths": "^4.0.3",
     "vitest": "^0.29.8"

apps/client/vite.config.js

@@ -2,6 +2,7 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 import react from '@vitejs/plugin-react';
 import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
+import { compression } from 'vite-plugin-compression2';
 import svgrPlugin from 'vite-plugin-svgr';
 
 import { ONTIME_VERSION } from './src/ONTIME_VERSION';
@@ -24,6 +25,7 @@ export default defineConfig({
           env: 'production',
         },
       }),
+    compression({ algorithm: 'brotliCompress' }),
   ],
   server: {
     port: 3000,

apps/server/package.json

@@ -10,6 +10,7 @@
     "dotenv": "^16.0.1",
     "express": "^4.18.2",
     "express-session": "^1.17.3",
+    "express-static-gzip": "^2.1.7",
     "express-validator": "^6.14.2",
     "lowdb": "^5.0.5",
     "multer": "^1.4.4",

apps/server/src/app.ts

@@ -1,5 +1,6 @@
 import 'dotenv/config';
 import express from 'express';
+import expressStaticGzip from 'express-static-gzip';
 import http from 'http';
 import cors from 'cors';
 
@@ -61,8 +62,14 @@ app.use('/playback', playbackRouter);
 // serve static - css
 app.use('/external', express.static(externalsStartDirectory));
 
-// serve static - react, in test mode we fetch the React app from module
-app.use(express.static(join(currentDirectory, resolvedPath())));
+// serve static - react, in dev/test mode we fetch the React app from module
+const reactAppPath = join(currentDirectory, resolvedPath());
+app.use(
+  expressStaticGzip(reactAppPath, {
+    enableBrotli: true,
+    orderPreference: ['br'],
+  }),
+);
 
 app.get('*', (req, res) => {
   res.sendFile(resolve(currentDirectory, resolvedPath(), 'index.html'));