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

Question

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.

Android

Answer 1

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;

Android

Isn't the second answer makes more sense? In your example you are still loading react library if code splitting done right otherwise a lot of not needed things will get bundled and downloaded. – Archilochus

Answer 2

The answer above will work but the health endpoint will contain all of the index.html content which is technically unnecessary for the health endpoint.

A much better approach is just adding a file called health in the public folder. Then, when /health is called, the service will return the content of the file, which is faster and much smaller.

Umbles

Answer 3

how does loading loacalhost:3000/health works, because I tried adding health.html under public folder which is not working. React is spa which goes to app.js by default and looks react-router is the only way.

Holt

Answer 4

An improved method is to add a file named health in the public folder. This way, when /health is accessed, the service will simply return the file's content, making the process quicker and more efficient.

Bahuvrihi