Add Docker support for running the application (#181)

* feat: Add Docker support for running the application

* fix unit test

* refine docker to reduce its size

.dockerignore

@@ -0,0 +1,19 @@
+node_modules
+.git
+.gitignore
+.github
+*.md
+dist
+.watchmanconfig
+.prettierrc
+.prettierignore
+.editorconfig
+.eslintignore
+.eslintrc.js
+.git-blame-ignore-revs
+.vscode
+cypress
+cypress.config.ts
+docs
+test
+vite.config.lib.js

Dockerfile

@@ -0,0 +1,36 @@
+FROM node:20-slim AS base
+
+# Set environment variables for pnpm
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+ENV DOCKER=true
+
+# Enable corepack to use pnpm
+RUN corepack enable
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the project files to the working directory
+COPY . .
+
+RUN pnpm add -g serve
+
+FROM base As prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile --prod --ignore-scripts
+FROM base AS deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+
+FROM base AS build
+COPY --from=deps /app/node_modules /app/node_modules
+RUN pnpm build:site
+
+FROM base
+COPY --from=prod-deps /app/node_modules /app/node_modules
+COPY --from=build /app/dist /app/dist
+
+# Expose the port the app runs on
+EXPOSE 8080
+
+# Command to run the application
+CMD ["serve", "-s", "dist", "-l", "8080"]

README.md

@@ -90,6 +90,31 @@ tunnels for this.
 3. You will be given a command that install a service locally. Run it.
 4. Your localhost:8080 will be available at `air.zenuml.com`.
 
+### Docker
+
+To run the application using Docker, follow these steps:
+
+1. **Build the Docker image**:
+   Navigate to the root directory of the project and run the following command to build the Docker image:
+
+   ```bash
+   docker build -t zenuml-core .
+   ```
+
+2. **Run the Docker container**:
+   After building the image, you can run the Docker container with the following command:
+
+   ```bash
+   docker run -p 8080:8080 zenuml-core
+   ```
+
+   This will start the application and map port 8080 of the container to port 8080 on your local machine.
+
+3. **Access the application**:
+   Open your web browser and navigate to `http://localhost:8080` to access the application.
+
+Make sure Docker is installed and running on your machine before executing these commands.
+
 # Code Structure
 
 This repository contains both the DSL parser and the renderer.

cypress/e2e/editable-label.spec.js

@@ -63,7 +63,7 @@ describe("Editable Label", function () {
     cy.get(".privacy>span>svg", { timeout: 5000 }).should("be.visible");
 
     // Edit the message
-    const messageLabel = cy.contains("create");
+    const messageLabel = cy.contains("label", "create");
     messageLabel.dblclick();
     messageLabel.type("1");
     cy.contains("create1").should("be.visible");

vite.config.js

@@ -4,12 +4,12 @@ import createVuePlugin from "@vitejs/plugin-vue";
 import { execSync } from "child_process";
 import svgLoader from "vite-svg-loader";
 
-process.env.VITE_APP_GIT_HASH = execSync("git rev-parse --short HEAD")
-  .toString()
-  .trim();
-process.env.VITE_APP_GIT_BRANCH = execSync("git branch --show-current")
-  .toString()
-  .trim();
+process.env.VITE_APP_GIT_HASH = process.env.DOCKER
+  ? ""
+  : execSync("git rev-parse --short HEAD").toString().trim();
+process.env.VITE_APP_GIT_BRANCH = process.env.DOCKER
+  ? ""
+  : execSync("git branch --show-current").toString().trim();
 
 function getCypressHtmlFiles() {
   const cypressFolder = resolve(__dirname, "cy");