Improve Docker build caching

Dockerfile

@@ -1,24 +1,54 @@
-FROM docker.io/node:18-alpine
-# This is the public node url of the wundergraph node you want to include in the generated client
-ARG wg_public_node_url
+# syntax=docker/dockerfile:1.2
 
+##########################################################################
+# Stage: deps
+##########################################################################
+FROM docker.io/node:18-alpine AS deps
 WORKDIR /app
+COPY package.json package-lock.json ./
 
-COPY package.json package-lock.json /app/
 # We place the binary in /usr/bin/wunderctl so we can find it without a relative path
-ENV CI=true WG_COPY_BIN_PATH=/usr/bin/wunderctl
-# Ensure you lock file is up to date otherwise the build will fail
-RUN npm ci --prefer-offline --no-audit
+ENV WG_COPY_BIN_PATH=/usr/bin/wunderctl
+ENV CI=true
+# advanced mount options for caching npm even when docker-cache is busted
+RUN --mount=type=cache,target=/usr/src/app/.npm \
+    : npm install and cache \
+    && npm set cache /app/.npm \
+    && npm ci --prefer-offline --no-audit
+
+##########################################################################
+# Stage: builder
+##########################################################################
+FROM deps as builder
+
 # Copy the .wundergraph folder to the image
 COPY .wundergraph ./.wundergraph
 
 # Listen to all interfaces, 127.0.0.1 might produce errors with ipv6 dual stack
-ENV WG_NODE_URL=http://127.0.0.1:9991 WG_NODE_INTERNAL_URL=http://127.0.0.1:9993 WG_NODE_HOST=0.0.0.0 WG_NODE_PORT=9991 WG_NODE_INTERNAL_PORT=9993 WG_SERVER_URL=http://127.0.0.1:9992 WG_SERVER_HOST=127.0.0.1 WG_SERVER_PORT=9992
+ENV WG_NODE_HOST=0.0.0.0
+ENV WG_NODE_PORT=9991
+ENV WG_NODE_URL=http://${WG_NODE_HOST}:${WG_NODE_PORT}
+ENV WG_NODE_INTERNAL_HOST=127.0.0.1
+ENV WG_NODE_INTERNAL_PORT=9993
+ENV WG_NODE_INTERNAL_URL=http://${WG_NODE_INTERNAL_HOST}:${WG_NODE_INTERNAL_PORT}
+ENV WG_SERVER_HOST=127.0.0.1
+ENV WG_SERVER_PORT=9992
+ENV WG_SERVER_URL=http://${WG_SERVER_HOST}:${WG_SERVER_PORT}
 # We set the public node url as an environment variable so the generated client points to the correct url
 # See for node options a https://docs.wundergraph.com/docs/wundergraph-config-ts-reference/configure-wundernode-options and
 # for server options https://docs.wundergraph.com/docs/wundergraph-server-ts-reference/configure-wundergraph-server-options
+# This is the public node url of the wundergraph node you want to include in the generated client
+
+ARG wg_public_node_url
 ENV WG_PUBLIC_NODE_URL=${wg_public_node_url}
+
 RUN wunderctl generate --wundergraph-dir=.wundergraph
+
+##########################################################################
+# Stage: dev
+##########################################################################
+FROM builder AS dev
+
 # Expose only the node, server is private
 EXPOSE 9991
 CMD wunderctl start --wundergraph-dir=.wundergraph

README.md

@@ -25,18 +25,14 @@ This repository instructs you how to build a docker container for WunderGraph. I
 
 ### Test
 
+Just run
+
 ```shell
-# Install your project to generate a lockfile
-npm i
-# Build the docker image. Set public url to generate a compatible client 
-docker build --build-arg wg_public_node_url=https://your-public-url.com \
-             -t wundergraph .
+docker compose up --build -V
 ```
 
-Run `docker run -p 9991:9991 wundergraph:latest` to test your image.
-
 ### Get dragons
 
 ```shell
 curl -X GET http://localhost:9991/operations/Dragons
-```
+```

docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  web:
+    build:
+      context: ./
+      target: dev
+    image: wundergraph:dev
+    volumes:
+       - .:/app
+       - /app/node_modules
+       - /app/.wundergraph/generated
+    ports:
+      - 9991:9991