### Local process example

Source: https://github.com/xetera/localproxy/blob/main/README.md

Example of running a local webserver and accessing it through localproxy.

```sh
cd ~/myprojects/project1
# run a webserver on any port
npm run dev
# localproxy uses the path passed to --watch to
# automatically detect processes running in its sub-folders
curl https://project1.localhost
```

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

### macOS DNS Setup without root

Source: https://github.com/xetera/localproxy/blob/main/README.md

Instructions for setting up dnsmasq on macOS to resolve .localhost and .internal domains without requiring root privileges for localproxy.

```sh
brew install dnsmasq
echo 'address=/.localhost/127.0.0.1' >> $(brew --prefix)/etc/dnsmasq.conf
echo 'address=/.internal/127.0.0.1' >> $(brew --prefix)/etc/dnsmasq.conf
sudo brew services start dnsmasq
```

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

### Basic Usage

Source: https://github.com/xetera/localproxy/blob/main/README.md

Navigate to your project directory, run your development server, and access it via a .localhost domain.

```sh
cd ~/projects/coolproject
PORT=$(random) npm run dev
curl https://coolproject.localhost
# ✨ it just works like magic
```

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

### Running a Postgres instance with LocalProxy

Source: https://github.com/xetera/localproxy/blob/main/README.md

This command runs a Postgres instance and configures it to be accessible via LocalProxy on port 5432.

```shell
docker run --name db -l localproxy.tcpport=5432 -e POSTGRES_HOST_AUTH_METHOD=trust postgres
```

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

### Connecting to Postgres via LocalProxy

Source: https://github.com/xetera/localproxy/blob/main/README.md

This command connects to the Postgres instance using psql, with specific SSL requirements for LocalProxy.

```shell
psql "postgresql://postgres@db.localhost/postgres?sslmode=require&sslnegotiation=direct"
```

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

### Running a Redis instance with LocalProxy

Source: https://github.com/xetera/localproxy/blob/main/README.md

This command runs a Redis instance and configures it to be accessible via LocalProxy on port 6379.

```shell
docker run --name myredis -l localproxy.tcpport=6379 redis
```

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

### Docker daemon.json configuration for DNS

Source: https://github.com/xetera/localproxy/blob/main/README.md

Configuration for Docker's daemon.json on Linux to use localproxy's DNS server.

```json
{
  "dns": ["127.0.0.1", "9.9.9.9"]
}
```

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

### Running Localproxy with a watch folder

Source: https://github.com/xetera/localproxy/blob/main/README.md

Command to run the localproxy daemon, watching a specific folder for local processes.

```sh
sudo CGO_ENABLED=0 go run ./cmd/localproxyd --watch ~/myprojects
```

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

### Connecting to Redis via LocalProxy (secure)

Source: https://github.com/xetera/localproxy/blob/main/README.md

This command connects to the Redis instance using redis-cli with TLS and explicit certificate verification.

```shell
redis-cli --tls --cacert "$(mkcert -CAROOT)/rootCA.pem" -h myredis.localhost --sni myredis.localhost
```

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

### Orbstack docker.json configuration for DNS

Source: https://github.com/xetera/localproxy/blob/main/README.md

Configuration for Orbstack's docker.json on macOS to use localproxy's DNS server, pointing to the host's private IP.

```json
{
  "dns": ["10.0.0.185", "9.9.9.9"]
}
```

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

### Connecting to Redis via LocalProxy (insecure)

Source: https://github.com/xetera/localproxy/blob/main/README.md

This command connects to the Redis instance using redis-cli with TLS, potentially omitting certificate verification.

```shell
redis-cli --tls --insecure -h myredis.localhost --sni myredis.localhost
```

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

### Log Display and EventSource Connection

Source: https://github.com/xetera/localproxy/blob/main/internal/dashboard/templates/logs.html

JavaScript code to connect to the log stream using EventSource, parse ANSI escape codes to HTML, and display logs in real-time.

```javascript
const logsContainer = document.getElementById('logs');
const eventSource = new EventSource('/logs?subdomain={{.Subdomain}}');
const ansi_up = new AnsiUp();
let initialized = false;

eventSource.onopen = function() {
  if (!initialized) {
    logsContainer.innerHTML = '<div class="loading">Waiting for logs...</div>';
    initialized = true;
  }
};

eventSource.onmessage = function(event) {
  if (!initialized) {
    logsContainer.innerHTML = '';
    initialized = true;
  }
  const line = document.createElement('div');
  line.className = 'log-line';
  const text = event.data;
  line.innerHTML = ansi_up.ansi_to_html(text);
  logsContainer.appendChild(line);
  logsContainer.scrollTop = logsContainer.scrollHeight;
};

eventSource.onerror = function() {
  const errorLine = document.createElement('div');
  errorLine.className = 'log-line';
  errorLine.style.color = '#ef4444';
  errorLine.textContent = 'Connection lost. Reconnecting...';
  logsContainer.appendChild(errorLine);
};
```

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

### 404 Page Styles

Source: https://github.com/xetera/localproxy/blob/main/internal/dashboard/templates/404.html

CSS styles for the 404 Not Found page.

```css
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #0a0a0a; color: #e5e5e5; height: 100vh; display: flex; align-items: center; justify-content: center; }
.container { text-align: center; padding: 2rem; }
.code { font-size: 6rem; font-weight: 700; color: #525252; line-height: 1; margin-bottom: 1rem; }
.title { font-size: 1.5rem; font-weight: 600; color: #a3a3a3; margin-bottom: 0.5rem; }
.message { font-size: 0.875rem; color: #737373; margin-bottom: 2rem; }
.domain { font-family: ui-monospace, monospace; color: #60a5fa; background: #1e3a5f; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
.link { display: inline-block; margin-top: 1.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: 0.375rem; border: 1px solid #404040; background: #1a1a1a; color: #a3a3a3; text-decoration: none; transition: all 0.15s; }
.link:hover { background: #262626; color: #e5e5e5; border-color: #525252; }
```

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

### JavaScript for Saving Subdomain Mappings

Source: https://github.com/xetera/localproxy/blob/main/internal/dashboard/templates/captive.html

This JavaScript function handles saving subdomain mappings. It validates the subdomain input, sends a POST request to the API, and displays status messages. Upon successful saving, it redirects the user to the newly mapped subdomain.

```javascript
async function saveMapping(folder, cwd, pid) {
  const input = document.getElementById("input-" + pid);
  const subdomain = input.value.trim().toLowerCase();
  const statusEl = document.getElementById("status-" + pid);
  if (!subdomain) {
    showStatus(statusEl, "Please enter a subdomain", "error");
    return;
  }
  if (!/^\p{Ll}[\p{Ll}\p{N}\-]*\p{Ll}$|^\p{Ll}$/.test(subdomain)) {
    showStatus(
      statusEl,
      "Subdomain must contain only lowercase letters, numbers, and hyphens",
      "error",
    );
    return;
  }
  try {
    const res = await fetch("/api/subdomain-mapping", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        folder_group: folder,
        subdomain: subdomain,
        cwd: cwd,
      }),
    });
    if (!res.ok) {
      const text = await res.text();
      throw new Error(text);
    }
    showStatus(statusEl, "Mapping saved! Redirecting...", "success");
    setTimeout(() => {
      window.location.href = "https://" + subdomain + "." + folder + ".localhost";
    }, 1000);
  } catch (err) {
    showStatus(statusEl, "Error: " + err.message, "error");
  }
}

function showStatus(el, message, type) {
  el.textContent = message;
  el.className = "status-message " + type;
}
```

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

### JavaScript for Removing Subdomain Mappings

Source: https://github.com/xetera/localproxy/blob/main/internal/dashboard/templates/captive.html

This JavaScript function handles the removal of subdomain mappings. It sends a DELETE request to the API with the current working directory and reloads the page upon successful removal.

```javascript
async function removeMapping(cwd) {
  try {
    const res = await fetch(
      "/api/subdomain-mapping?cwd=" + encodeURIComponent(cwd),
      {
        method: "DELETE",
      },
    );
    if (!res.ok) {
      const text = await res.text();
      throw new Error(text);
    }
    window.location.reload();
  } catch (err) {
    alert("Error: " + err.message);
  }
}
```

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

### Packet Row Template

Source: https://github.com/xetera/localproxy/blob/main/internal/dashboard/templates/packet_row.html

This is the HTML template code used to render a single row in the packet table. It dynamically displays packet information.

```html
{{.Timestamp}} {{.Src}} {{if eq .Direction "request"}}→{{else}}←{{end}} {{.Dst}} {{.Protocol}} {{if .PgPreview}}{{range $i, $m := .PgPreview}}{{if $i}}, {{end}}{{$m}}{{end}}{{end}} {{.Length}}
```

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