CI/CD Deployment pipeline for a React application using Next.js, Cypress, CircleCi and Netlify in 5 minutes

Prerequisites:

  • An existing react application published on Github (the repo can be private)
  • CircleCi (I’ve chosen this platform due to the ease of use of the service, the same outcome can be accomplished using any different CI/CD platform)
  • Cypress (for this example we will use cypress, but feel free to replace it with jest or any other library you want or have a mix in between)
  • Netlify (any other web host works as long as it futures webhooks that can trigger deployments)
  • Yarn

Let’s get started

First step

To begin with, create a CircleCi account in case you don’t already have one and link your existing GitHub repository to it.

Second step

To continue you need to integrate a test suite in your existing react application. For this example, we will continue with Cypress which is a library meant to write end to end tests for web applications.

  1. Install the node packages
yarn add -D cypress start-server-and-test
yarn run cypress open
  • cypress/fixtures → mock server response
  • cypress/integration → these our UI tests
  • cypress/plugins → cypress plugins
  • cypress/supports → reusable functions to use in our tests
  • cypress/integration/examples
/// <reference types="cypress" />// Welcome to Cypress!
// To learn more about how Cypress works and
// what makes it such an awesome testing tool,
// please read our getting started guide:
// <https://on.cypress.io/introduction-to-cypress>
describe('Testing the hero section of the home page', () => {
beforeEach(() => {
// Cypress starts out with a blank slate for each test
// so we must tell it to visit our website with the `cy.visit()` command.
// Since we want to visit the same URL at the start of all our tests,
// we include it in our beforeEach function so that it runs before each test
// we also setup the viewport
cy.viewport(1920, 1080)
cy.visit('/')
})
it('It works!', () => {
expect(true).to.equal(true)
})
})
yarn test:e2e
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"export": "next export",
"prod": "next build && next export && serve -s out",
"test:cy": "cypress open",
"test:e2e": "start-server-and-test dev 3000 'cypress run --record --key <YOURKEY>'"
},
  • test:cy will open the cypress GUI
  • test:e2e will start the server in dev mode on the 3000 port then run cypress
{
"baseUrl": "<http://localhost:3000>",
"projectId": "xxxxxx"
}

Third step

Now that we have cypress up and running we want to set up the pipeline for our project.

version: 2.1
jobs:
build:
working_directory: ~/app
docker:
- image: circleci/node:14.18.2
steps:
- checkout
- run:
name: Install Yarn
command: curl -o- -L <https://yarnpkg.com/install.sh> | bash
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install Dependencies
command: yarn
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- ./node_modules
- run:
name: Build project
command: yarn build
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- ./node_modules
- run:
name: Export project
command: yarn export
test:
docker:
- image: cypress/base:14.17.0
environment:
## this enables colors in the output
TERM: xterm
working_directory: ~/app
steps:
- checkout
- restore_cache:
keys:
- v1-deps-{{ .Branch }}-{{ checksum "package.json" }}
- v1-deps-{{ .Branch }}
- v1-deps
- run:
name: Install Yarn
command: curl -o- -L <https://yarnpkg.com/install.sh> | bash
- run:
name: Install Dependencies
# yarn installs the app dependencies
command: yarn && yarn global add serve
- save_cache:
key: v1-deps-{{ .Branch }}-{{ checksum "package.json" }}
paths:
- ~/.cache ## cache both yarn and Cypress!
- run: yarn test:e2e
deploy:
working_directory: ~/app
docker:
- image: curlimages/curl:7.81.0
# use the webhook from netlify that was added as a env var to the circleci project to trigger the build
steps:
- run:
name: Deploy
command: curl -X POST -d {} $DEPLOY_WEBHOOK
workflows:
version: 2
build_and_test:
jobs:
- build
- test
# deploy only if the build and the test steps go through
- deploy:
requires:
- build
- test
  1. Build the production application
  2. Run the test suite using cypress and record the results
  3. Deploy our project to our web host (netlify)
steps:
- run:
name: Deploy
command: curl -X POST -d {} $DEPLOY_WEBHOOK

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store