Building a Minimalist Docker Image with Node, TypeScript
Tags: pnpm, docker
Published: 2023-09-06 06:21:07


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

```sh
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

```sh
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

```sh
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. 

```sh
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**

1. No proper build stage
2. Ships with development dependencies as well

```sh
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

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


## Why [Speedy Web Compiler](https://swc.rs/) ?

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](https://github.com/Songkeys/tswc), which compiles the files using swc 

Here is the complete Dockerfile

```sh
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

```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

```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