In this tutorial, we will walk through the process of building a Dockerized TypeScript application with a continuous integration and continuous deployment (CI/CD) workflow. This guide is designed for developers who want to automate their deployment pipeline and ensure consistent environments across development, testing, and production.

Prerequisites

  • Basic knowledge of Docker and Docker Compose
  • Familiarity with TypeScript and Node.js
  • Experience with CI/CD tools like GitHub Actions or GitLab CI
  • Installed Docker and a code editor (e.g., VS Code)

Setting Up the TypeScript Application

Create a new directory for your project and initialize a new Node.js project:

mkdir my-typescript-app

cd my-typescript-app

npm init -y

Install TypeScript and necessary dependencies:

npm install typescript ts-node @types/node --save-dev

Initialize TypeScript configuration:

npx tsc --init

Create a simple TypeScript file:

src/index.ts

Add the following code:

console.log('Hello, Dockerized TypeScript!');

Creating the Dockerfile

In the root directory, create a file named Dockerfile:

FROM node:14-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npx tsc

CMD ["node", "dist/index.js"]

Setting Up CI/CD Workflow

Choose a CI/CD platform such as GitHub Actions. Create a workflow file in .github/workflows/ci-cd.yml:

name: CI/CD Pipeline

on:

push:

jobs:

build:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v2

- name: Set up Docker Buildx

uses: docker/setup-buildx-action@v1

- name: Login to DockerHub

uses: docker/login-action@v1

with:

username: ${{ secrets.DOCKER_USERNAME }}

password: ${{ secrets.DOCKER_PASSWORD }}

- name: Build and push Docker image

uses: docker/build-push-action@v2

with:

context: .

push: true

tags: user/my-typescript-app:latest

Deploying the Application

Once the image is pushed to Docker Hub, deploy it to your server or cloud platform. You can use Docker Compose or Kubernetes for orchestration. Here's an example Docker Compose file:

version: '3'

services:

app:

image: user/my-typescript-app:latest

ports:

- "3000:3000"

Start the container:

docker-compose up -d

Conclusion

By following this tutorial, you have set up a TypeScript application inside a Docker container, automated the build and deployment process with CI/CD, and prepared your app for scalable deployment. This workflow ensures consistent environments and rapid delivery of updates to your users.