Feature: Add devcontainer configuration

Signed-off-by: Johan Forngren <[email protected]>

Author: JohanForngren

Diff for: .devcontainer/devcontainer.json

@@ -0,0 +1,35 @@
+{
+    "name": "Node.js & TypeScript",
+    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
+    "forwardPorts": [
+        3000
+    ],
+    "portsAttributes": {
+        "3000": {
+            "label": "Flowise"
+        }
+    },
+
+    // Volume mounts for persistent storage between container rebuilds
+    "mounts": [
+        // Persists node_modules to avoid reinstalling packages on container rebuild
+        // Using Docker volumes instead of bind mounts improves I/O performance significantly
+        "source=${localWorkspaceFolderBasename}-node_modules,target=/workspaces/${localWorkspaceFolderBasename}/node_modules,type=volume",
+        // Persists pnpm's global store to cache downloaded packages
+        // Located in the node user's home directory to avoid permission issues
+        "source=${localWorkspaceFolderBasename}-pnpm-store,target=/home/node/.local/share/pnpm/store,type=volume"
+    ],
+
+    // Commands to run after the container is created but before VS Code connects
+    // 1. Create directories 2. Fix permissions 3. Install pnpm 4. Configure pnpm store 5. Install dependencies
+    "postCreateCommand": "sudo mkdir -p /workspaces/${localWorkspaceFolderBasename}/node_modules /home/node/.local/share/pnpm/store && sudo chown -R node:node /workspaces/${localWorkspaceFolderBasename} /home/node/.local/share/pnpm/store && npm i -g pnpm && pnpm config set store-dir /home/node/.local/share/pnpm/store && pnpm install",
+    // VS Code specific settings
+    "customizations": {
+        "vscode": {
+            "settings": {
+                // Use pnpm as the default package manager in VS Code
+                "npm.packageManager": "pnpm"
+            }
+        }
+    }
+}

Diff for: .gitignore

@@ -1,6 +1,5 @@
 # editor
 .idea
-.vscode
 
 # dependencies
 **/node_modules
@@ -81,7 +80,7 @@
 *.csr
 
 ## Certificate
-*.der 
+*.der
 
 ## Key database file
 *.kdb

Diff for: .vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "ms-vscode-remote.remote-containers"
+    ]
+}

Diff for: README.md

@@ -21,9 +21,11 @@ English | [繁體中文](./i18n/README-TW.md) | [簡體中文](./i18n/README-ZH.
 Download and Install [NodeJS](https://nodejs.org/en/download) >= 18.15.0
 
 1. Install Flowise
+
     ```bash
     npm install -g flowise
     ```
+
 2. Start Flowise
 
     ```bash
@@ -52,16 +54,19 @@ Download and Install [NodeJS](https://nodejs.org/en/download) >= 18.15.0
 ### Docker Image
 
 1. Build the image locally:
+
     ```bash
     docker build --no-cache -t flowise .
     ```
+
 2. Run image:
 
     ```bash
     docker run -d --name flowise -p 3000:3000 flowise
     ```
 
 3. Stop image:
+
     ```bash
     docker stop flowise
     ```
@@ -75,57 +80,81 @@ Flowise has 3 different modules in a single mono repository.
 -   `components`: Third-party nodes integrations
 -   `api-documentation`: Auto-generated swagger-ui API docs from express
 
-### Prerequisite
+You can develop Flowise either directly on your local machine or using Dev Containers for a more isolated and consistent development environment.
+
+### Option 1: Setup on local machine
+
+1. Install [PNPM](https://pnpm.io/installation)
 
--   Install [PNPM](https://pnpm.io/installation)
     ```bash
     npm i -g pnpm
     ```
 
-### Setup
-
-1.  Clone the repository
+2.  Clone the repository
 
     ```bash
     git clone https://github.com/FlowiseAI/Flowise.git
     ```
 
-2.  Go into repository folder
+3.  Go into repository folder
 
     ```bash
     cd Flowise
     ```
 
-3.  Install all dependencies of all modules:
+4.  Install all dependencies of all modules:
 
     ```bash
     pnpm install
     ```
 
-4.  Build all the code:
+### Option 2: Setup with Dev Containers
+
+Using [Dev Containers](https://code.visualstudio.com/docs/devcontainers/containers) provides a consistent development environment for all contributors without worrying about local dependencies.
+
+1. Install the prerequisites:
+
+   - [Visual Studio Code](https://code.visualstudio.com/)
+   - [Docker](https://www.docker.com/products/docker-desktop/)
+   - [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
+
+2. Clone the repository and open it in VS Code
+
+   ```bash
+   git clone https://github.com/FlowiseAI/Flowise.git
+   code Flowise
+   ```
+
+3. When prompted "Reopen in Container", click it, or run the command "Dev Containers: Reopen in Container" from the command palette (F1)
+
+4. The container will install dependencies automatically. This process may take a few minutes for the first time.
+
+### Build and start
+
+1.  Build all the code:
 
     ```bash
     pnpm build
     ```
 
     <details>
-    <summary>Exit code 134 (JavaScript heap out of memory)</summary>  
+    <summary>Exit code 134 (JavaScript heap out of memory)</summary>
       If you get this error when running the above `build` script, try increasing the Node.js heap size and run the script again:
 
         export NODE_OPTIONS="--max-old-space-size=4096"
         pnpm build
 
     </details>
 
-5.  Start the app:
+2.  Start the app:
 
     ```bash
     pnpm start
     ```
 
     You can now access the app on [http://localhost:3000](http://localhost:3000)
 
-6.  For development build:
+3.  For development build:
 
     -   Create `.env` file and specify the `VITE_PORT` (refer to `.env.example`) in `packages/ui`
     -   Create `.env` file and specify the `PORT` (refer to `.env.example`) in `packages/server`