Update project to use Compose for dev setup

Author: mikesir87

Dockerfile

@@ -1,10 +1,15 @@
-FROM node:lts-slim AS build
+FROM node:lts-slim AS base
 WORKDIR /usr/local/app
 COPY package*.json ./
 RUN npm install
 COPY --link eslint.config.js vite.config.js index.html ./
 COPY --link ./public ./public
 COPY --link ./src ./src
+
+FROM base AS dev
+CMD ["npm", "run", "dev"]
+
+FROM base AS build
 RUN npm run build && ls dist
 
 FROM alpine

README.md

@@ -6,37 +6,31 @@ This repo contains the code for the Docker Desktop extension for Labspaces.
 
 To develop the extension, run the following steps:
 
-1. Install the NPM dependencies:
+1. Start the app with Compose Watch:
 
    ```console
-   npm install
+   docker compose up --watch
    ```
 
-2. Start the app:
-
-   ```console
-   npm run dev
-   ```
-
-3. If you don't have the extension installed yet, install it:
+2. If you don't have the extension installed yet, install it:
 
    ```console
    docker extension install dockersamples/labspace-extension
    ```
 
-4. Enable debug mode for the extension (to get the Chrome developer tools):
+3. Enable debug mode for the extension (to get the Chrome developer tools):
 
    ```console
    docker extension dev debug dockersamples/labspace-extension
    ```
 
-5. Set the UI source for the extension to be your development environment:
+4. Set the UI source for the extension to be your development environment:
 
    ```console
    docker extension dev ui-source dockersamples/labspace-extension http://localhost:5173
    ```
 
-6. Open the extension in Docker Desktop. It will now be using the Vite reload server for the UI, allowing you to make changes and see them reflected immediately.
+5. Open the extension in Docker Desktop. It will now be using the Vite reload server for the UI, allowing you to make changes and see them reflected immediately.
 
 ## Deep link support
 

compose.yaml

@@ -0,0 +1,27 @@
+services:
+  app:
+    build:
+      context: ./
+      target: dev
+    ports:
+      - 5173:5173
+    develop:
+      watch:
+        - path: ./
+          action: sync
+          target: /usr/local/app
+          initial_sync: true
+          ignore:
+            - dev/**
+            - compose.yaml
+            - Dockerfile
+            - node_modules
+        - path: ./package-lock.json
+          action: rebuild
+
+  assets:
+    build: ./dev
+    ports:
+      - 80:80
+    volumes:
+      - ./dev/src:/usr/share/nginx/html

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",