How To Set Up A Continuous Integration Pipeline with Github and Next.JS

I wanted to learn a bit more about Continuous Integration Pipelines, so I took the opportunity with Nicole Woodcock working on MB Javascript Hacks: Social Justice Hack Week.

What is Continuous Integration?

Continuous integration safely allows multiple users to contribute to one repository on Github. In essence continuous integration gives us a safety net to stop us pushing bad or broken code to our production build and hence our deployment.

Jest test runner in action

Setting Up Your Next.JS Project For CI

Assuming you have set up your Next.JS project using:

npm install -D jest @testing-library/react @testing-library/jest-dom @testing-library/dom babel-jest
yarn add -D jest @testing-library/react @testing-library/jest-dom @testing-library/dom babel-jest
{   
"presets": ["next/babel"]
}

"jest": {
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/"
],
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest"
},
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}
"scripts": {
...
"test": "jest"
},
version: 2.1
jobs:
build:
working_directory: ~/repo
docker:
- image: circleci/node:10.16.3
steps:
- checkout
- run:
name: Update NPM
command: "sudo npm install -g npm@5"
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install Dependencies
command: npm install
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- ./node_modules
- run:
name: Run tests
command: npm run test --passWithNoTests
version: 2.1
jobs:
build:
working_directory: ~/repo
docker:
- image: circleci/node:10.16.3
steps:
- checkout
- run:
name: yarn update
command: "sudo npm install -g yarn"
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install Dependencies
command: yarn install
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- ./node_modules
- run:
name: yarn run tests
command: yarn run test --passWithNoTests

Setting Up With CircleCI

Once you have set up your project in your IDE, you will want to go to CircleCI and if you haven’t already make an account.

- run:
name: Install Dependencies
//yarn install is the correct syntax also .yml files are white space sensitive which can cause build failures
command: yarn add

What happens now when I create a pull request or push something to the main branch?

When you submit the pull request or push some code to the main branch with the CI automation pipeline set up one of two things can happen. Your code can pass all of the tests and checks that CircleCI (and your deployment platform) needs to create a non crashing and successful build:

A successful pull request passing checks on CircleCI and Vercel — awaiting review

About the Author

  • JavaScript
  • JQuery
  • CSS3
  • MySQL/PostgreSQL
  • Bootstrap
  • MaterialUI
  • React
  • Redux