Building a Minimalist Docker Image with Node, TypeScript

Jake — Wed, 06 Sep 2023 06:21:07 +0000

In this article we are going to have a look at creating a production grade docker image with Node.JS, TypeScript.

We are also going to use the speedy web compiler to compile the source code blazing fast.

Here is the summary

Category	Tool / Method
Package Manager	pnpm
Compilation - Development	ts-node via swc
Build - Production	tswc

Lets dive right in.

Now break the steps and optimise the build image one by one.

Stage 1 : Prepare base image

FROM node:20-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
COPY . /app
WORKDIR /app

We're enabling pnpm using corepack. Your package.json should have "packageManager": "pnpm@8.6.6". You can refer the complete package.json in the document below.

Stage 2 : Production Dependencies

FROM base AS prod-deps
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile

--mount=type=cache: Tells Docker to mount a cache during the build process. This cache will store data across builds, improving build speed by reusing data.

id=pnpm: This is an identifier for the cache. If multiple projects use the same identifier, they will share the same cache, although this could be risky due to possible data contamination between unrelated projects.

target=/pnpm/store: Specifies where in the Docker image the cache should be stored.

Stage 3 : Both production and dev dependencies, Build the codebase

FROM base AS build
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile

RUN pnpm run build

Stage 4 : Copy source, production dependencies and run the source.

FROM gcr.io/distroless/nodejs20-debian11

COPY --from=prod-deps /app/node_modules /app/node_modules
COPY --from=build /app/dist /app/dist
COPY --from=build /app/package.json /app/package.json

WORKDIR /app

ENV PORT=5000
EXPOSE 5000

CMD [ "dist/index.js"]

The image size is 160mb

Comparing against my old simple docker setup. Old setup was based on a alpine image. The build image size was round 650mb

No proper build stage
Ships with development dependencies as well

FROM node:18.16.0-alpine


RUN apk add \
    curl \
    git \
    && rm -rf /var/cache/* \
    && mkdir /var/cache/apk

RUN mkdir -p /app
WORKDIR /app

RUN mkdir -p /bin && curl -fsSL "https://github.com/pnpm/pnpm/releases/download/v8.6.3/pnpm-linuxstatic-x64" -o /bin/pnpm; chmod +x /bin/pnpm;


ENV PATH /app/node_modules/.bin:$PATH

ADD package.json pnpm-lock.yaml .npmrc /app/

RUN pnpm install

ADD . /app

RUN pnpm run build

EXPOSE 5000

CMD [ "pnpm", "start" ]

The secret sauce - distroless image

A "distroless" image is a stripped-down container image that contains only the application and its runtime dependencies. Just your application dependencies and nothing else. No build tools, shell, package managers or anything. You can check that on the 4th stage. Thanks Google !

Here are the advantages

Minimised attack surface. We can just focus on the attacks on the app layer.
Small image size.
Improved performance and reduced storage utilisation
As the size of much smaller, it can be pulled and deployed pretty fast.
With fewer components, there are fewer elements to manage and update.

Why Speedy Web Compiler ?

SWC is a super-fast TypeScript / JavaScript compiler written in Rust. We can use SWC for both development and production environments as well. In this setup we are using swc to speed up the compilation time of both development and production.

In development environment swc is used along with ts-node and in production we're using tswc, which compiles the files using swc

Here is the complete Dockerfile

FROM node:20-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
COPY . /app
WORKDIR /app

FROM base AS prod-deps
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile

FROM base AS build
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
RUN pnpm run build


FROM gcr.io/distroless/nodejs20-debian11

COPY --from=prod-deps /app/node_modules /app/node_modules
COPY --from=build /app/dist /app/dist
COPY --from=build /app/package.json /app/package.json

WORKDIR /app

ENV PORT=5000
EXPOSE 5000

CMD [ "dist/index.js"]

Here is the tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "moduleResolution": "node",
    "module": "CommonJS",
    "outDir": "dist/",
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node",
    "files": true,
    "swc": true,
    "esModuleInterop": true
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*.ts", "src/*.ts"]
}

Here is the package.json

{
  "name": "docker-typescript-pnpm",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nodemon",
    "build": "time tswc",
    "start": "node dist/index.js"
  },
  "packageManager": "pnpm@8.6.6",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "4.0.0",
    "express": "^4.18.2",
    "helmet": "^5.1.1"
  },
  "devDependencies": {
    "@swc/core": "^1.3.78",
    "@types/cors": "^2.8.13",
    "@types/express": "^4.17.17",
    "@types/node": "^20.5.1",
    "nodemon": "^2.0.22",
    "ts-node": "^10.9.1",
    "tswc": "^1.2.0",
    "typescript": "^5.1.6"
  }
}

Here is the source code for this setup : https://github.com/JacobSamro/docker-typescript-pnpm

DEV Community: Jake