enh: add docker for production and development

Author: bekir_filics

Dockerfile.dev

@@ -0,0 +1,20 @@
+# Use the official Node.js image from the Docker Hub
+FROM node:14
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install the dependencies
+RUN npm install
+
+# Copy the rest of the application code to the working directory
+COPY . .
+
+# Expose the port the app runs on
+EXPOSE 8080
+
+# Define the command to run the application
+CMD ["npm", "run", "dev"]

Dockerfile.prod

@@ -0,0 +1,23 @@
+# Use the official Node.js image from the Docker Hub
+FROM node:14
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install only production dependencies
+RUN npm install
+
+# Copy the rest of the application code to the working directory
+COPY . .
+
+# Build the application
+RUN npm run build:bundle
+
+# Expose the port the app runs on
+EXPOSE 4173
+
+# Define the command to run the application in production mode
+CMD ["npm", "run", "preview"]

README.md

@@ -42,4 +42,25 @@ protocol websockets
 allow_anonymous true
 ```
 
+## Docker 
+### Development
+Building docker container for development.
+```
+docker build -t vda-visualizer:dev -f Dockerfile.dev .
+```
+
+Run docker container 
+```
+docker run -p 8080:8080 -v $(pwd):/app -v /app/node_modules --rm vda-visualizer:dev
+```
 
+### Production 
+Building docker container for production 
+```
+docker build -t vda-visualizer:prod -f Dockerfile.prod .
+```
+
+Run docker container 
+```
+docker run -p 4173:4173 --rm vda-visualizer:prod
+```

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "dev": "vite --host --port 8080",
     "build:bundle": "vite build",
-    "preview": "vite preview",
+    "preview": "vite preview --host",
     "test:unit": "vitest --environment jsdom",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .eslintignore"