React App - Include /health - Health Endpoint for Load Balancer

I have a React Application and I wish to deploy this behind a load balancer, where the load balancer periodically pings the app to see whether it's healthy. My requirement is to provide a /health endpoint, that can be used for health checking.

What would be the ideal way to implement a health endpoint?

This is something that is required for anyone planning to deploy a React App in a auto-healing fashion
The main page of this App is /dashboard, which is a heavy page. Hence, it cannot be used as a health endpoint.

i.e: I have seen react apps which have /hello kind of endpoints which return a simple message like I am healthy.

Solution

I will be answering my own question. After some considerable amount of research and asking around from experienced React developers, the following is the used approach for Including a health endpoint in React Applications.

This requirement came up when containerising the React App to be used in a Kubernetes Environment.

Do NOT ever try to use an existing page as your health check endpoint. Because, your regular pages are heavy and healthcheck endpoints need to be simple.

Hence, create a new route with /health (or a preferable path) and return a simple HTML element. given below is a Simple Route component.

<Route path="/health">
    <h3>Hey There!!! The App is Healthy</h3>
</Route>

This being used in a Routes.js file, is given below.

import React from 'react';
import { Switch, Redirect, Route } from 'react-router-dom';

const Routes = () => {
    return (
        <Switch>    
            {/* This endpoint will just return you to a dummy HTML with a simple heading tag */}
            <Route path="/health">
                <h3>Hey There!!! The App is Healthy</h3>
            </Route>

            {/* All other routes will be defined here */}

            {/* Finally you will be redirected to a not found page */}
            <Redirect to="/not-found" />
        </Switch>
    );
};

export default Routes;