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]>
kamoltat · Feb 2, 2024 · c5b3262 · c5b3262
1 parent 8bd6699
commit c5b3262
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/Dockerfile b/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
diff --git a/README.md b/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
+```
diff --git a/start_container.sh b/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
diff --git a/vite.config.js b/vite.config.js
@@ -20,6 +20,10 @@ export default defineConfig(() => {
     ],
     server: {
       port: 8081,
+      host: true,
+      watch: {
+        usePolling: true,
+      },
     },
     preview: {
       port: 8081,