Builder pattern before multi-stage in Docker - Step-by-Step Execution

Process Flow - Builder pattern with multi-stage

Start: Write Dockerfile

↓

Build full image with builder tools

↓

Run build commands inside image

↓

Copy build artifacts from builder

↓

Create smaller runtime image

↓

Copy artifacts into runtime image

↓

Final image ready for deployment

This flow shows the builder pattern with multi-stage builds: build everything in the builder stage, then copy artifacts to a smaller runtime image.

Execution Sample

Docker

FROM node:14 as builder
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . ./
RUN npm run build

FROM node:14-slim
WORKDIR /app
COPY --from=builder /app/build ./build
CMD ["node", "build/index.js"]

This Dockerfile builds the app in a full node image, then copies only the build output to a smaller runtime image.

Process Table

Step	Action	Image State	Result
1	Start with 'node:14' as builder	Builder image created	Ready to install dependencies
2	Copy package.json	package.json in /app	Files ready for npm install
3	Run npm install	node_modules installed	Dependencies ready
4	Copy source code	Source code in /app	Ready to build
5	Run npm run build	Build output in /app/build	Build artifacts created
6	Start new image 'node:14-slim'	Clean runtime image	Smaller base image
7	Copy build artifacts from builder	Build files in runtime image	Only needed files copied
8	Set CMD to run app	Runtime image ready	Image ready to run app
9	Build complete	Final image created	Ready for deployment

💡 All build steps done; final image contains only runtime files, no build tools

Status Tracker

Variable	Start	After Step 3	After Step 5	After Step 7	Final
/app contents	empty	package.json + node_modules	package.json + node_modules + source + build output	build output only	build output only
Image size	base size	larger (with node_modules)	even larger (with build tools)	smaller (runtime only)	smaller (runtime only)

Key Moments - 3 Insights

Why do we need two FROM lines in the Dockerfile?

Because the first FROM creates the builder image with all tools to build the app, and the second FROM creates a smaller runtime image. This is shown in execution_table steps 1 and 6.

How do build artifacts get from the builder image to the runtime image?

They are copied using COPY --from=builder, as shown in step 7 of the execution_table.

Why is the final image smaller than the builder image?

Because it only contains the build output and runtime dependencies, not the full build tools or source code, as shown by the variable_tracker for image size after step 7.

Visual Quiz - 3 Questions

Look at the execution_table at step 5. What is present in the builder image?

A Source code, node_modules, and build output

B Only build output

C Only source code and build output

D Empty /app directory

💡 Hint

Check the 'Image State' column at step 5 in execution_table

At which step does the runtime image get the build artifacts copied in?

A Step 4

B Step 6

C Step 7

D Step 8

💡 Hint

Look for the COPY --from=builder action in execution_table

If we skipped step 3 (npm install), what would happen to the build output?

A Build output would be created normally

B Build would fail due to missing dependencies

C Build output would be empty but image size same

D Runtime image would be larger

💡 Hint

Step 3 installs dependencies needed for build, check execution_table step 3

Concept Snapshot

Builder pattern with multi-stage uses multiple FROM lines.
First stage builds app with all tools.
Second stage is smaller runtime.
Build artifacts copied using --from.
Final image is smaller and cleaner.

Full Transcript

This visual execution shows how the builder pattern works with multi-stage Docker builds using multiple FROM lines. First, a full image with build tools is created. Then the app is built inside it. After that, a smaller runtime image is created. Build artifacts are copied from the builder image to the runtime image. This reduces final image size by excluding build tools. The execution table traces each step from starting the builder image, installing dependencies, building the app, to copying artifacts and setting the runtime command. The variable tracker shows how the /app directory contents and image size change after key steps. Key moments clarify why two FROM lines are needed, how copying works, and why the final image is smaller. The quiz tests understanding of image contents at each step and consequences of skipping steps. This pattern leverages Docker multi-stage builds for efficient images.