products

Example CI configs

Code samples of my common continuous integration configuration files for GitHub Actions, CircleCI

Each snippet typically installs dependencies (with caching), runs tests and publishes new version to NPM and GitHub using semantic-release.

GitHub Actions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
name: ci
on: push
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎
        uses: actions/[email protected]

      - name: Install NPM dependencies 📦
        uses: bahmutov/[email protected]

      - name: Run tests 🧪
        run: npm test

      - name: Show GitHub variables 📊
        run: npm run github-demo

      - name: Semantic Release 🚀
        uses: cycjimmy/[email protected]
        with:
          # release from the main branch
          branch: main
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

Example repositories print-env, make-empty-github-commit, cypress-book, cypress-timings.

Read more about GitHub Actions in Trying GitHub Actions blog post. If you are doing Cypress End-to-end tests, I recommend using Cypress GitHub Action.

Tip: when using NPM module caching, Do Not Let NPM Cache Snowball on CI.

Tip: the badge for specific branch is:

1
2
3
[![ci status][ci image]][ci url]
[ci image]: https://github.com/bahmutov/<repo name>/workflows/<workflow name>/badge.svg?branch=<branch name>
[ci url]: https://github.com/bahmutov/<repo name>/actions

CircleCI

See CircleCI config reference

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
version: 2.1
orbs:
  # Circle Node orb makes it simple to cache dependencies
  # https://circleci.com/orbs/registry/orb/circleci/node
  node: circleci/[email protected]
jobs:
  build:
    executor:
      name: node/default
      tag: '12'
    steps:
      - checkout
      - node/with-cache:
          steps:
            - run:
                name: install dependencies 📦
                command: npm ci
      - run:
          name: run tests 🧪
          command: npm run e2e
      - run:
          name: NPM publish 🚀
          command: npm run semantic-release

Example repositories term-to-html, bahmutov/cypress-realworld-app.

If you are doing Cypress End-to-end tests, I recommend using Cypress CircleCI Orb

Tip: form the CircleCI project badge URL using https://circleci.com/docs/2.0/status-badges/, the format for specific branch is: [![CircleCI](https://circleci.com/gh/bahmutov/<repo name>/tree/<branch name>.svg?style=svg)](https://circleci.com/gh/bahmutov/<repo name>/tree/<branch name>)

Emoji

In the code samples above I am using emoji to quickly see each step.

Emoji Step

🛎

| Code check out from the repo

📦

| Installing and caching dependencies

🧹

| Linting source code

🧩

| Checking types, for example using `tsc --noEmit`

💅

| Running [Prettier formatter](./configure-prettier-in-vscode/)

🚦

| Some sanity check before continuing

🏗

| Building application

🚛

| Moving or preparing application

🗑

| Delete file or folder

🧪

| Running tests

💨

| Running smoke tests

📊

| Running a demo step

📈

| Check code coverage

🚀

| Releasing a new version

Here is how it looks in GitHub Actions

Emoji in GitHub Actions

Note: please do not use emoji in the job names - otherwise your GitHub commit status checks will stop working.