Five Server

https://github.com/yandeu/five-server-vscode
Admin
Five Server is a VS Code extension that provides a better live server with instant file updates,...
Tokens:4,773
Snippets:44
Trust Score:9.4
Update:7 months ago
Show doc for...
Tokens:
Raw
### Start Live Server Programmatically (TypeScript)

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

Starts the Five Server instance programmatically using a VS Code command. The server's configuration is determined by VS Code settings (prefixed with 'fiveServer.') and the 'fiveserver.config.js' file in the workspace root.

```typescript
vscode.commands.executeCommand('fiveServer.start');
```

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

### Example HTML for Code Highlighting

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

An HTML file demonstrating the code highlighting feature. Elements being actively edited in the browser are highlighted, with an option to disable highlighting for specific elements by adding the 'H' attribute.

```html
<!-- HTML file being edited -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <!-- When cursor is on this div, it gets highlighted in browser -->
    <div>Currently editing this element</div>

    <!-- Add 'H' attribute to disable highlighting for specific elements -->
    <div H>This element won't be highlighted</div>
  </body>
</html>
```

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

### Five Server Configuration File Example

Source: https://github.com/yandeu/five-server-vscode/blob/main/README.md

This JavaScript configuration file (`fiveserver.config.js`) demonstrates how to enable and customize various features of Five Server. It allows control over features like highlighting, instant updates, remote logs, and CSS injection.

```javascript
// fiveserver.config.js
module.exports = {
  highlight: true, // enable highlight feature
  injectBody: true, // enable instant update
  remoteLogs: true, // enable remoteLogs
  remoteLogs: "yellow", // enable remoteLogs and use the color yellow
  injectCss: false, // disable injecting css
  navigate: true, // enable auto-navigation
};
```

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

### Open Folder as Server Root (TypeScript)

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

Defines a function to open a selected folder as the server's root directory. This is useful for serving subdirectories as the main path. It checks if the selected item is a directory before starting the server.

```typescript
// Right-click folder → "Open with Five Server (root)"
const startServerRoot = async (uri: vscode.Uri) => {
  const directoryPath = uri.fsPath;
  const workspacePath = vscode.workspace.workspaceFolders?.[0].uri.fsPath;

  if (workspacePath) {
    const rootPath = directoryPath.replace(workspacePath, '').replace(/^\//, '');
    const stat = await vscode.workspace.fs.stat(uri);

    if (stat.type === vscode.FileType.Directory) {
      await startServer(uri, { rootPath });
    }
  }
};

```

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

### VS Code Settings Configuration (JSON)

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

Example JSON object demonstrating various configuration options for the Five Server extension available through VS Code settings. These settings allow customization of port, host, browser, features like body injection and highlighting, ignored files, and PHP settings.

```json
{
  "fiveServer.port": 5500,
  "fiveServer.host": "0.0.0.0",
  "fiveServer.browser": ["chrome"],
  "fiveServer.injectBody": true,
  "fiveServer.highlight": true,
  "fiveServer.navigate": true,
  "fiveServer.ignore": ["node_modules", ".git"],
  "fiveServer.openTerminal": false,
  "fiveServer.php.executable": "/usr/bin/php",
  "fiveServer.php.ini": "/etc/php.ini"
}

```

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

### Open Specific File with Five Server (TypeScript)

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

Registers a command to open a specific file using the Five Server. This command can be triggered from the context menu when right-clicking a file. It starts the server with the specified file as the entry point.

```typescript
context.subscriptions.push(
  vscode.commands.registerCommand('fiveServer.open', async (uri: vscode.Uri) => {
    // Server starts and opens the specified file
    await fiveServer.start({
      ...config,
      open: uri.fsPath.replace(rootAbsolute, ''),
      root,
      workspace,
    });
  })
);

```

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

### Basic HTML Structure for Quick Test

Source: https://github.com/yandeu/five-server-vscode/blob/main/README.md

This is a simple HTML file used for a quick test to verify if Five Server is functioning correctly. It includes a basic document structure with a heading.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Test File</title>
  </head>
  <body>
    <h1>It works!</h1>
  </body>
</html>
```

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

### Keyboard Shortcut for Opening Server (JSON)

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

Defines a keyboard shortcut for opening the Five Server. The default shortcut is Alt+L followed by Alt+O. On macOS, the shortcut uses the Command key instead of Alt.

```json
{
  "keybindings": [
    {
      "command": "fiveServer.openViaShortcut",
      "key": "alt+L alt+O",
      "when": "editorTextFocus",
      "mac": "cmd+L cmd+O"
    }
  ]
}

```

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

### Configure PHP Server Settings for Five Server

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

This JavaScript configuration file (`fiveserver.config.js`) sets up the PHP executable path and other options for Five Server to enable live reload support for PHP files. It specifies the path to the PHP binary, an optional custom `php.ini` file, and enables features like `injectBody` and `highlight`.

```javascript
// fiveserver.config.js
module.exports = {
  php: '/usr/bin/php',		  // Path to PHP executable
  phpIni: '/etc/php.ini',		  // Optional: custom php.ini path
  injectBody: true,		  // Enable live updates for PHP
  highlight: true 		  // Enable highlighting for PHP files
};
```

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

### Integrate Five Server Client Script in PHP Application

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

This PHP code demonstrates how to manually include the Five Server client-side script in an `index.php` file for advanced PHP applications. By including `<script src="http://localhost:5500/fiveserver.js"></script>` in the `<head>`, live reload functionality is enabled for the PHP application.

```php
<!-- index.php -->
<!DOCTYPE html>
<html>
  <head>
    <title>PHP with Five Server</title>
    <!-- Include Five Server script for live reload -->
    <script src="http://localhost:5500/fiveserver.js"></script>
  </head>
  <body>
    <?php
      echo "<h1>Hello from PHP!</h1>";
      echo "<p>Current time: " . date("Y-m-d H:i:s") . "</p>";
    ?>
  </body>
</html>
```

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

### Configure Five Server with fiveserver.config.js

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

Defines project-specific settings for the Five Server VS Code extension. This configuration file allows customization of features like live reloading, browser behavior, and ignored files, taking precedence over global VS Code settings.

```javascript
// fiveserver.config.js
module.exports = {
  highlight: true,
  injectBody: true,
  remoteLogs: "yellow",
  injectCss: true,
  navigate: true,
  root: "./public",
  open: "index.html",
  host: "localhost",
  port: 5500,
  browser: ["chrome"],
  ignore: [
    "node_modules",
    ".git",
    /\.test\.js$/
  ],
  debugVSCode: true,
  php: "/usr/bin/php",
  phpIni: "/etc/php.ini"
};
```

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

### Publish VS Code Extension to Open VSX

Source: https://github.com/yandeu/five-server-vscode/blob/main/ovsx.md

This command uses the ovsx CLI to publish a VS Code extension package (.vsix file) to the Open VSX Registry. You need to replace 'x.x.x' with your extension's version and provide your personal access token (TOKEN) for authentication.

```console
npx ovsx publish .\five-server-x.x.x.vsix -p TOKEN
```

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

### Keyboard Shortcut for Closing Server (JSON)

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

Defines a keyboard shortcut for closing the Five Server instance. The default shortcut is Alt+L followed by Alt+C. On macOS, the shortcut uses the Command key instead of Alt.

```json
{
  "keybindings": [
    {
      "command": "fiveServer.close",
      "key": "alt+L alt+C",
      "when": "editorTextFocus",
      "mac": "cmd+L cmd+C"
    }
  ]
}

```

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

### Implement Instant Body Update (injectBody)

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

This TypeScript code snippet demonstrates the internal mechanism for injecting HTML body updates without a full page refresh. It listens for text document changes, checks if the file is HTML or PHP, and then updates the browser content accordingly.

```typescript
// Internal implementation for body injection
vscode.workspace.onDidChangeTextDocument((e) => {
  if (!fiveServer?.isRunning) return;
  if (!isHtml(e.document.fileName) && !isPhp(e.document.fileName)) return;
  if (!shouldInjectBody()) return;

  updatePage(e.document.fileName, e.document.getText());
  updateBody(page.current.fileName);
});

const updateBody = (fileName: string) => {
  fiveServer?.parseBody.updateBody(
    fileName,
    page.current.text,
    shouldHighlight(fileName),
    vscode.window.activeTextEditor?.selection.active
  );
};
```

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

### Execute Inline JavaScript After Five Server Connection

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

This HTML and JavaScript code demonstrates how to ensure inline scripts execute only after the Five Server has successfully connected, particularly when `injectBody` is enabled. It uses an event listener for the 'connected' event on a Five Server element or falls back to the 'load' event if the element is not found.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Inline Script Example</title>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const main = () => {
        console.log('Application initialized');
        document.getElementById('app').innerHTML = '<h1>Ready!</h1>';
      };

      // Wait for Five Server to connect before running code
      const five = document.querySelector('[data-id="five-server"]');
      if (five) {
        five.addEventListener('connected', main);
      } else {
        window.addEventListener('load', main);
      }
    </script>
  </body>
</html>
```

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

### Implement Auto Navigation (navigate)

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

This TypeScript code handles automatic browser navigation to the currently edited file. It monitors active text editor changes and updates the browser's URL when switching between HTML or PHP files.

```typescript
// Navigation handler
vscode.window.onDidChangeActiveTextEditor((e) => {
  if (!fiveServer?.isRunning) return;
  navigate(e?.document.fileName, e?.document.getText());
});

const navigate = (fileName: string | undefined, text: string | undefined) => {
  if (!fiveServer?.isRunning) return;
  if (!shouldNavigate(fileName, text)) return;

  if (activeFileName === fileName) return;
  activeFileName = fileName;

  if (fileName && workspace) {
    fileName = fileName.replace(rootAbsolute, '').replace(/^\\|^/\/gm, '');
    fiveServer.navigate(`/${fileName}`);
  }
};
```

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

### Workaround for injectBody with Inline JavaScript (HTML)

Source: https://github.com/yandeu/five-server-vscode/blob/main/README.md

This snippet provides a workaround for issues with `injectBody` when using inline JavaScript within the `<body>` tag. It ensures scripts execute after Five Server is connected by listening for the 'connected' event or falling back to the 'load' event.

```html
<script>
  const main = () => {
    console.log("Some JavaScript Code...");
  };

  // wait for five-server to connect
  const five = document.querySelector('[data-id="five-server"]');
  if (five) five.addEventListener("connected", main);
  else window.addEventListener("load", main);
</script>
```

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

### Control Five Server with VS Code Status Bar Item

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

This TypeScript code snippet illustrates how to create and manage a status bar item in VS Code for controlling the Five Server. It defines functions to update the status bar's text, tooltip, and color based on the server's state (on, loading, or off), providing a quick way to toggle the server.

```typescript
// Create status bar item
myStatusBarItem = vscode.window.createStatusBarItem(
  vscode.StatusBarAlignment.Right,
  0
);
myStatusBarItem.command = 'fiveServer.statusBar';

const updateStatusBarItem = (status: String) => {
  if (status === 'on') {
    myStatusBarItem.text = `$(zap) ${openURL}`;
    myStatusBarItem.tooltip = 'Close Five Server';
    myStatusBarItem.color = '#ebb549';  // Yellow when active
  } else if (status === 'loading') {
    myStatusBarItem.text = `$(sync~spin) Going Live...`;
    myStatusBarItem.tooltip = 'Loading Five Server';
  } else {
    myStatusBarItem.text = `$(play-circle) Go Live`;
    myStatusBarItem.tooltip = 'Open Five Server';
  }
  myStatusBarItem.show();
};
```

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

### Enable Debug Mode in Five Server Configuration (JavaScript)

Source: https://github.com/yandeu/five-server-vscode/blob/main/README.md

This code snippet shows how to enable debug mode for Five Server by setting the `debugVSCode` option to `true` in the `fiveserver.config.js` file. This is useful for troubleshooting.

```javascript
// fiveserver.config.js
module.exports = {
  debugVSCode: true,
};
```

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

### Stop Live Server Programmatically (TypeScript)

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

Stops the running Five Server instance and cleans up resources, including terminal output and file watchers. The server's state ('on', 'off', or 'loading') can be retrieved from the VS Code workspace state.

```typescript
vscode.commands.executeCommand('fiveServer.close');

// Server state is tracked in workspaceState:
// context.workspaceState.get('fiveServer.state') // "on", "off", or "loading"
```

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

### Remote Logs Terminal Implementation

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

A TypeScript class `PTY` for creating a VS Code terminal to display remote console logs from the browser. It utilizes VS Code's Pseudoterminal API to capture and display messages.

```typescript
// PTY terminal for remote logs
export class PTY {
  writeEmitter: vscode.EventEmitter<string>;
  terminal: vscode.Terminal;

  public write(...message: string[]) {
    const write = message.join(' ');
    this.terminal.sendText(write, true);
  }

  constructor(open = true) {
    this.writeEmitter = new vscode.EventEmitter<string>();

    const pty: vscode.Pseudoterminal = {
      onDidWrite: this.writeEmitter.event,
      open: () => {},
      close: () => this.writeEmitter.dispose(),
      handleInput: (data) => this.writeEmitter.fire(data === '\r' ? '\r\n' : data + '\r\n'),
    };

    this.terminal = vscode.window.createTerminal({ name: 'Five Server', pty });
    if (open) this.terminal.show();
  }
}

// Usage: Messages from browser appear in terminal
const messageHandler = (message: any) => {
  if (pty && message && message.msg) {
    pty.write(message.msg);
  }
};
```

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

### Display HTML Validation Errors with VS Code Decorations

Source: https://context7.com/yandeu/five-server-vscode/llms.txt

This TypeScript code snippet demonstrates how to display HTML validation errors as inline decorations within the VS Code editor. It utilizes a decorator function to render error messages and line numbers, and a worker message handler to process validation results from the Five Server.

```typescript
// Decorator for HTML validation messages
export const decorate = (
  fileName: string,
  props: { text: string; line: number }[],
  color: string
) => {
  const hash = strToHash(fileName);
  decorations[hash] = [];

  props.forEach((p) => {
    const { text, line } = p;
    decorations[hash].push({
      renderOptions: { after: { contentText: text, color } },
      range: new Range(new Position(line - 1, 1024), new Position(line - 1, 1024)),
    });
  });

  refreshDecorations(fileName);
};

// Worker message handler for validation results
fiveServer.parseBody.workers.on('message', (msg: any) => {
  const json = JSON.parse(msg);

  if (json.report && json.report.results) {
    const results = json.report.results;
    const htmlErrors = results[0]?.messages.map((m: any) => ({
      message: m.message,
      ruleId: m.ruleId,
      line: m.line
    }));

    decorate(
      page.current.fileName,
      htmlErrors.map((e: any) => ({ text: `// ${e.message}`, line: e.line })),
      colors.yellow
    );
  }
});
```
Tokens:
Raw