### Install and Start supabase-ngrok Server

Source: https://github.com/ekaone/supabase-ngrok/blob/main/README.md

This snippet outlines the steps to clone the repository, install dependencies, and start the server for the supabase-ngrok project. It requires Git and Node.js with npm.

```bash
git clone https://github.com/ekaone/supabase-ngrok.git
cd supabase-ngrok
npm install
npm start
```

--------------------------------

### Project Installation and Startup (npm)

Source: https://context7.com/ekaone/supabase-ngrok/llms.txt

Steps to clone the repository, install dependencies using npm, configure environment variables by copying and editing the `.env.example` file, and start the server using `npm start`. Includes expected output examples.

```bash
# Clone the repository
git clone https://github.com/ekaone/supabase-ngrok.git
cd supabase-ngrok

# Install dependencies
npm install

# Configure environment variables
cp .env.example .env
# Edit .env with your Supabase and ngrok credentials

# Start the server
npm start

# Expected output:
# sent url https://1234abcd.ngrok.io
# [{ id: 2, url: "https://1234abcd.ngrok.io", name: "Tunnel true" }]

```

--------------------------------

### Environment Configuration (.env file)

Source: https://context7.com/ekaone/supabase-ngrok/llms.txt

Example configuration for environment variables required by the project, including Supabase URL and API key, and ngrok authentication token. These variables are typically loaded from a `.env` file.

```bash
# .env file configuration
SUPABASE_URL=https://your-project.supabase.co/
SUPABASE_API_KEY=your-supabase-anon-key
NGROK_AUTH_TOKEN=your-ngrok-auth-token

# Example values:
# SUPABASE_URL=https://abcdefgh.supabase.co/
# SUPABASE_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
# NGROK_AUTH_TOKEN=2D3xR8M9K7jL5pQ1wN6vF4h...

```

--------------------------------

### Connect to Tunnel URL via Socket.IO Client

Source: https://github.com/ekaone/supabase-ngrok/blob/main/README.md

This React useEffect hook demonstrates how a client can connect to the ngrok tunnel URL provided by the supabase-ngrok server using socket.io-client. It listens for 'DataSocket' events and updates the component's state with the received data. Ensure socket.io-client is installed as a dependency.

```jsx
const [response, setResponse] = useState("");

useEffect(() => {
  const socket = socketIOClient(ENDPOINT);
  socket.on("DataSocket", (data: React.SetStateAction<string>) => {
    setResponse(data);
  });

  return () => socket.disconnect();
}, []);

useEffect(() => {
  console.log(response);
}, [response]);
```

--------------------------------

### Broadcast Incrementing Counter via Socket.IO (Node.js)

Source: https://context7.com/ekaone/supabase-ngrok/llms.txt

Sets up a Socket.IO server that listens for client connections. Upon connection, it starts emitting an incrementing counter value to the client every second using the 'DataSocket' event. It handles client disconnections by clearing the interval.

```javascript
const io = require("socket.io")();

let interval;
let count = 0;

io.on("connection", (socket) => {
  console.log("New client connected");

  if (interval) {
    clearInterval(interval);
  }

  interval = setInterval(() => {
    const response = count++;
    socket.emit("DataSocket", response);
    console.log("Sent count:", response);
  }, 1000);

  socket.on("disconnect", () => {
    console.log("Client disconnected");
    clearInterval(interval);
  });
});

io.listen(80);
console.log("Socket.IO server listening on port 80");

// Expected output every second: Sent count: 0, 1, 2, 3...
```

--------------------------------

### Listen for Supabase Table Changes in Real-time (Node.js)

Source: https://context7.com/ekaone/supabase-ngrok/llms.txt

Subscribes to real-time updates from a specific Supabase table (filtered by ID). It listens for any event type (INSERT, UPDATE, DELETE) and logs the payload, including event type, new data, and old data. Requires Supabase client initialization.

```javascript
require("dotenv").config();
const { createClient } = require("@supabase/supabase-js");

const supabase = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_API_KEY
);

const mySubscription = supabase
  .from("todos:id=eq.14")
  .on("*", (payload) => {
    console.log("Change received!", payload);
    console.log("Event type:", payload.eventType);
    console.log("New data:", payload.new);
    console.log("Old data:", payload.old);
  })
  .subscribe();

// Expected output when table changes:
// Change received! { eventType: 'UPDATE', new: {...}, old: {...}, ... }
```

--------------------------------

### Create Ngrok Tunnel and Sync URL to Supabase (Node.js)

Source: https://context7.com/ekaone/supabase-ngrok/llms.txt

Establishes an ngrok HTTP tunnel, retrieves the generated URL, and updates a specific record in a Supabase database table via a PATCH request. It requires ngrok authentication token and Supabase project credentials.

```javascript
require("dotenv").config();
const fetch = require("node-fetch");
const ngrok = require("ngrok");

(async function () {
  const url = await ngrok.connect({
    proto: "http",
    authtoken: process.env.NGROK_AUTH_TOKEN,
    region: "us",
  });

  try {
    const response = await fetch(`${process.env.SUPABASE_URL}rest/v1/tunnel?id=eq.2`, {
      method: "PATCH",
      body: JSON.stringify({ url: url, name: "Tunnel true" }),
      headers: {
        apikey: process.env.SUPABASE_API_KEY,
        Authorization: process.env.SUPABASE_API_KEY,
        "Content-Type": "application/json",
        Prefer: "return=representation",
      },
    });

    const json = await response.json();
    console.log("Tunnel URL saved:", json);
    console.log("Active tunnel URL:", url);
  } catch (error) {
    console.error("Failed to save tunnel URL:", error);
  }
})();

// Expected output: { id: 2, url: "https://abc123.ngrok.io", name: "Tunnel true" }
```

--------------------------------

### HTTP Response Status Checker Utility (Node.js)

Source: https://context7.com/ekaone/supabase-ngrok/llms.txt

A Node.js utility function that fetches data from a given URL and validates the HTTP response status code using a `checkStatus` helper function. It throws an error for non-successful status codes (e.g., 404, 500) and logs success or failure. Requires `node-fetch` and a local `libs/checkStatus` module.

```javascript
const { checkStatus } = require("./libs/checkStatus");
const fetch = require("node-fetch");

async function fetchWithStatusCheck() {
  try {
    const response = await fetch("https://api.example.com/data");
    const validatedResponse = checkStatus(response);
    const data = await validatedResponse.json();
    console.log("Success:", data);
    return data;
  } catch (error) {
    console.error("Request failed:", error);
  }
}

// checkStatus function implementation:
function checkStatus(res) {
  if (res.ok) {
    // res.status >= 200 && res.status < 300
    return res;
  } else {
    throw new Error(res.statusText);
  }
}

fetchWithStatusCheck();

// Expected output on success: Success: { ...data }
// Expected output on error: Request failed: Error: Not Found

```

--------------------------------

### Socket.IO Client for Real-time Tunnel URL Updates (React)

Source: https://context7.com/ekaone/supabase-ngrok/llms.txt

A React component that connects to a Socket.IO server to receive real-time updates of tunnel URLs. It uses the `socket.io-client` library and manages connection state. It expects to receive data on the 'DataSocket' event and logs connection/disconnection events.

```javascript
import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";

const ENDPOINT = "http://localhost:80";

function TunnelMonitor() {
  const [tunnelUrl, setTunnelUrl] = useState("");

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);

    socket.on("DataSocket", (data) => {
      setTunnelUrl(data);
      console.log("Received tunnel data:", data);
    });

    socket.on("connect", () => {
      console.log("Connected to Socket.IO server");
    });

    socket.on("disconnect", () => {
      console.log("Disconnected from Socket.IO server");
    });

    return () => socket.disconnect();
  }, []);

  return (
    <div>
      <h2>Current Tunnel URL:</h2>
      <p>{tunnelUrl || "Waiting for tunnel..."}</p>
    </div>
  );
}

export default TunnelMonitor;
```

--------------------------------

### Update Supabase Record via REST API (Node.js)

Source: https://context7.com/ekaone/supabase-ngrok/llms.txt

Performs a PATCH request to update a specific record in the 'raspi' table in Supabase. It increments a 'value' field for a record with id=3. Requires Supabase URL, API key, and node-fetch.

```javascript
require("dotenv").config();
const fetch = require("node-fetch");

let counter = 0;

async function updateRaspiValue() {
  try {
    const response = await fetch(`${process.env.SUPABASE_URL}rest/v1/raspi?id=eq.3`, {
      method: "PATCH",
      body: JSON.stringify({ value: counter++ }),
      headers: {
        apikey: process.env.SUPABASE_API_KEY,
        Authorization: process.env.SUPABASE_API_KEY,
        "Content-Type": "application/json",
        Prefer: "return=representation",
      },
    });

    const json = await response.json();
    console.log("Updated record:", json);
  } catch (error) {
    console.error("Update failed:", error);
  }
}

updateRaspiValue();

// Expected output: [{ id: 3, value: 0 }]
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.