The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a website uptime checker

Written by

Bernardo Palos

in

Here’s a step-by-step implementation of a Website Uptime Checker using Node.js and Express for the backend, with a simple HTML frontend. This app allows users to enter a URL and checks if the site is reachable (up) or not (down).

✅ Features

  • Input any website URL

  • Checks if it’s reachable (HTTP 200–399)

  • Displays status (Up or Down)

📁 Project Structure

pgsql
uptime-checker/
├── public/
│   └── index.html
├── server.js
├── package.json

📦 1. Initialize Project

bash
mkdir uptime-checker
cd uptime-checker
npm init -y
npm install express axios

🖥️ 2. server.js – Backend

javascript
const express = require('express');
const axios = require('axios');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static('public'));
app.use(express.json());

app.post('/check', async (req, res) => {
  const { url } = req.body;
  try {
    const response = await axios.get(url, { timeout: 5000 });
    res.json({ status: 'up', code: response.status });
  } catch (error) {
    res.json({ status: 'down', code: error.response ? error.response.status : 'no response' });
  }
});

app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

🌐 3. public/index.html – Frontend

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Website Uptime Checker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      max-width: 500px;
      margin: auto;
    }
    input, button {
      padding: 0.5rem;
      font-size: 1rem;
      width: 100%;
      margin-bottom: 1rem;
    }
    #result {
      font-weight: bold;
      padding: 1rem;
      border-radius: 5px;
    }
    .up { color: green; }
    .down { color: red; }
  </style>
</head>
<body>
  <h2>Website Uptime Checker</h2>
  <input type="text" id="urlInput" placeholder="Enter website URL (e.g. https://example.com)" />
  <button onclick="checkWebsite()">Check</button>
  <div id="result"></div>

  <script>
    async function checkWebsite() {
      const url = document.getElementById('urlInput').value.trim();
      if (!url) {
        document.getElementById('result').textContent = 'Please enter a valid URL.';
        return;
      }

      try {
        const response = await fetch('/check', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ url })
        });

        const data = await response.json();
        const resultDiv = document.getElementById('result');

        if (data.status === 'up') {
          resultDiv.innerHTML = `✅ Site is <span class="up">Up</span> (HTTP ${data.code})`;
        } else {
          resultDiv.innerHTML = `❌ Site is <span class="down">Down</span> (Status: ${data.code})`;
        }
      } catch (err) {
        document.getElementById('result').innerHTML = `❌ Error checking website`;
      }
    }
  </script>
</body>
</html>

🚀 To Run the App

bash
node server.js

Then visit: http://localhost:3000

This uptime checker is basic and meant for educational/demo purposes. For production-grade systems, consider adding:

  • URL validation

  • Cron jobs for automated checks

  • Database logging

  • Email/SMS notifications

  • Authentication

Let me know if you’d like enhancements like persistent monitoring, dashboard, or deploy instructions.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About