Ship a Next.js App with a CI/CD Pipeline.

January 8, 2022

This article is a follow up to a live stream that I recorded in 2 parts. In this live stream we did the following:

• We shipped a small Next.js Single Page App to a digital ocean droplet running Ubuntu. We did this without any third party service by using a conventional web server called nginx.

• Along the way, we also built a CI/CD pipeline for this right inside GitHub using GitHub Actions. This allowed us to automate running tests and also automate deployments to our web server upon each commit.
What’s a CI/CD Pipeline? Read from here.

Bonus Points.

• Completely written in TypeScript.

• Integration tests written using a headless browser and cypress.

• The app used React Query to fetch data from the API.

Part 1 - Building the App & Writing Tests.

References:

Institutions API GitHub Repository (https://github.com/MustansirZia/institutions-api)
Next.js (https://nextjs.org)
nginx (https://www.nginx.com)
GitHub Actions (https://github.com/features/actions)
Cypress (https://www.cypress.io)
React Query (https://react-query.tanstack.com)
TypeScript (https://www.typescriptlang.org)

Bonus Points.

Part 1 - Building the App & Writing Tests.

Part 2 - Building the Pipeline on GitHub Actions.

Please subscribe to my YouTube channel as I plan to do more of such recordings.

All the code for this project lives on this open source repository.

Clap for this article on Medium?

References:

Read more