How to Set Up Your First CircleCI Pipeline in 10 Minutes

CircleCI is a Continuous Integration and Continuous Deployment (CI/CD) platform that automates the process of building, testing, and deploying code.

Github Repo : https://github.com/jhm164/CircleCiProject

What Are We Building?

This guide will set up a CI/CD pipeline using CircleCI for a Node.js Express API.

The pipeline will:

• Build the API using Webpack.
• Run automated tests to ensure code quality.
• Package the API as a Docker image and push it to Docker Hub for deployment.

Step 1: Prerequisites

Before setting up CircleCI, ensure you have:

• A Node.js Express API repository on GitHub.
• A Docker Hub?accounts for storing images (here).
• Basic knowledge of Webpack, Docker, and YAML would be helpful.

Step 2: Create a Node.js Express API Project

Before setting up the CircleCI pipeline, we need a Node.js Express API as our project. If you already have one, you can skip this step.

Initialize a New Node.js Project

First, create a new folder for your project and initialize it:

mkdir circleci-nodejs-api && cd circleci-nodejs-api
npm init -y
npm install express
npm install --save-dev nodemon jest supertest        

Create the API Server

src/index.js

const express  = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.status(200).send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

module.exports = app;        

Write test case

src/index.test.js

const request = require('supertest');
const express = require('express');

const app = express();
app.get('/', (req, res) => {
	res.send('Hello World!');
});

describe('GET /', () => {
	it('should return Hello World', async () => {
		const res = await request(app).get('/');
		expect(res.statusCode).toEqual(200);
		// expect(res.text).toBe('Hello World!');
	});
});        

Step 3: Set Up CircleCI for Your Node.js Express API

Now that we have a working Node.js Express API, we’ll configure CircleCI to automate building, testing, and deploying our app

Create a .circleci/config.yml File

mkdir .circleci
touch .circleci/config.yml        

Open .circleci/config.yml and add the following:

version: 2.1
orbs:
  node: circleci/[email protected]

jobs:
  build_and_test:
    executor: node/default
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: yarn
      - run:
          command: yarn test
          name: Run tests
      - run:
          command: yarn build
          name: Build app
      - persist_to_workspace:
          root: ~/project
          paths:
            - .

  docker_build_and_push:
    docker:
      - image: docker:20.10.7
    steps:
      - checkout
      - setup_remote_docker
      - run:
          name: Debug - Check Files in Repo
          command: ls -la
      - run:
          name: Build Docker Image
          command: docker build -t $DOCKER_USERNAME/myapp:${CIRCLE_SHA1} .
      - run:
          name: Login to Docker Hub
          command: echo $DOCKER_TOKEN | docker login -u $DOCKER_USERNAME --password-stdin
      - run:
          name: Push Docker Image
          command: docker push $DOCKER_USERNAME/myapp:${CIRCLE_SHA1}

workflows:
  test_my_app:
    jobs:
      - build_and_test
      - docker_build_and_push:
          requires:
            - build_and_test
        

Create Dockerfile in the root directory

# Use an official Node.js runtime as a parent image
FROM node:18

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json first to leverage Docker cache
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn install --frozen-lockfile

# Copy the rest of the application files
COPY . .

# Expose port (if your app runs on port 3000)
EXPOSE 3000

# Define the command to run your app
CMD ["yarn", "start"]
        

Sign Up & Log In to CircleCI

1. Go to CircleCI's website
2. Click Sign Up (or Log In if you already have an account).
3. Sign in using GitHub (recommended).

Add Environment Variables in CircleCI

To push the Docker image, add environment variables in CircleCI:

1. Go to CircleCI Dashboard → Select your project → Project Settings.
2. Click Environment Variables and add:DOCKERHUB_USERNAME → Your Docker Hub username.DOCKERHUB_PASSWORD → Your Docker Hub password or token.

Trigger Your First Build

Once everything is set up:

• Push your code to GitHub
• Trigger pipeline manually

If Everything works fine you will see a new docker image published