diff --git a/packages/web/app/package.json b/packages/web/app/package.json
index cd4b262b1b..ef0a316b31 100644
--- a/packages/web/app/package.json
+++ b/packages/web/app/package.json
@@ -5,11 +5,11 @@
   "scripts": {
     "build": "tsx ../../../scripts/runify.ts src/server/index.ts && vite build --outDir dist/client",
     "build-storybook": "storybook build",
-    "dev": "node --env-file=.env --watch-path src/server --import tsx src/server/index.ts --dev",
+    "dev": "tsx watch --clear-screen=false --exclude \"./**/*.mjs\" src/server/dev.ts",
     "generate-changelog": "node ../../../scripts/generate-changelog.js",
     "postinstall": "pnpm generate-changelog",
     "storybook": "storybook dev -p 6006",
-    "typecheck": "tsc"
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@date-fns/utc": "2.1.0",
@@ -83,6 +83,7 @@
     "cmdk": "0.2.1",
     "date-fns": "4.1.0",
     "dompurify": "3.2.0",
+    "dotenv": "16.4.5",
     "echarts": "5.5.1",
     "echarts-for-react": "3.0.2",
     "fastify": "4.28.1",
diff --git a/packages/web/app/src/server/dev.ts b/packages/web/app/src/server/dev.ts
new file mode 100644
index 0000000000..96fcf00c23
--- /dev/null
+++ b/packages/web/app/src/server/dev.ts
@@ -0,0 +1,14 @@
+import { config } from 'dotenv';
+
+config({
+  debug: true,
+  encoding: 'utf8',
+});
+
+// Set the environment to development.
+// This is necessary because the default environment is production.
+// eslint-disable-next-line no-process-env
+process.env.NODE_ENV = 'development';
+
+// This way we can import the main module and environment variables will be loaded.
+await import('./index');
diff --git a/packages/web/app/src/server/index.ts b/packages/web/app/src/server/index.ts
index 0b370440f1..ea9cfd7510 100644
--- a/packages/web/app/src/server/index.ts
+++ b/packages/web/app/src/server/index.ts
@@ -10,8 +10,10 @@ import { connectSlack } from './slack';
 const __dirname = new URL('.', import.meta.url).pathname;
 /**
  * Whether the server is running in development mode.
+ * See the ./dev.ts file
  */
-const isDev = process.argv.includes('--dev');
+// eslint-disable-next-line no-process-env
+const isDev = process.env.NODE_ENV === 'development';
 
 const server = Fastify({
   disableRequestLogging: true,
@@ -30,6 +32,7 @@ async function main() {
    * In development mode, we're going to use @fastify/vite for hot module reloading, pre-bundling dependencies, etc.
    */
   if (isDev) {
+    server.log.info('Running in development mode');
     // If in development mode, use Vite to serve the frontend and enable hot module reloading.
     const { default: FastifyVite } = await import('@fastify/vite');
     await server.register(FastifyVite, {
@@ -45,6 +48,7 @@ async function main() {
     });
     await server.vite.ready();
   } else {
+    server.log.info('Running in production mode');
     // If in production mode, serve the frontend as static files.
     await server.register(FastifyStatic, {
       // The root directory of the frontend code (where the index.html is located)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71a7adfc8a..fa9839c758 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1858,6 +1858,9 @@ importers:
       dompurify:
         specifier: 3.2.0
         version: 3.2.0
+      dotenv:
+        specifier: 16.4.5
+        version: 16.4.5
       echarts:
         specifier: 5.5.1
         version: 5.5.1