CI/CD pipeline for TypeScript: setting up from scratch on PythonLib

Online Python Trainer for Beginners

Learn Python easily without overwhelming theory. Solve practical tasks with automatic checking, get hints in Russian, and write code directly in your browser — no installation required.

Start Course

CI/CD pipeline for TypeScript: setting up from scratch — a step-by-step guide

\n\n

You've written a cool project in TypeScript. The code is beautiful, the types are strict, the logic is sound. But every time you need to push an update to the server, you manually run the build, check if anything broke, and pray the production doesn't crash. Sound familiar?

\n\n

It's time to change that. A CI/CD pipeline isn't magic reserved for seniors with twenty years of experience. It's a tool that automates the routine: linting, tests, building, and deployment. One commit to the branch — and everything goes to production automatically, without the stress.

\n\n

In this article, we will set up a full CI/CD pipeline for a TypeScript project from scratch. Using GitHub Actions as an example — a free and powerful tool. You will learn how to:

\n
    \n
  • Add automatic linting and formatting
  • \n
  • Run unit tests and check types
  • \n
  • Build the application and deploy to a remote server
  • \n
  • Avoid common mistakes when setting up CI/CD
  • \n
\n\n

Ready? Let's go!

\n\n

Why CI/CD is critically important for a TypeScript project

\n\n

TypeScript is a strictly typed language that compiles to JavaScript. At first glance, this gives an illusion of safety: if the code compiles, it must be working. But in practice, compilation doesn't catch logical errors, API issues, or broken dependencies.

\n\n

CI/CD (Continuous Integration / Continuous Deployment) solves this problem:

\n
    \n
  • Automatic checks: every commit goes through the pipeline — linting, tests, compilation. If something breaks, you'll know about it in a minute, not a week later.
  • \n
  • Unified standard: the whole team works by the same rules. No one will forget to run tests before pushing.
  • \n
  • Fast deployment: no more manual commands on the server. One merge to main — and the update is already on the live site.
  • \n
\n\n

CI/CD is especially important for TypeScript because type errors can only appear at runtime if compilation isn't set up correctly. The pipeline prevents this.

\n\n

Step 1: Preparing the TypeScript project

\n\n

Before setting up CI/CD, make sure the project is ready for automation. Here's the minimum set:

\n
    \n
  • package.json with defined scripts
  • \n
  • tsconfig.json — TypeScript config
  • \n
  • ESLint and Prettier — for code consistency
  • \n
  • Tests (Jest, Vitest, or Mocha)
  • \n
\n\n

Let's say you have a simple project. The structure might look like this:

\n\n
my-ts-project/\n├── src/\n│   ├── index.ts\n│   └── utils.ts\n├── tests/\n│   └── utils.test.ts\n├── .eslintrc.json\n├── .prettierrc\n├── tsconfig.json\n├── package.json\n└── README.md\n
\n\n

Make sure the scripts are defined in package.json:

\n\n
{\n  "scripts": {\n    "lint": "eslint src/ tests/ --ext .ts",\n    "format": "prettier --check src/ tests/",\n    "type-check": "tsc --noEmit",\n    "test": "jest",\n    "build": "tsc",\n    "start": "node dist/index.js"\n  }\n}\n
\n\n

Now the project is ready for CI/CD. If anything is missing — add it. The pipeline will call exactly these commands.

\n\n

Step 2: Choosing a CI/CD platform

\n\n

There are many options: Jenkins, GitLab CI, CircleCI, Travis CI. But for beginners and small projects, GitHub Actions is the best choice:

\n
    \n
  • Built into GitHub — no need to set up anything separately
  • \n
  • Free tier: 2000 minutes per month (for private repositories)
  • \n
  • Huge ecosystem of ready-made actions
  • \n
  • Clear YAML syntax
  • \n
\n\n

If your code is on GitLab — use GitLab CI (the description is almost the same). But in this article, we work with GitHub.

\n\n

Step 3: Creating the CI/CD pipeline — the first file

\n\n

In the root of the project, create a folder .github/workflows/, and inside it, a file ci.y

Blogs

Book Recommendations