Status

Introduction

A library providing ready-made status pages and API routes to check the health of an app (API, cache, configs, user token, …) at a glance.

This page covers how to install and wire up the bundle. For a description of each individual status page once it’s installed, see the Status interfaces documentation.

Installation

To use @phpcreation/frontend-status-react-nextjs-bundle in your project, follow these steps:

Open a terminal in your project root

Create a Github Personnal Access Token

How to create a Github PAT :

Create a Github Personal Access Token


npm login --scope=@phpcreation --auth-type=legacy --registry=https://npm.pkg.github.com

username: your github username in lowercase
password: The PAT you just created

Install the Package


npm install @phpcreation/frontend-status-react-nextjs-bundle.git@latest --save-exact

Setup

In next.config.mjs, add redirects for /status

So that /status resolves to a locale-prefixed route (needed because of internationalization) :


async redirects() {
  return [
    {
      source: "/status",
      destination: "/fr/status",
      permanent: true,
    },
    {
      source: "/status/:path*",
      destination: "/fr/status/:path*",
      permanent: true,
    },
  ];
},

In middleware.ts, skip auth and configs for status routes

Status pages must stay reachable even if auth/configs fail, so bypass them before the Auth / Configs middleware logic runs :


export async function middleware(request: NextRequest) {
  if (
    request.nextUrl.pathname.startsWith("/en/status") ||
    request.nextUrl.pathname.startsWith("/fr/status")
  ) {
    // Skip the middleware for status pages
    return intlMiddleware(request);
  }
 
  const configs = await getAllConfigsEdge(request, [
    "oauth_client_id",
    "oauth_client_secret",
  ]);
 
  // ...rest of the middleware (auth, etc.)
}

Copy `src/app/[locale]/status` in your app

Contains the page components for /status, /status/all, /status/api, /status/cache, /status/configs, /status/user-token/check, /status/user-token/display, /status/user-token/expected.

Copy `src/app/api/status` in your app

Contains the matching API routes. The root one is a simple health check :


export async function GET() {
  //Based on: https://nextjs.org/docs/app/building-your-application/routing/route-handlers
 
  return Response.json({ status: "ok" });
}

Copy `src/app/api/clear-cache` in your app

Same route used by the Configs bundle — the status page uses it to display/clear cache state.