The Palos Publishing Company

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:

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

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About