Release Checklist

Back to Documentation Intro Contents

info

See Release for more information on the release phase of the SDLC.

Checklist

Use this checklist tool for each site released - frontendchecklist.io

Versioning

Use (MAJOR.MINOR.PATCH) to communicate the nature of changes:

MAJOR (1.0.0 -> 2.0.0) - Breaking changes that require consumer updates
MINOR (1.0.0 -> 1.1.0) - New features that are backwards-compatible
PATCH (1.0.0 -> 1.0.1) - Bug fixes and minor improvements

Adopt the Conventional Commits format for your commit messages:

feat: add user dashboard - triggers a MINOR version bump
fix: correct login redirect - triggers a PATCH version bump
feat!: redesign API response format - triggers a MAJOR version bump

Automated Version Bumping

Automate version bumping and changelog generation using one of these tools:

semantic-release - Fully automated versioning based on commit messages
Changesets - Explicit changeset files for more control
Release Please - GitHub-native release automation

Automate Your Changelog

Tools like semantic-release parse your Conventional Commits and automatically generate release notes, create GitHub releases, and bump version numbers. This eliminates manual changelog maintenance and ensures every release is properly documented.

info

See Release - Versioning for more detail on versioning strategies and release management.

Feature flags decouple deployment from release. Code can be deployed to production but hidden behind a flag until you are ready to activate it.

Why Use Feature Flags?

Progressive rollout - Enable a feature for a subset of users first, monitor, then roll out to everyone
Kill switches - Instantly disable a problematic feature without a new deployment
Incomplete features - Deploy work-in-progress code safely behind a flag

Implementation Options

For solo developers, start simple and scale up:

Simple: Environment variables (NEXT_PUBLIC_ENABLE_NEW_DASHBOARD=true)
Better: Flagsmith (open-source, free tier) or Unleash (self-hosted)
Best: LaunchDarkly (managed platform with analytics)

Flag Hygiene

Feature flags are . Once a feature is fully rolled out and stable, remove the flag and its conditional code. Review and clean up flags quarterly.

Rollback Plan

Every release needs a tested rollback procedure. "We'll fix forward" is a plan, but it should not be the only plan.

Simple Rollback Strategies

Strategy	When to use	How
Git revert	Any deployment	`git revert <commit>` and redeploy
PaaS instant rollback	Netlify, Vercel, Railway	One-click rollback in the dashboard to previous deployment
Feature flag toggle	Feature-specific issues	Disable the flag, feature disappears instantly
Blue/green switch	Container/cloud deployments	Switch traffic back to the previous environment

Pre-Release Rollback Checklist

Before every release, confirm:

You know how to roll back (which method, which commands)
Database migrations are backward-compatible (old code works with new schema)
The previous deployment is still available (not overwritten)

Non-Negotiable

If you cannot roll back a deployment within minutes, you do not have a deployment process - you have a one-way door. Test your rollback procedure before you need it in an emergency.

info

See Deploy - Deployment Strategies for more detail on blue/green, canary, and rolling deployment strategies.

and Meta Data

This will depend on the project and its requirements and if it needs to be SEO friendly (private projects may not need this)
Set up in the index.html file

Favicon

Create a favicon for the site and for all applications that may access the site
- realfavicongenerator.net
  
  Note: you can create a subfolder at the root called "favicon" and then update the head links to refer to this folder to keep the project tidy

User Experience

12 Frontend Micro-Interactions That Users Secretly Judge

Create a 404 page for catching routing errors
- error404.fun
- For a Next.js, use the following steps and code (example on Big Lynn site);
  - Add a new page to the pages directory
  - Add the following import code: import { useRouter } from "next/router";
  - Add the following code: const router = useRouter(); within the page component
  - Add the following onClick code to a button: onClick={() => router.back()} // Go back to the last visited page
Consider if additional 404 pages are required for other errors, such as 500, 503, etc.

Page Speed Testing

Remove unused packages in package.json - You can check those items by running npx depcheck.
Reduce your image sizes
- 9 Image optimisation techniques
- Convert all of your jpg and png files to smaller image types such as webp
- - Lazy load images and videos - add to the image and iframe tags loading="lazy"
Optimise your data speed
- JSON is incredibly slow, here's what's faster
- How to Make Your JavaScript Code Blazingly Fast With This One Simple Trick! 🔥
Optimise the site for speed
- Remove dependencies that are not required - npx depcheck
- If using React, then visit Reacthandbook.dev
  - See ways to optimize loadtimes - Link
  - See ways to optimize runtimes - Link
- Next.js App speed increases
- Next.js Caching Animation
- Low-Hanging Web Performance Fruits: A Cheat Sheet
  - Optimize Your Assets
  - Cache Your Assets
  - Split Your Code
  - Optimize Your Bundle
  - Manage Third-Party Scripts
- Everything you need to know about Web Performance (in 5 Minutes)
- Senior Engineering Strategies for Advanced React and TypeScript
  - Specifically look at the Performance section for the LazyLoadedComponent
- Clean up CSS
  - Unused CSS
  - Sniper-CSS, avoid unused styles
Check the speed of the app and improve where possible
- Use WebPageTest to test the speed of the site
  - Mark the tick box to Audit using Lighthouse
  - Review the results and make improvements based on the potential opportunities the tool suggests
- Reduce tasks over 50ms
- Other Speed Testing Tools
  - Use Chrome DevTools LightHouse tool
  - GTmetrix

Console Logs

Delete all console.logs - It's important to remove console.log in production code to prevent sensitive information leaks and enhance performance
Investigate and fix all console.errors and console.warning - It's important to address console errors in production code to maintain a smooth and error-free user experiences.
Framework links
- Next.js - Removing Next JS Console Logs

Framework Specific Checks

If using Next.js
- Advanced Next JS Concepts
- Get the best performance from your Next.js app
- Make sure to optimize images using next/image. e.g.
```
import Image from "next/image";
<Image
  src="/images/my-image.jpg"
  alt="My Image"
  width={500}
  height={500}
  loading="lazy"
/>;
```
- Add Next.js Analytics (see section 4.d of the above article) - Link

Other General Tests

Check that if you have a fixed header, the page scrolls to the correct position when clicking on a link - Link
Check that the site works on all devices and browsers - BrowserStack
Check that input boxes are using the correct attributes to help user input - Better Mobile Inputs

info

See Deploy for comprehensive deployment guidance including infrastructure as code and environment management.

Before releasing, decide on your deployment approach:

Strategy	Complexity	Downtime	Best for
Recreate	Low	Brief outage	Internal tools, non-critical apps
Rolling	Medium	Zero	Stateless apps behind a load balancer
	Medium	Zero	Apps needing instant rollback
	High	Zero	High-traffic apps needing real-world validation

For solo developers using a (Netlify, Vercel), the platform handles most of this for you - push to main and it deploys automatically with instant rollback available in the dashboard.

Production Secrets

Never store production secrets in .env files committed to source control. Even if .env is in .gitignore, relying solely on local files for production secrets is fragile and insecure.

For production deployments:

PaaS environment variables: Use the platform's built-in secrets management (Netlify/Vercel environment variables, set via their dashboard - not committed to code)
Dedicated secrets managers: For more complex setups, use Doppler (free tier available), HashiCorp Vault, or cloud-native solutions (AWS Secrets Manager, Azure Key Vault)
Rotate secrets on a defined schedule and audit access

Monitoring and Observability Setup

info

See Monitor and Operate for comprehensive guidance on monitoring, alerting, and incident management.

Set up monitoring before launch, not after your first outage. Even for solo projects, basic monitoring is essential.

The Golden Signals

Monitor these four signals () for every user-facing service:

Latency - How long it takes to serve a request
Traffic - The volume of demand (requests per second, page views)
Errors - The rate of requests that fail (HTTP 5xx, unhandled exceptions)
Saturation - How "full" your service is (CPU, memory, bandwidth)

Minimum Monitoring Stack for Solo Developers

Need	Tool	Cost
Uptime monitoring	BetterUptime or UptimeRobot	Free tier
Error tracking	Sentry	Free tier
Product analytics	PostHog or Umami	Free / self-hosted
Performance	Lighthouse CI (in your GitHub Actions)	Free

Basic Alerting

Set up Sentry email/Slack notifications for new errors
Configure uptime monitoring to alert when your site goes down
Review error logs weekly to catch recurring issues before users report them

Pre-Launch Non-Negotiable

Instrument the golden signals and set up error tracking before launch, not after your first outage. Sentry takes 10 minutes to set up and catches errors you would never see otherwise.

Incident Response Basics

Even as a solo developer, having a basic incident response process prevents panic when things go wrong.

Severity Levels

Severity	Impact	Your Response
Critical	Site is down or data is lost	Drop everything, fix immediately
Major	Core feature broken, many users affected	Fix within hours
Minor	Non-critical bug, workaround exists	Fix in next work session
Low	Cosmetic issue, edge case	Add to backlog

Write down the answers to these questions before you need them:

How do I check if the site is up? (monitoring dashboard URL)
How do I view error logs? (Sentry dashboard, hosting logs)
How do I roll back to the previous deployment? (platform-specific steps)
How do I restart the service? (platform-specific steps)
Who do I contact if the hosting provider is down? (support links)

After any significant incident, write a brief postmortem (even just for yourself):

What happened? - Timeline of events
Why did it happen? - Root cause
How was it fixed? - Resolution steps taken
How do I prevent it next time? - Action items (add a test, improve monitoring, update the runbook)

info

See Operate - Incident Management for more detail on severity levels, on-call rotations, and postmortem processes.

GitHub Information

Check that the GitHub repo has all the details that it needs, such as:
- About Section
  - Description
  - Tags
- Is public/private
- Is pinned to main GitHub profile if suitable
Check that the README has all the required details it needs, including;
- Structure - see here
- Project Title
- Project Description
- Table of Contents
- Installation
- Usage
- Contributing
- License
- Badges
  - Version number
  - Repo status
  - Tests passing
  - Netlify deployment status

Checklist​

Versioning​

Conventional Commits​

Automated Version Bumping​

Feature Flags​

Why Use Feature Flags?​

Implementation Options​

Rollback Plan​

Simple Rollback Strategies​

Pre-Release Rollback Checklist​

SEO and Meta Data​

Favicon​

User Experience​

404 page​

Page Speed Testing​

Console Logs​

Framework Specific Checks​

Other General Tests​

Deployment Strategy​

Secrets Management​

Monitoring and Observability Setup​

The Golden Signals​

Minimum Monitoring Stack for Solo Developers​

Basic Alerting​

Incident Response Basics​

Severity Levels​

Runbook​

Blameless Postmortem​

GitHub Information​

Other Options​

Checklist

Versioning

Automated Version Bumping

Why Use Feature Flags?

Implementation Options

Rollback Plan

Simple Rollback Strategies

Pre-Release Rollback Checklist

and Meta Data

Favicon

User Experience

Page Speed Testing

Console Logs

Framework Specific Checks

Other General Tests

Monitoring and Observability Setup

The Golden Signals

Minimum Monitoring Stack for Solo Developers

Basic Alerting

Incident Response Basics

Severity Levels

GitHub Information

Other Options