src: Add hot reload option for development

Allow hot reload in Development mode for
pulpito-ng. This saves a lot more time
when developing with other tech stacks.

Signed-off-by: Kamoltat Sirivadhna <[email protected]>

Dockerfile

@@ -7,7 +7,4 @@ RUN \
   mkdir -p /app/node_modules/.vite && \
   npm install
 COPY . .
-RUN chown -R node:node /app && \
-  npm run build
-USER node
-CMD ["npm", "run", "serve", "--", "--host"]
+CMD sh /app/start_container.sh

README.md

@@ -41,3 +41,14 @@ In [teuthology's docker-compose](https://github.com/ceph/teuthology/blob/main/do
     ports:
       - 8081:8081
 ```
+[recommended] For developement purposes:
+Add the following to `pulpito-ng` container:
+
+```
+pulpito-ng:
+    environment:
+      DEPLOYMENT: development
+    volumes:
+      - ../../../pulpito-ng:/app/:rw
+      - /app/node_modules
+```

start_container.sh

@@ -0,0 +1,14 @@
+#!/usr/bin/env sh
+set -ex
+trap exit TERM
+
+cd /app/
+
+if [ "$DEPLOYMENT" = "development" ]; then
+    echo "DEVELOPMENT MODE"
+    npm run start
+else
+    chown -R node:node /app
+    npm run build
+    npm run serve -- --host
+fi

vite.config.js

@@ -1,9 +1,9 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
-
+const DEPLOYMENT = process.env.DEPLOYMENT;
 export default defineConfig(() => {
-  return {
+  let config = {
     build: {
       outDir: "build",
       sourcemap: true,  // for Sentry
@@ -18,11 +18,22 @@ export default defineConfig(() => {
         url: "https://sentry.ceph.com/",
       }),
     ],
-    server: {
-      port: 8081,
-    },
     preview: {
       port: 8081,
     }
   };
+  if (DEPLOYMENT == "development") {
+    config['server'] = {
+      port: 8081,
+      host: true,
+      watch: {
+        usePolling: true,
+      },
+    }
+  } else {
+    config['server'] = {
+      port: 8081,
+    }
+  }
+  return config;
 });