Stephen Burke bursteways

🔵🟢 Blue/Green Deployment & Maintenance Page with Azure App Service + GitHub Actions

This document outlines how to set up a Blue/Green deployment strategy using Azure App Service Slots and GitHub Actions, including a dedicated Maintenance Page that can be activated at any time with zero downtime.

✅ Goals

Use GitHub Actions for CI/CD
Use Bun for building a Next.js App Router app
Deploy to Azure App Service using slots: production, staging, and maintenance
Flip traffic between slots without downtime

Videos + Tutorials

Youtube

General Fullstack

Narrative:

Technically groom an Epic to:
- Split the scope into work-planning spikes.
  - TEMPLATE: =>> Link
  - Be sure to fill out the Work plan a story to section with respective information.
    - Be sure to include the wire-frame invision url, if applicable.
  - Prepend the title of each work-planning spike with [PLAN]
  - Link work-planning spikes that depend on one another if need be.
Add an original estimate to each spike.

User Statement

As a …

I want to …

So that …

Narrative:

Work plan a story to:
Be sure to:
- Review the work-planning Spikes this plan depends on to avoid doing duplicate work.
- Schedule time to review the work-plan with your respective tech lead.

Results:

Technical Grooming

Handoff happens = Business => APM + Architect
- APM work
  - Divide work - APMs creates the Epic after receiving High-Level Requirements (HLR) from the Business side
    - An HLR is created during the **Product Discovery phase/**meetings + documenting updates
  - APMs add the following sections to the Epic:
    - Problem Statement
      - Described as the Business Request
Ideal User or Business Outcome

Animations

https://github.com/rnosov/react-reveal

Component Libraries

https://instructure.design/

Hooks

https://github.com/alewin/useWorker

Components

Ticket:

Your ticket number goes here.

Changes:

These are the changes.
Your feature includes.

Steps to Reproduce:

These are the steps.
To verify your feature.

Creating a component library with Lerna

We will be making use of Yarn workspaces. Make sure you have yarn installed on your machine.

$ npm install yarn -g

Lets make our project. Come up with a creative name. For this tutorial, I will call it gecko.

	import { PrismaClient } from '@prisma/client';

	type PrismaModelName = keyof PrismaClient;

	// Get the Prisma delegate type for a given model name
	type GetDelegate<Model extends PrismaModelName> = NonNullable<
	PrismaClient[Model]
	>;

	// Extract the `createMany` input `data` type for a model