Gitlab CI For A TypeScript Project Bootstrapped With TSDX

Since I started working at Saturday Drive I've spent a lot of time learning about CI/CD using self-hosted Gitlab. Sometimes these projects can be huge rabbit holes. It's nice when they are easy. I will write some more posts from what I learned from adventures, but let's start with an easier one: TypeScript.

I start most TypeScript projects using a zero config tool called tsdx by Jared Palmer. With tsdx, you get everything you need to start a TypeScript or React + TypeScript project: the compiler configured, a watcher for development, testing with Jest, and a build script. There is even an option to add Storybook.

In this post, I'll show you how to add test automation. In the next post, I'll show how to add deployment of a documentation site and publishing to the npm registry. The example code is based on a project that runs in self-hosted Gitlab, but should work with Gitlab.com.

Adding Gitlab CI/ CD To tsdx

Before adding CI/ CD to the project, you need a project to work with. Creating one with tsdx takes one line:

npx tsdx create project-name

You will be asked what template to use, chose which ever one meets your needs.

Once this installs, you will need to a .gitlab-ci.yml file. Here is a basic one that runs the tests for the TypeScript project bootstrapped with tsdx:

# Test with latest node version
image: node:latest

# Cache dependencies
cache:
  paths:
    - node_modules/

# Run unit tests
test:
  script:
    # Install
    - yarn
    # Run Jest in CI mode
    - yarn test --ci

This is a one stage, one job pipeline that uses Jest's --ci flag to run the tests once. It also means it will fail if any snapshots do not match.

Push that to Gitlab, and then go to the "Pipelines" screen under the "CI/CD" menu of your repo to see if it worked. Now along with, test-driven development and gitflow you can use Gitlab for continuous integration -- the CI in CI/CD -- of your changes. Gitlab has a "merge when pipeline passes" option you can check in merge requests.

Using TypesScript means that the command yarn test --ci is not just running automated tests. It's actually compile time static analysis and then testing. TypeScript compiler errors have to be fixed or the pipeline fails.

Deploying Comes Next

This is a short post about adding testing.

The second half of CI/ CD is continuous deployment. Whenever we merge to master, we want a deployment, whatever that means to run automatically. In this case, I'm developing a resuable software package. So I have to deploy a documentation site and deploy to a package registry such as NPM.

I'll be writing that post, more about Gitlab CI and TypeScript, follow me to be notified when those post become alive.

Featured Image by frank mckenna on Unsplash