⭠ all tutorials

Custom Status Page with Standard Library & Airtable

Become a Pro member to access all content

240+ instructional videos led by professionals
Weekly expert workshops and replays
1-1 consultation with the Makerpad team
Over $50k in discounts for tools
Private peer community
Profile for tracking progress and sharing your work
Yearly pricing
$249/year
Start your 7 day free trial*
Get PRO Yearly
Lifetime pricing
$600billed once
Start your 7 day free trial*
Get PRO Lifetime

Today we’re going to build a Status Page to keep track of page uptime using a new tool, Build on Standard Library. Build allows you to ship powerful application logic using a visual workflow editor, and then generates and hosts Node.js code for you automatically. We’ll be storing our data in Airtable — conveniently, Standard Library automatically handles authentication for your favorite SaaS apps as well! Let’s get started.

Our objective here is to create a Status Page, powered by Airtable as a central database, to track your website’s performance throughout the day, and over a rolling period of one week. This includes a visually pleasing webpage that displays the results.

What You’ll Need Beforehand

Step 1: Set up Your Airtable Base

The first thing that we will need to do is set up our Airtable base to store the URLs that we want to monitor, and to format our tables so that we are gathering the correct information. We went ahead and set up a template that will track all of the necessary information. You can add the proper base to your workspace by clicking here. The resulting base should look like this:

Our main focus at this stage is on populating the URIs table with the web address of sites to be monitored. Input the URL in the first column, and a short description of what the site is in the last column. When you’re finished, it should look something like this:

Step 2: Build Your Workflow

Once you have your Base ready to go, navigate to https://build.stdlib.com to begin setting up your workflow. Click the Create New Project button from the left-hand menu, and select the following:

When This Event Happens

  • Choose Scheduler → Pick Once a minute

This Workflow Will be Triggered

  • Choose Airtable → Pick Select rows by querying a Base
  • Choose HTTP → Pick Make an HTTP Request
  • Choose Airtable → Pick Insert a Row Into a Base

Your setup should look like this:

So, what’s going on here? First, we are using Standard Library’s schedulerto define the event that we want to trigger our workflow. For this project, we want to perform our tasks once every minute, so choose this option from the dropdown menu. The actions that we want to perform are:

  • Query our Airtable base and pull all of our URLs from the URI table. Then:
  • Perform an HTTP call to each of those URLs, and record certain information about the response body, such as the status code and the duration of the request. Finally:
  • Log that information into our Airtable base on the Log table.

That’s all that we need to do for now! Click on the Create Workflow button and move on to Step 3.

Step 3: Link Resources to Your Identity

Once you have set up your event and tasks, you will be presented with a screen asking you to Link Accounts to an Identity. You can think of your Identity or Identity Token as a keychain that tracks all of your API keys securely and allows you to authenticate yourself with Connector APIs on Standard Library. You will need to have completed Step 1 above before you will be able to perform this step.

We can now click on the Link Account button inside of the Airtable box. This will bring up an additional dialog box:

If you have previously linked an Airtable account and base with your Standard Library account, that will show up here. However, if you have not, no worries! We can add new accounts on the fly. Click on Add New Account and you will be presented with the following screen:

Here you will need to input the email address associated with your Airtable account, as well as an API key. Simply visit airtable.com/account and follow the provided instructions to retrieve your API key. Once this is in place, feel free to click on the Finish button to proceed. In the next screen you will be presented with a menu listing all of your available bases that should look something like this:

Choose the base that we created from the template earlier, Status Page, and click Finish. In the following screen you should now see your Airtable base listed under Accounts Linked to this Identity. Congratulations! We are now ready to move on to the last step of this tutorial.

Step 4: Configure Your Workflow APIs

Now that we have our account linked to Standard Library, we can finish setting up our workflow. The pop-up provides an easy to use interface for making specific queries leveraging Standard Library and Airtable, but what we require for this particular application is a little bit more involved. If you click on Developer Mode, you can get a look at what these actions are doing under the hood. The resulting screen should look like this:

Replace everything in the text box (the greyed out areas will not be overwritten) with the following snippet:

if (new Date().getMinutes() % 10 !== 0) {  return;}let workflow = {};// [Workflow Step 1]console.log(`Running airtable.query[@0.3.3].select()...`);workflow.selectQueryResult = await lib.airtable.query['@0.3.3'].select({  table: `URIs`,  where: [    {}  ],  limit: {    'count': 0,    'offset': 0  }});// [Workflow Step 2]console.log(`Running http.request[@0.1.0]()...`);for(let row of workflow.selectQueryResult.rows) {  workflow.response = await lib.http.request['@0.1.0']({    url: row.fields.URL,    options: {}  }).catch(err => {    console.log(err);  });  // [Workflow Step 3]  if (!workflow.response) {    continue;  }  console.log(`Running airtable.query[@0.3.3].insert()...`);  workflow.insertQueryResult = await lib.airtable.query['@0.3.3'].insert({    table: `Log`,    fields: {      'Duration': workflow.response.timings.phases.total,      'Status Code': workflow.response.statusCode,      'URL': [row.id]    }  }).catch(err => {    console.log(err);  });};// [Workflow Step 4]await lib.airtable.query['@0.3.3'].delete({    table: `Log`,    where: [      {        'Current__not': `Yes`      }    ]  });

This code will drive all three of the tasks that we scheduled at the outset of our project. First we query the URIs table to gather the URLs we want to track. Then we perform an HTTP request to each of them and record the response in the Logs table. After you’ve clicked Run with Test Environment, the blue Next button will become active. Click on that to arrive at our final step — naming your project and shipping it. If all goes well, you should see the following:

Congrats, you can now track your website’s performance in one easy-to-navigate base on Airtable. Feel free to add as many URLs as you would like to keep track of.

Bonus — Launch Your Very Own Frontend!

What we have so far is a great way to get a feel for how things are running at a high level, but wouldn’t it be even better if we had some way to visualize this information? In this last section, we are going to put the finishing touches on our project and deploy a status page similar to those that we have built in previous projects.

When your base has collected enough data, navigate to this page, or visit the repository on GitHub and click on the Deploy button. You will find yourself on this page:

You have the option to provide a logo for your URL, as well as a field to provide a link to your homepage. You can also set your latency threshold (in milliseconds), which will be used to gauge your site’s performance. After you have filled in these variables, click on the Link Resource button and choose the Airtable base that you have been using to log your data (if using our template, this will be called Status Page). Click on Deploy, and you will now have a live status page like the one below!

Look at all that green!

You can visit your status page at any time by navigating to the following URL:

https://<Your-StdLib-Username>.api.stdlib.com/<Project-Name>@dev/

Join today for free and access 200+ tutorials

Join Makerpad today and you'll get access to hundreds of tutorials and educational content to help you create projects, automate workflows, and build software, without writing code.

Learn alongside 4 thousand professionals, no coding required.

Get Started Free

Today we’re going to build a Status Page to keep track of page uptime using a new tool, Build on Standard Library. Build allows you to ship powerful application logic using a visual workflow editor, and then generates and hosts Node.js code for you automatically. We’ll be storing our data in Airtable — conveniently, Standard Library automatically handles authentication for your favorite SaaS apps as well! Let’s get started.

Our objective here is to create a Status Page, powered by Airtable as a central database, to track your website’s performance throughout the day, and over a rolling period of one week. This includes a visually pleasing webpage that displays the results.

What You’ll Need Beforehand

Step 1: Set up Your Airtable Base

The first thing that we will need to do is set up our Airtable base to store the URLs that we want to monitor, and to format our tables so that we are gathering the correct information. We went ahead and set up a template that will track all of the necessary information. You can add the proper base to your workspace by clicking here. The resulting base should look like this:

Our main focus at this stage is on populating the URIs table with the web address of sites to be monitored. Input the URL in the first column, and a short description of what the site is in the last column. When you’re finished, it should look something like this:

Step 2: Build Your Workflow

Once you have your Base ready to go, navigate to https://build.stdlib.com to begin setting up your workflow. Click the Create New Project button from the left-hand menu, and select the following:

When This Event Happens

  • Choose Scheduler → Pick Once a minute

This Workflow Will be Triggered

  • Choose Airtable → Pick Select rows by querying a Base
  • Choose HTTP → Pick Make an HTTP Request
  • Choose Airtable → Pick Insert a Row Into a Base

Your setup should look like this:

So, what’s going on here? First, we are using Standard Library’s schedulerto define the event that we want to trigger our workflow. For this project, we want to perform our tasks once every minute, so choose this option from the dropdown menu. The actions that we want to perform are:

  • Query our Airtable base and pull all of our URLs from the URI table. Then:
  • Perform an HTTP call to each of those URLs, and record certain information about the response body, such as the status code and the duration of the request. Finally:
  • Log that information into our Airtable base on the Log table.

That’s all that we need to do for now! Click on the Create Workflow button and move on to Step 3.

Step 3: Link Resources to Your Identity

Once you have set up your event and tasks, you will be presented with a screen asking you to Link Accounts to an Identity. You can think of your Identity or Identity Token as a keychain that tracks all of your API keys securely and allows you to authenticate yourself with Connector APIs on Standard Library. You will need to have completed Step 1 above before you will be able to perform this step.

We can now click on the Link Account button inside of the Airtable box. This will bring up an additional dialog box:

If you have previously linked an Airtable account and base with your Standard Library account, that will show up here. However, if you have not, no worries! We can add new accounts on the fly. Click on Add New Account and you will be presented with the following screen:

Here you will need to input the email address associated with your Airtable account, as well as an API key. Simply visit airtable.com/account and follow the provided instructions to retrieve your API key. Once this is in place, feel free to click on the Finish button to proceed. In the next screen you will be presented with a menu listing all of your available bases that should look something like this:

Choose the base that we created from the template earlier, Status Page, and click Finish. In the following screen you should now see your Airtable base listed under Accounts Linked to this Identity. Congratulations! We are now ready to move on to the last step of this tutorial.

Step 4: Configure Your Workflow APIs

Now that we have our account linked to Standard Library, we can finish setting up our workflow. The pop-up provides an easy to use interface for making specific queries leveraging Standard Library and Airtable, but what we require for this particular application is a little bit more involved. If you click on Developer Mode, you can get a look at what these actions are doing under the hood. The resulting screen should look like this:

Replace everything in the text box (the greyed out areas will not be overwritten) with the following snippet:

if (new Date().getMinutes() % 10 !== 0) {  return;}let workflow = {};// [Workflow Step 1]console.log(`Running airtable.query[@0.3.3].select()...`);workflow.selectQueryResult = await lib.airtable.query['@0.3.3'].select({  table: `URIs`,  where: [    {}  ],  limit: {    'count': 0,    'offset': 0  }});// [Workflow Step 2]console.log(`Running http.request[@0.1.0]()...`);for(let row of workflow.selectQueryResult.rows) {  workflow.response = await lib.http.request['@0.1.0']({    url: row.fields.URL,    options: {}  }).catch(err => {    console.log(err);  });  // [Workflow Step 3]  if (!workflow.response) {    continue;  }  console.log(`Running airtable.query[@0.3.3].insert()...`);  workflow.insertQueryResult = await lib.airtable.query['@0.3.3'].insert({    table: `Log`,    fields: {      'Duration': workflow.response.timings.phases.total,      'Status Code': workflow.response.statusCode,      'URL': [row.id]    }  }).catch(err => {    console.log(err);  });};// [Workflow Step 4]await lib.airtable.query['@0.3.3'].delete({    table: `Log`,    where: [      {        'Current__not': `Yes`      }    ]  });

This code will drive all three of the tasks that we scheduled at the outset of our project. First we query the URIs table to gather the URLs we want to track. Then we perform an HTTP request to each of them and record the response in the Logs table. After you’ve clicked Run with Test Environment, the blue Next button will become active. Click on that to arrive at our final step — naming your project and shipping it. If all goes well, you should see the following:

Congrats, you can now track your website’s performance in one easy-to-navigate base on Airtable. Feel free to add as many URLs as you would like to keep track of.

Bonus — Launch Your Very Own Frontend!

What we have so far is a great way to get a feel for how things are running at a high level, but wouldn’t it be even better if we had some way to visualize this information? In this last section, we are going to put the finishing touches on our project and deploy a status page similar to those that we have built in previous projects.

When your base has collected enough data, navigate to this page, or visit the repository on GitHub and click on the Deploy button. You will find yourself on this page:

You have the option to provide a logo for your URL, as well as a field to provide a link to your homepage. You can also set your latency threshold (in milliseconds), which will be used to gauge your site’s performance. After you have filled in these variables, click on the Link Resource button and choose the Airtable base that you have been using to log your data (if using our template, this will be called Status Page). Click on Deploy, and you will now have a live status page like the one below!

Look at all that green!

You can visit your status page at any time by navigating to the following URL:

https://<Your-StdLib-Username>.api.stdlib.com/<Project-Name>@dev/

Become a Pro member to access all content

240+ instructional videos led by professionals
Weekly expert workshops and replays
1-1 consultation with the Makerpad team
Over $50k in discounts for tools
Private peer community
Profile for tracking progress and sharing your work
Yearly pricing
$249/year
Start your 7 day free trial*
Get PRO Yearly
Lifetime pricing
$600billed once
Start your 7 day free trial*
Get PRO Lifetime

Today we’re going to build a Status Page to keep track of page uptime using a new tool, Build on Standard Library. Build allows you to ship powerful application logic using a visual workflow editor, and then generates and hosts Node.js code for you automatically. We’ll be storing our data in Airtable — conveniently, Standard Library automatically handles authentication for your favorite SaaS apps as well! Let’s get started.

Our objective here is to create a Status Page, powered by Airtable as a central database, to track your website’s performance throughout the day, and over a rolling period of one week. This includes a visually pleasing webpage that displays the results.

What You’ll Need Beforehand

Step 1: Set up Your Airtable Base

The first thing that we will need to do is set up our Airtable base to store the URLs that we want to monitor, and to format our tables so that we are gathering the correct information. We went ahead and set up a template that will track all of the necessary information. You can add the proper base to your workspace by clicking here. The resulting base should look like this:

Our main focus at this stage is on populating the URIs table with the web address of sites to be monitored. Input the URL in the first column, and a short description of what the site is in the last column. When you’re finished, it should look something like this:

Step 2: Build Your Workflow

Once you have your Base ready to go, navigate to https://build.stdlib.com to begin setting up your workflow. Click the Create New Project button from the left-hand menu, and select the following:

When This Event Happens

  • Choose Scheduler → Pick Once a minute

This Workflow Will be Triggered

  • Choose Airtable → Pick Select rows by querying a Base
  • Choose HTTP → Pick Make an HTTP Request
  • Choose Airtable → Pick Insert a Row Into a Base

Your setup should look like this:

So, what’s going on here? First, we are using Standard Library’s schedulerto define the event that we want to trigger our workflow. For this project, we want to perform our tasks once every minute, so choose this option from the dropdown menu. The actions that we want to perform are:

  • Query our Airtable base and pull all of our URLs from the URI table. Then:
  • Perform an HTTP call to each of those URLs, and record certain information about the response body, such as the status code and the duration of the request. Finally:
  • Log that information into our Airtable base on the Log table.

That’s all that we need to do for now! Click on the Create Workflow button and move on to Step 3.

Step 3: Link Resources to Your Identity

Once you have set up your event and tasks, you will be presented with a screen asking you to Link Accounts to an Identity. You can think of your Identity or Identity Token as a keychain that tracks all of your API keys securely and allows you to authenticate yourself with Connector APIs on Standard Library. You will need to have completed Step 1 above before you will be able to perform this step.

We can now click on the Link Account button inside of the Airtable box. This will bring up an additional dialog box:

If you have previously linked an Airtable account and base with your Standard Library account, that will show up here. However, if you have not, no worries! We can add new accounts on the fly. Click on Add New Account and you will be presented with the following screen:

Here you will need to input the email address associated with your Airtable account, as well as an API key. Simply visit airtable.com/account and follow the provided instructions to retrieve your API key. Once this is in place, feel free to click on the Finish button to proceed. In the next screen you will be presented with a menu listing all of your available bases that should look something like this:

Choose the base that we created from the template earlier, Status Page, and click Finish. In the following screen you should now see your Airtable base listed under Accounts Linked to this Identity. Congratulations! We are now ready to move on to the last step of this tutorial.

Step 4: Configure Your Workflow APIs

Now that we have our account linked to Standard Library, we can finish setting up our workflow. The pop-up provides an easy to use interface for making specific queries leveraging Standard Library and Airtable, but what we require for this particular application is a little bit more involved. If you click on Developer Mode, you can get a look at what these actions are doing under the hood. The resulting screen should look like this:

Replace everything in the text box (the greyed out areas will not be overwritten) with the following snippet:

if (new Date().getMinutes() % 10 !== 0) {  return;}let workflow = {};// [Workflow Step 1]console.log(`Running airtable.query[@0.3.3].select()...`);workflow.selectQueryResult = await lib.airtable.query['@0.3.3'].select({  table: `URIs`,  where: [    {}  ],  limit: {    'count': 0,    'offset': 0  }});// [Workflow Step 2]console.log(`Running http.request[@0.1.0]()...`);for(let row of workflow.selectQueryResult.rows) {  workflow.response = await lib.http.request['@0.1.0']({    url: row.fields.URL,    options: {}  }).catch(err => {    console.log(err);  });  // [Workflow Step 3]  if (!workflow.response) {    continue;  }  console.log(`Running airtable.query[@0.3.3].insert()...`);  workflow.insertQueryResult = await lib.airtable.query['@0.3.3'].insert({    table: `Log`,    fields: {      'Duration': workflow.response.timings.phases.total,      'Status Code': workflow.response.statusCode,      'URL': [row.id]    }  }).catch(err => {    console.log(err);  });};// [Workflow Step 4]await lib.airtable.query['@0.3.3'].delete({    table: `Log`,    where: [      {        'Current__not': `Yes`      }    ]  });

This code will drive all three of the tasks that we scheduled at the outset of our project. First we query the URIs table to gather the URLs we want to track. Then we perform an HTTP request to each of them and record the response in the Logs table. After you’ve clicked Run with Test Environment, the blue Next button will become active. Click on that to arrive at our final step — naming your project and shipping it. If all goes well, you should see the following:

Congrats, you can now track your website’s performance in one easy-to-navigate base on Airtable. Feel free to add as many URLs as you would like to keep track of.

Bonus — Launch Your Very Own Frontend!

What we have so far is a great way to get a feel for how things are running at a high level, but wouldn’t it be even better if we had some way to visualize this information? In this last section, we are going to put the finishing touches on our project and deploy a status page similar to those that we have built in previous projects.

When your base has collected enough data, navigate to this page, or visit the repository on GitHub and click on the Deploy button. You will find yourself on this page:

You have the option to provide a logo for your URL, as well as a field to provide a link to your homepage. You can also set your latency threshold (in milliseconds), which will be used to gauge your site’s performance. After you have filled in these variables, click on the Link Resource button and choose the Airtable base that you have been using to log your data (if using our template, this will be called Status Page). Click on Deploy, and you will now have a live status page like the one below!

Look at all that green!

You can visit your status page at any time by navigating to the following URL:

https://<Your-StdLib-Username>.api.stdlib.com/<Project-Name>@dev/

Today we’re going to build a Status Page to keep track of page uptime using a new tool, Build on Standard Library. Build allows you to ship powerful application logic using a visual workflow editor, and then generates and hosts Node.js code for you automatically. We’ll be storing our data in Airtable — conveniently, Standard Library automatically handles authentication for your favorite SaaS apps as well! Let’s get started.

Our objective here is to create a Status Page, powered by Airtable as a central database, to track your website’s performance throughout the day, and over a rolling period of one week. This includes a visually pleasing webpage that displays the results.

What You’ll Need Beforehand

Step 1: Set up Your Airtable Base

The first thing that we will need to do is set up our Airtable base to store the URLs that we want to monitor, and to format our tables so that we are gathering the correct information. We went ahead and set up a template that will track all of the necessary information. You can add the proper base to your workspace by clicking here. The resulting base should look like this:

Our main focus at this stage is on populating the URIs table with the web address of sites to be monitored. Input the URL in the first column, and a short description of what the site is in the last column. When you’re finished, it should look something like this:

Step 2: Build Your Workflow

Once you have your Base ready to go, navigate to https://build.stdlib.com to begin setting up your workflow. Click the Create New Project button from the left-hand menu, and select the following:

When This Event Happens

  • Choose Scheduler → Pick Once a minute

This Workflow Will be Triggered

  • Choose Airtable → Pick Select rows by querying a Base
  • Choose HTTP → Pick Make an HTTP Request
  • Choose Airtable → Pick Insert a Row Into a Base

Your setup should look like this:

So, what’s going on here? First, we are using Standard Library’s schedulerto define the event that we want to trigger our workflow. For this project, we want to perform our tasks once every minute, so choose this option from the dropdown menu. The actions that we want to perform are:

  • Query our Airtable base and pull all of our URLs from the URI table. Then:
  • Perform an HTTP call to each of those URLs, and record certain information about the response body, such as the status code and the duration of the request. Finally:
  • Log that information into our Airtable base on the Log table.

That’s all that we need to do for now! Click on the Create Workflow button and move on to Step 3.

Step 3: Link Resources to Your Identity

Once you have set up your event and tasks, you will be presented with a screen asking you to Link Accounts to an Identity. You can think of your Identity or Identity Token as a keychain that tracks all of your API keys securely and allows you to authenticate yourself with Connector APIs on Standard Library. You will need to have completed Step 1 above before you will be able to perform this step.

We can now click on the Link Account button inside of the Airtable box. This will bring up an additional dialog box:

If you have previously linked an Airtable account and base with your Standard Library account, that will show up here. However, if you have not, no worries! We can add new accounts on the fly. Click on Add New Account and you will be presented with the following screen:

Here you will need to input the email address associated with your Airtable account, as well as an API key. Simply visit airtable.com/account and follow the provided instructions to retrieve your API key. Once this is in place, feel free to click on the Finish button to proceed. In the next screen you will be presented with a menu listing all of your available bases that should look something like this:

Choose the base that we created from the template earlier, Status Page, and click Finish. In the following screen you should now see your Airtable base listed under Accounts Linked to this Identity. Congratulations! We are now ready to move on to the last step of this tutorial.

Step 4: Configure Your Workflow APIs

Now that we have our account linked to Standard Library, we can finish setting up our workflow. The pop-up provides an easy to use interface for making specific queries leveraging Standard Library and Airtable, but what we require for this particular application is a little bit more involved. If you click on Developer Mode, you can get a look at what these actions are doing under the hood. The resulting screen should look like this:

Replace everything in the text box (the greyed out areas will not be overwritten) with the following snippet:

if (new Date().getMinutes() % 10 !== 0) {  return;}let workflow = {};// [Workflow Step 1]console.log(`Running airtable.query[@0.3.3].select()...`);workflow.selectQueryResult = await lib.airtable.query['@0.3.3'].select({  table: `URIs`,  where: [    {}  ],  limit: {    'count': 0,    'offset': 0  }});// [Workflow Step 2]console.log(`Running http.request[@0.1.0]()...`);for(let row of workflow.selectQueryResult.rows) {  workflow.response = await lib.http.request['@0.1.0']({    url: row.fields.URL,    options: {}  }).catch(err => {    console.log(err);  });  // [Workflow Step 3]  if (!workflow.response) {    continue;  }  console.log(`Running airtable.query[@0.3.3].insert()...`);  workflow.insertQueryResult = await lib.airtable.query['@0.3.3'].insert({    table: `Log`,    fields: {      'Duration': workflow.response.timings.phases.total,      'Status Code': workflow.response.statusCode,      'URL': [row.id]    }  }).catch(err => {    console.log(err);  });};// [Workflow Step 4]await lib.airtable.query['@0.3.3'].delete({    table: `Log`,    where: [      {        'Current__not': `Yes`      }    ]  });

This code will drive all three of the tasks that we scheduled at the outset of our project. First we query the URIs table to gather the URLs we want to track. Then we perform an HTTP request to each of them and record the response in the Logs table. After you’ve clicked Run with Test Environment, the blue Next button will become active. Click on that to arrive at our final step — naming your project and shipping it. If all goes well, you should see the following:

Congrats, you can now track your website’s performance in one easy-to-navigate base on Airtable. Feel free to add as many URLs as you would like to keep track of.

Bonus — Launch Your Very Own Frontend!

What we have so far is a great way to get a feel for how things are running at a high level, but wouldn’t it be even better if we had some way to visualize this information? In this last section, we are going to put the finishing touches on our project and deploy a status page similar to those that we have built in previous projects.

When your base has collected enough data, navigate to this page, or visit the repository on GitHub and click on the Deploy button. You will find yourself on this page:

You have the option to provide a logo for your URL, as well as a field to provide a link to your homepage. You can also set your latency threshold (in milliseconds), which will be used to gauge your site’s performance. After you have filled in these variables, click on the Link Resource button and choose the Airtable base that you have been using to log your data (if using our template, this will be called Status Page). Click on Deploy, and you will now have a live status page like the one below!

Look at all that green!

You can visit your status page at any time by navigating to the following URL:

https://<Your-StdLib-Username>.api.stdlib.com/<Project-Name>@dev/

Join today for free and access 200+ tutorials

Join Makerpad today and you'll get access to hundreds of tutorials and educational content to help you create projects, automate workflows, and build software, without writing code.

Learn alongside 4 thousand professionals, no coding required.

Get Started Free

Today we’re going to build a Status Page to keep track of page uptime using a new tool, Build on Standard Library. Build allows you to ship powerful application logic using a visual workflow editor, and then generates and hosts Node.js code for you automatically. We’ll be storing our data in Airtable — conveniently, Standard Library automatically handles authentication for your favorite SaaS apps as well! Let’s get started.

Our objective here is to create a Status Page, powered by Airtable as a central database, to track your website’s performance throughout the day, and over a rolling period of one week. This includes a visually pleasing webpage that displays the results.

What You’ll Need Beforehand

Step 1: Set up Your Airtable Base

The first thing that we will need to do is set up our Airtable base to store the URLs that we want to monitor, and to format our tables so that we are gathering the correct information. We went ahead and set up a template that will track all of the necessary information. You can add the proper base to your workspace by clicking here. The resulting base should look like this:

Our main focus at this stage is on populating the URIs table with the web address of sites to be monitored. Input the URL in the first column, and a short description of what the site is in the last column. When you’re finished, it should look something like this:

Step 2: Build Your Workflow

Once you have your Base ready to go, navigate to https://build.stdlib.com to begin setting up your workflow. Click the Create New Project button from the left-hand menu, and select the following:

When This Event Happens

  • Choose Scheduler → Pick Once a minute

This Workflow Will be Triggered

  • Choose Airtable → Pick Select rows by querying a Base
  • Choose HTTP → Pick Make an HTTP Request
  • Choose Airtable → Pick Insert a Row Into a Base

Your setup should look like this:

So, what’s going on here? First, we are using Standard Library’s schedulerto define the event that we want to trigger our workflow. For this project, we want to perform our tasks once every minute, so choose this option from the dropdown menu. The actions that we want to perform are:

  • Query our Airtable base and pull all of our URLs from the URI table. Then:
  • Perform an HTTP call to each of those URLs, and record certain information about the response body, such as the status code and the duration of the request. Finally:
  • Log that information into our Airtable base on the Log table.

That’s all that we need to do for now! Click on the Create Workflow button and move on to Step 3.

Step 3: Link Resources to Your Identity

Once you have set up your event and tasks, you will be presented with a screen asking you to Link Accounts to an Identity. You can think of your Identity or Identity Token as a keychain that tracks all of your API keys securely and allows you to authenticate yourself with Connector APIs on Standard Library. You will need to have completed Step 1 above before you will be able to perform this step.

We can now click on the Link Account button inside of the Airtable box. This will bring up an additional dialog box:

If you have previously linked an Airtable account and base with your Standard Library account, that will show up here. However, if you have not, no worries! We can add new accounts on the fly. Click on Add New Account and you will be presented with the following screen:

Here you will need to input the email address associated with your Airtable account, as well as an API key. Simply visit airtable.com/account and follow the provided instructions to retrieve your API key. Once this is in place, feel free to click on the Finish button to proceed. In the next screen you will be presented with a menu listing all of your available bases that should look something like this:

Choose the base that we created from the template earlier, Status Page, and click Finish. In the following screen you should now see your Airtable base listed under Accounts Linked to this Identity. Congratulations! We are now ready to move on to the last step of this tutorial.

Step 4: Configure Your Workflow APIs

Now that we have our account linked to Standard Library, we can finish setting up our workflow. The pop-up provides an easy to use interface for making specific queries leveraging Standard Library and Airtable, but what we require for this particular application is a little bit more involved. If you click on Developer Mode, you can get a look at what these actions are doing under the hood. The resulting screen should look like this:

Replace everything in the text box (the greyed out areas will not be overwritten) with the following snippet:

if (new Date().getMinutes() % 10 !== 0) {  return;}let workflow = {};// [Workflow Step 1]console.log(`Running airtable.query[@0.3.3].select()...`);workflow.selectQueryResult = await lib.airtable.query['@0.3.3'].select({  table: `URIs`,  where: [    {}  ],  limit: {    'count': 0,    'offset': 0  }});// [Workflow Step 2]console.log(`Running http.request[@0.1.0]()...`);for(let row of workflow.selectQueryResult.rows) {  workflow.response = await lib.http.request['@0.1.0']({    url: row.fields.URL,    options: {}  }).catch(err => {    console.log(err);  });  // [Workflow Step 3]  if (!workflow.response) {    continue;  }  console.log(`Running airtable.query[@0.3.3].insert()...`);  workflow.insertQueryResult = await lib.airtable.query['@0.3.3'].insert({    table: `Log`,    fields: {      'Duration': workflow.response.timings.phases.total,      'Status Code': workflow.response.statusCode,      'URL': [row.id]    }  }).catch(err => {    console.log(err);  });};// [Workflow Step 4]await lib.airtable.query['@0.3.3'].delete({    table: `Log`,    where: [      {        'Current__not': `Yes`      }    ]  });

This code will drive all three of the tasks that we scheduled at the outset of our project. First we query the URIs table to gather the URLs we want to track. Then we perform an HTTP request to each of them and record the response in the Logs table. After you’ve clicked Run with Test Environment, the blue Next button will become active. Click on that to arrive at our final step — naming your project and shipping it. If all goes well, you should see the following:

Congrats, you can now track your website’s performance in one easy-to-navigate base on Airtable. Feel free to add as many URLs as you would like to keep track of.

Bonus — Launch Your Very Own Frontend!

What we have so far is a great way to get a feel for how things are running at a high level, but wouldn’t it be even better if we had some way to visualize this information? In this last section, we are going to put the finishing touches on our project and deploy a status page similar to those that we have built in previous projects.

When your base has collected enough data, navigate to this page, or visit the repository on GitHub and click on the Deploy button. You will find yourself on this page:

You have the option to provide a logo for your URL, as well as a field to provide a link to your homepage. You can also set your latency threshold (in milliseconds), which will be used to gauge your site’s performance. After you have filled in these variables, click on the Link Resource button and choose the Airtable base that you have been using to log your data (if using our template, this will be called Status Page). Click on Deploy, and you will now have a live status page like the one below!

Look at all that green!

You can visit your status page at any time by navigating to the following URL:

https://<Your-StdLib-Username>.api.stdlib.com/<Project-Name>@dev/

Today we’re going to build a Status Page to keep track of page uptime using a new tool, Build on Standard Library. Build allows you to ship powerful application logic using a visual workflow editor, and then generates and hosts Node.js code for you automatically. We’ll be storing our data in Airtable — conveniently, Standard Library automatically handles authentication for your favorite SaaS apps as well! Let’s get started.

Our objective here is to create a Status Page, powered by Airtable as a central database, to track your website’s performance throughout the day, and over a rolling period of one week. This includes a visually pleasing webpage that displays the results.

What You’ll Need Beforehand

Step 1: Set up Your Airtable Base

The first thing that we will need to do is set up our Airtable base to store the URLs that we want to monitor, and to format our tables so that we are gathering the correct information. We went ahead and set up a template that will track all of the necessary information. You can add the proper base to your workspace by clicking here. The resulting base should look like this:

Our main focus at this stage is on populating the URIs table with the web address of sites to be monitored. Input the URL in the first column, and a short description of what the site is in the last column. When you’re finished, it should look something like this:

Step 2: Build Your Workflow

Once you have your Base ready to go, navigate to https://build.stdlib.com to begin setting up your workflow. Click the Create New Project button from the left-hand menu, and select the following:

When This Event Happens

  • Choose Scheduler → Pick Once a minute

This Workflow Will be Triggered

  • Choose Airtable → Pick Select rows by querying a Base
  • Choose HTTP → Pick Make an HTTP Request
  • Choose Airtable → Pick Insert a Row Into a Base

Your setup should look like this:

So, what’s going on here? First, we are using Standard Library’s schedulerto define the event that we want to trigger our workflow. For this project, we want to perform our tasks once every minute, so choose this option from the dropdown menu. The actions that we want to perform are:

  • Query our Airtable base and pull all of our URLs from the URI table. Then:
  • Perform an HTTP call to each of those URLs, and record certain information about the response body, such as the status code and the duration of the request. Finally:
  • Log that information into our Airtable base on the Log table.

That’s all that we need to do for now! Click on the Create Workflow button and move on to Step 3.

Step 3: Link Resources to Your Identity

Once you have set up your event and tasks, you will be presented with a screen asking you to Link Accounts to an Identity. You can think of your Identity or Identity Token as a keychain that tracks all of your API keys securely and allows you to authenticate yourself with Connector APIs on Standard Library. You will need to have completed Step 1 above before you will be able to perform this step.

We can now click on the Link Account button inside of the Airtable box. This will bring up an additional dialog box:

If you have previously linked an Airtable account and base with your Standard Library account, that will show up here. However, if you have not, no worries! We can add new accounts on the fly. Click on Add New Account and you will be presented with the following screen:

Here you will need to input the email address associated with your Airtable account, as well as an API key. Simply visit airtable.com/account and follow the provided instructions to retrieve your API key. Once this is in place, feel free to click on the Finish button to proceed. In the next screen you will be presented with a menu listing all of your available bases that should look something like this:

Choose the base that we created from the template earlier, Status Page, and click Finish. In the following screen you should now see your Airtable base listed under Accounts Linked to this Identity. Congratulations! We are now ready to move on to the last step of this tutorial.

Step 4: Configure Your Workflow APIs

Now that we have our account linked to Standard Library, we can finish setting up our workflow. The pop-up provides an easy to use interface for making specific queries leveraging Standard Library and Airtable, but what we require for this particular application is a little bit more involved. If you click on Developer Mode, you can get a look at what these actions are doing under the hood. The resulting screen should look like this:

Replace everything in the text box (the greyed out areas will not be overwritten) with the following snippet:

if (new Date().getMinutes() % 10 !== 0) {  return;}let workflow = {};// [Workflow Step 1]console.log(`Running airtable.query[@0.3.3].select()...`);workflow.selectQueryResult = await lib.airtable.query['@0.3.3'].select({  table: `URIs`,  where: [    {}  ],  limit: {    'count': 0,    'offset': 0  }});// [Workflow Step 2]console.log(`Running http.request[@0.1.0]()...`);for(let row of workflow.selectQueryResult.rows) {  workflow.response = await lib.http.request['@0.1.0']({    url: row.fields.URL,    options: {}  }).catch(err => {    console.log(err);  });  // [Workflow Step 3]  if (!workflow.response) {    continue;  }  console.log(`Running airtable.query[@0.3.3].insert()...`);  workflow.insertQueryResult = await lib.airtable.query['@0.3.3'].insert({    table: `Log`,    fields: {      'Duration': workflow.response.timings.phases.total,      'Status Code': workflow.response.statusCode,      'URL': [row.id]    }  }).catch(err => {    console.log(err);  });};// [Workflow Step 4]await lib.airtable.query['@0.3.3'].delete({    table: `Log`,    where: [      {        'Current__not': `Yes`      }    ]  });

This code will drive all three of the tasks that we scheduled at the outset of our project. First we query the URIs table to gather the URLs we want to track. Then we perform an HTTP request to each of them and record the response in the Logs table. After you’ve clicked Run with Test Environment, the blue Next button will become active. Click on that to arrive at our final step — naming your project and shipping it. If all goes well, you should see the following:

Congrats, you can now track your website’s performance in one easy-to-navigate base on Airtable. Feel free to add as many URLs as you would like to keep track of.

Bonus — Launch Your Very Own Frontend!

What we have so far is a great way to get a feel for how things are running at a high level, but wouldn’t it be even better if we had some way to visualize this information? In this last section, we are going to put the finishing touches on our project and deploy a status page similar to those that we have built in previous projects.

When your base has collected enough data, navigate to this page, or visit the repository on GitHub and click on the Deploy button. You will find yourself on this page:

You have the option to provide a logo for your URL, as well as a field to provide a link to your homepage. You can also set your latency threshold (in milliseconds), which will be used to gauge your site’s performance. After you have filled in these variables, click on the Link Resource button and choose the Airtable base that you have been using to log your data (if using our template, this will be called Status Page). Click on Deploy, and you will now have a live status page like the one below!

Look at all that green!

You can visit your status page at any time by navigating to the following URL:

https://<Your-StdLib-Username>.api.stdlib.com/<Project-Name>@dev/

Get help and discuss

Open community forum

More lessons

Fetch data via API using Data Fetcher and Airtable
How to Add Stripe Billing to a Bubble App
How to Build a Customer Portal with No-code using Bubble and Stripe
Setting up user profiles and authentication on Webflow with 8base
Creating a Wikipedia Clone with Bubble
Develop a custom CRM using Retool and 8base
Generating serverless functions in the CLI - 8base
Connecting to a workspace GraphQL API - 8base
Authorization basics with roles and permissions - 8base
Working with GraphQL queries in the API Explorer - 8base
Slack App That Scrapes Websites for Data
How to Easily Scrape Websites for Data using Autocode
Greet new members privately in Slack with Autocode + Block Kit Builder
Working with APIs - integrate Slack with Typeform using Autocode on Standard Library
Generate QR Codes from Links
Linktree Clone with Adalo
Build an Airtable powered mobile app with Adalo
Fitness planner + tracker with Airtable and Twilio on Standard Library
Dating app with WordPress and CometChat Go
How to batch process Webflow item IDs using Integromat
Instagram clone with Bubble
A Meetup clone built in Adalo
A Vegan meal planner with Bubble
Get data from an API with Parabola + Google Sheets
Cameo clone in Glide - book video shoutouts from celebrities
Send SMS Surveys with Twilio + Airtable on Standard Library
Build a Twilio SMS Hub with Standard Library
Instagram clone using Glide and a Google Sheet
Sending a SMS Message from a website
Build a Slack / Airtable / Stripe CRM
Meditation mini-app and tracking progress
Changing data on a live site
Browse all →

If you'd like this template, message @bentossell on Slack with your email for the account to send this template.