Build and Host a Customizable Status Page in Under 10 Minutes with Standard Library and Node.js

It’s hard to believe that it’s been over a year since we published our first article on building a status page with Standard Library. Much has changed about the company and our platform. With the introduction of Code on Standard Library, it’s never been easier to build, ship, and integrate scalable APIs right from your web browser. I’m personally excited to be able to show off these features and the capabilities of the platform by revisiting this old favorite and bringing it a facelift.

If you’re not familiar with Standard Library, we combine a scaleable compute layer, along with automatically generated documentation, authentication, billing, and more. We enable anybody to turn simple JavaScript functions into production-ready APIs, in seconds. And with the help of our online editor Code on Standard Library, you can build with zero setup or installation on your local machine.

Step One: Deploy the Status Page API

You can find the template for the status page API on Code on Standard Library. If you click that link, the template will automatically open. If not, navigate to the “Community API Sources” tab and search for “steve/status”. After giving your API a name, open the env.json file and you’ll find a single variable, STDLIB_LIBRARY_TOKEN. This is the token we use to authenticate your API requests. You can find your token by right clicking in env.json and selecting “Insert Library Token…”. Make sure you enter the token under the “dev” key.

With your token saved click the green “Run” button, or press cmd/ctrl + R, to deploy your API. Once finished you should go to:

https://<your_username>.api.stdlib.com/<your_service_name>@dev/

Once there you’ll see a status page like the one below:

So far so good, but there a few problems. First, the page isn’t monitoring the services you want it to, and second, there is no data.

Step Two: Customize the Status Page

First up is configuring the services you’d like to monitor. Head over to src/config.js and you’ll see an object with a few different keys. The one you are interested in now is urls. Replace the default ones with a few of your choosing. Click run to deploy your API again. Once it has finished, go back to your status page.

Great, now the URLs are looking better, but the page doesn’t do much without data.

Step Two: Schedule the Status Page API

Your status page API has an endpoint, functions/ping, which pings each url from src/config, and records information like the status code and response time of the HTTP request. It takes this data and stores it in utils.kv, Standard Library new key-value storage.

Click on the “Tasks” tab in the top-left of the screen. On the right side of the scheduled tasks page, you can pick an API to schedule. Choose the status page API you’ve been working on.

On the next page, you want use “ping” as the method to schedule. The task name can be whatever you like. For the schedule, choose twelve times per hour, or every five minutes. Your task configuration should look similar to this:

Click “Schedule Task”, and your data collecting will begin. After a moment, you can check your page again. You should see some (hopefully) green ticks:

Now a little about the page itself. Each url in src/config gets a row. Each row shows some number of days worth of data, averaged over an interval. For instance, you could set it to view one day of data over a fifteen minute interval, or three days of data over a one hour interval.

This app also does more than just monitoring. You may have noticed the “Subscribe To Updates” button in the top-right. Clicking that opens a small form:

Here users can enter a phone number to sign up for text alerts. This is handled by the subs/register and subs/remove endpoints in your API. The text alerts are sent from the functions/ping endpoint while it collects data, should it encounter an error.

Digging Deeper

With your page up and running, you may be wondering were to go from here. Templates for Standard Library APIs are completely decomposable. For instance, you may be interested in changing the logo on the page. With a little big of digging you’ll find that the logo is stored as static/images/logo.svg. Replace that file and you’re on your way! Perhaps the styling doesn’t quite fit your brand. It can all be changed inside of static/styles/style.css.

The point is, this template can just be a starting place. It’s batteries-included, and you can have running in just a few clicks. But, it’s as extensible as if you build it from the ground up.

That’s It!

I hope this tutorial has been helpful in showing you how easy it is to get started with Standard Library. For more inspiration as to how you can better use Standard Library, you can check out more guides written by the team here. If you have a neat idea you’d like to share, reach out to me directly by e-mail: steve@stdlib.com, or follow the Standard Library team and me on Twitter.

Steve Meyer is a Software Engineer at Standard Library. When he’s not programming, you can find him baking bread, or playing Red Dead Redemption II.