Changed the web-server from HTTP1 to HTTP2..

Dockerfile.dev

@@ -63,6 +63,13 @@ RUN chmod 0644 /etc/cron.d/cronjob
 RUN crontab /etc/cron.d/cronjob
 RUN /app/setup_utils/generate_config_ini.sh -t /app/backend/analytics_server/mhq/config
 
+ARG CACHEBUST=1
+RUN apt-get update && \
+    apt-get install -y mkcert && \
+    apt-get install -y libnss3-tools && \
+    mkcert -install && \
+    mkcert localhost
+
 WORKDIR /app/web-server
 RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --frozen-lockfile
 

cli/source/app.tsx

@@ -598,7 +598,7 @@ const CliUi = () => {
             <Text bold underline color="#7e57c2">
               Access Info
             </Text>
-            <Text bold>{`http://localhost:${frontend_port}`}</Text>
+            <Text bold>{`https://localhost:${frontend_port}`}</Text>
             <Text bold>{`http://localhost:${analytics_server_port}`}</Text>
             <Text bold>{`redis://${redis_host}:${redis_port}/0`}</Text>
             <Text

docker-compose.yml

@@ -1,4 +1,5 @@
 volumes:
+  certs:
   dev_postgres_data:
     driver: local
   dev_keys:
@@ -26,16 +27,17 @@ services:
     ports:
       - "127.0.0.1:${ANALYTICS_SERVER_PORT:-9696}:${ANALYTICS_SERVER_PORT:-9696}"
       - "127.0.0.1:${SYNC_SERVER_PORT:-9697}:${SYNC_SERVER_PORT:-9697}"
-      - "127.0.0.1:${PORT:-3333}:${PORT:-3333}"
       - "127.0.0.1:${DB_PORT:-5434}:${DB_PORT:-5434}"
       - "127.0.0.1:${REDIS_PORT:-6385}:${REDIS_PORT:-6385}"
+      - "127.0.0.1:3333:3333"
 
     extra_hosts:
       - "host.docker.internal:host-gateway"
 
     volumes:
       - dev_postgres_data:/var/lib/postgresql/15/main
       - dev_keys:/app/backend/analytics_server/mhq/config
+      - certs:/etc/letsencrypt
 
     develop:
       watch:
@@ -80,3 +82,10 @@ services:
         - action: sync+restart
           path: ./setup_utils/
           target: /app/setup_utils
+
+  certbot:
+    image: certbot/certbot
+    volumes:
+      - certs:/etc/letsencrypt
+      - ./certs:/var/www/certbot
+    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"

web-server/next.config.js → web-server/next.config.mjs

@@ -1,6 +1,8 @@
-const analyzer = require('@next/bundle-analyzer');
-const { loadEnvConfig } = require('@next/env');
-const images = require('next-images');
+import pkg from '@next/env';
+const { loadEnvConfig } = pkg;
+
+import analyzer from '@next/bundle-analyzer';
+import images from 'next-images';
 
 loadEnvConfig('../.env');
 
@@ -112,4 +114,4 @@ const plugins =
     ? compose(genericPlugins, staticOverrides)
     : compose(genericPlugins, { ...staticOverrides, ...webpackOverride });
 
-module.exports = plugins;
+export default plugins;

web-server/package.json

@@ -75,18 +75,19 @@
     "voca": "^1.4.0",
     "yup": "0.32.11"
   },
+  "type": "module",
   "scripts": {
     "knip": "knip",
     "prod-tun": "bash -c \"$PROD_TUNNEL\"",
     "stage-tun": "bash -c \"$STAGE_TUNNEL\"",
     "http": "node http-server",
-    "dev": "[ -e ../.env ] && set -a && . ../.env; NEXT_MANUAL_SIG_HANDLE=true next -p $PORT",
+    "dev": "[ -e ../.env ] && set -a && . ../.env; NEXT_MANUAL_SIG_HANDLE=true node server.js",
     "dev-prod": "NEXT_MANUAL_SIG_HANDLE=true yarn env prod && next",
     "build": "./scripts/build.sh",
     "zip": "./scripts/zip.sh",
     "box-server-start-wo-install": "./scripts/server-init.sh",
     "box-server-start": "yarn install && yarn box-server-start-wo-install",
-    "start": "NEXT_MANUAL_SIG_HANDLE=true next start",
+    "start": "NEXT_MANUAL_SIG_HANDLE=true node prod-server.js",
     "export": "next export",
     "lint": "eslint src/**/*.{js,,ts,tsx}",
     "lint-fix": "eslint --fix --ignore-pattern 'node_modules/*' 'src/**/*.{js,ts,tsx}'",

web-server/prod-server.js

@@ -0,0 +1,21 @@
+import fs from 'fs';
+import http2 from 'http2';
+import path from 'path';
+
+const options = {
+  key: fs.readFileSync(
+    path.join('/etc/letsencrypt/live/middleware.com/privkey.pem')
+  ),
+  cert: fs.readFileSync(
+    path.join('/etc/letsencrypt/live/middleware.com/fullchain.pem')
+  )
+};
+
+const server = http2.createSecureServer(options);
+server.listen(3333, () => {
+  console.log('HTTP/2 server is running on https://localhost:3333');
+});
+
+server.on('error', (err) => {
+  console.error('Error starting server:', err);
+});

web-server/server.js

@@ -0,0 +1,35 @@
+import next from 'next';
+
+import fs from 'fs';
+import { createServer } from 'https';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { parse } from 'url';
+
+const dev = process.env.NODE_ENV !== 'production';
+const app = next({ dev });
+const handle = app.getRequestHandler();
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+console.log(__dirname, 'DIR NAME');
+
+const splitted = __dirname.split('/');
+splitted.pop();
+let newpath = splitted.join('/');
+
+const httpsOptions = {
+  key: fs.readFileSync(path.join(newpath, 'localhost-key.pem')),
+  cert: fs.readFileSync(path.join(newpath, 'localhost.pem'))
+};
+
+app.prepare().then(() => {
+  createServer(httpsOptions, (req, res) => {
+    const parsedUrl = parse(req.url, true);
+    handle(req, res, parsedUrl);
+  }).listen(process.env.PORT || 3333, (err) => {
+    if (err) throw err;
+    console.log(`> Server started on https://localhost:${process.env.PORT}`);
+  });
+});

web-server/src/api-helpers/transformers-and-parsers.ts

@@ -24,8 +24,8 @@ export const parseError = (err: any) => {
     payload: dbErrorIfPresent
       ? dbErrorIfPresent
       : typeof payload === 'object'
-      ? transformInternalApiErrors(payload) || payload
-      : { message: payload }
+        ? transformInternalApiErrors(payload) || payload
+        : { message: payload }
   };
 
   if (stack) response.payload.stack = stack;

web-server/src/components/BranchSelector.tsx

@@ -162,8 +162,8 @@ export const BranchSelector: FC = () => {
             {isAllMode
               ? 'All Branches'
               : isProdMode
-              ? 'Production Branches'
-              : names.join(', ')}
+                ? 'Production Branches'
+                : names.join(', ')}
           </Typography>
         </LightTooltip>
       </HeaderBtn>

web-server/src/components/DoraScore.tsx

@@ -39,10 +39,10 @@ export const DoraScore: FC<DoraScoreProps> = ({
             stats.avg >= 8
               ? commonProps.elite.bg
               : stats.avg >= 6
-              ? commonProps.high.bg
-              : stats.avg >= 4
-              ? commonProps.medium.bg
-              : commonProps.low.bg
+                ? commonProps.high.bg
+                : stats.avg >= 4
+                  ? commonProps.medium.bg
+                  : commonProps.low.bg
         }}
       >
         <Line fontSize={small ? '2em' : '2.4em'} bold white>

web-server/src/components/DoraScoreV2.tsx

@@ -90,10 +90,10 @@ const getBg = (stat: number) => ({
     stat >= 8
       ? commonProps.elite.bg
       : stat >= 6
-      ? commonProps.high.bg
-      : stat >= 4
-      ? commonProps.medium.bg
-      : commonProps.low.bg
+        ? commonProps.high.bg
+        : stat >= 4
+          ? commonProps.medium.bg
+          : commonProps.low.bg
 });
 
 const IndustryDropdown = () => {

web-server/src/components/PRTable/PullRequestsTable.tsx

@@ -854,8 +854,8 @@ export const MiniLeadTimeStat: FC<{
     !commit && !deploy
       ? 'TOTAL'
       : Boolean(commit) !== Boolean(deploy)
-      ? 'PARTIAL'
-      : null;
+        ? 'PARTIAL'
+        : null;
 
   return (
     <FlexBox

web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx

@@ -271,8 +271,8 @@ export const WeeklyDeliveryVolumeCard = () => {
                       {deploymentFrequencyProps.count || totalDeployments
                         ? `See details ->`
                         : deploymentsConfigured
-                        ? `Nothing was deployed between ${dateRangeLabel}`
-                        : `Deployments not configured for any repos. Configure here ->`}
+                          ? `Nothing was deployed between ${dateRangeLabel}`
+                          : `Deployments not configured for any repos. Configure here ->`}
                     </Line>
                   </Line>
 

web-server/src/content/DoraMetrics/DoraMetricsComparisonPill.tsx

@@ -90,18 +90,18 @@ export const DoraMetricsComparisonPill: FC<
     change > MEANINGFUL_CHANGE_THRESHOLD
       ? 'positive'
       : change < -MEANINGFUL_CHANGE_THRESHOLD
-      ? 'negative'
-      : 'neutral';
+        ? 'negative'
+        : 'neutral';
   const color = darken(
     state === 'positive'
       ? positive
         ? theme.colors.success.main
         : theme.colors.warning.main
       : state === 'negative'
-      ? positive
-        ? theme.colors.warning.main
-        : theme.colors.success.main
-      : '#DDD',
+        ? positive
+          ? theme.colors.warning.main
+          : theme.colors.success.main
+        : '#DDD',
     state === 'neutral' ? 0.5 : 0
   );
 

web-server/src/contexts/ModalContext.tsx

@@ -337,11 +337,11 @@ export const ModalDatePicker: FC<
             !date.value
               ? 'Not set'
               : differenceInHours(today, date.value) < 1
-              ? `${intlFormatDistance(date.value, today)} on a ${format(
-                  date.value,
-                  'eeee'
-                )}`
-              : 'Today'
+                ? `${intlFormatDistance(date.value, today)} on a ${format(
+                    date.value,
+                    'eeee'
+                  )}`
+                : 'Today'
           }
           FormHelperTextProps={{
             sx: { m: 0, textAlign: 'right' }
@@ -376,11 +376,11 @@ export const StaticModalDatePicker: FC<
             {!date.value
               ? 'Not set'
               : !isToday(date.value)
-              ? `${intlFormatDistance(date.value, today)} on a ${format(
-                  date.value,
-                  'eeee'
-                )}`
-              : 'Today'}
+                ? `${intlFormatDistance(date.value, today)} on a ${format(
+                    date.value,
+                    'eeee'
+                  )}`
+                : 'Today'}
           </Box>
         </Box>
         <FlexBox flex1 />

web-server/src/hooks/useStateTeamConfig.tsx

@@ -84,8 +84,8 @@ export const useStateTeamConfig = () => {
       const newRange = dateRangeUpdateHandler(range, dateRange);
       dispatch(
         appSlice.actions.setDateRange({
-          dateRange: newRange.map(
-            (date) => date?.toISOString()
+          dateRange: newRange.map((date) =>
+            date?.toISOString()
           ) as SerializableDateRange,
           dateMode: dateMode
         })

web-server/src/utils/filterUtils.ts

@@ -25,8 +25,8 @@ export const getBranchesAndRepoFilter = async (params: {
       ignoreBranches || useProdBranches
         ? null
         : branchMode === ActiveBranchMode.ALL
-        ? '^'
-        : branches,
+          ? '^'
+          : branches,
     repo_filters: useProdBranches ? teamRepoFiltersMap[teamId] : null
   };
 };
@@ -56,8 +56,8 @@ export const getBranchesAndRepoFilterAsPayload = async (params: {
             ignoreBranches || useProdBranches
               ? null
               : branchMode === ActiveBranchMode.ALL
-              ? '^'
-              : branches,
+                ? '^'
+                : branches,
           repo_filters: useProdBranches ? teamRepoFiltersMap[teamId] : null
         }
       ).then(({ pr_filter }) => ({