DEV Community

Cover image for Website Status Page with Uptime Robot & Zeit
Mohd Danish
Mohd Danish

Posted on

6 2

Website Status Page with Uptime Robot & Zeit

First setup your Uptime Robot API without any backend & code. Just go follow this simple documentation 👉 Build Uptime Robot NoCodeAPI.

When you will finish your Uptime Robot API then you will see this card with your secure endpoint that we need on front-end.

Slack Hook API Card

Get your Monitor IDs

You can list all your monitor status on one page by passing multiple Monitor IDs. So, get those IDs from your Uptime Robot account.

On your dashboard when you click on your monitor list then your URL will have the monitor ID. like this https://uptimerobot.com/dashboard#784130462. After # 784130462 is your monitor ID.

Format your Endpoint

Now set up your endpoint with the monitor's IDs like this:

If you have only one monitor then add ?monitors=784130462 with your endpoint https://v1.nocodeapi.com/betauser/uptime/OVprBNKOwXSfWhjH and it will become like this https://v1.nocodeapi.com/betauser/uptime/OVprBNKOwXSfWhjH?monitors=784130462

If you want to show status for multiple monitors then format like this:

Add ?monitors=784130462-784130463-784130464 with your endpoint https://v1.nocodeapi.com/betauser/uptime/OVprBNKOwXSfWhjH and it will become like this https://v1.nocodeapi.com/betauser/uptime/OVprBNKOwXSfWhjH?monitors=784130462-784130463-784130464

Fork Template Code

We have a simple and clean template written in React. Just fork this repository on your account. Just click on the fork button.

After fork complete, you have the template code on your GitHub account with URL like: https://github.com/<username>/status

  1. Go here https://github.com/nocodeapi/status
  2. Click on Fork

GitHub Fork

Edit Metadata

Now go here https://github.com/<username>/status and edit the file src/env.js with your metadata by clicking ✎ the edit icon.

Edit Metadata

Deploy

Now it's time to deploy the code on the server. So, Here is a One-Click serverless hosting with Zeit and it's free. Let's make a One-Click URL for Zeit.

This is the format of Zeit One-Click URL https://zeit.co/new/project?template=https://github.com/<username>/status/tree/master. Just replace <username> with your GitHub username and open the URL into a browser to follow the process.

Just click on Continue -> Continue -> Continue -> Deploy

One Click

Yes, that's all. Now you can also add your custom domain like status.example.com.

You can see our status page demo here https://status.nocodeapi.com

If you have any other use cases then let us know about that. So, we can make a blog post about that.

Originally published at nocodeapi.com

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay