backpage

BackPage

Naive static HTML streaming based on React for Node.js CLI applications.

How does it work?

BackPage renders your React application to HTML and streams updates (static HTML snapshots) to your browser.

It is designed for really simple GUI as a complementary to text logs, so user interaction is neither supported nor its goal.

Features

• Stream static HTML from React rendering.
• Send notification to browser.

Installation

npm install react backpage

Basic Usage

main.tsx

import {BackPage} from 'backpage';
import React, {useState, useEffect} from 'react';

import {App} from './app.js';

const page = new BackPage();

page.render(<App />);

// Print page information including URL.
await page.guide();

// Send notification to browser (if connected).
page.notify('Hello BackPage!');

app.tsx

export const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(
      setCount(count => count + 1),
      1000,
    );

    return () => clearInterval(timer);
  }, []);

  return <div>Count: {count}</div>;
};

Notify Fallback

You can get notified if no browser is connected or the notification is not clicked within the timeout.

const page = new BackPage({
  notify: {
    timeout: 30_000,
    fallback: notification => {
      // Handle the notification manually.

      // You can also return a webhook URL or request options to initiate an
      // HTTP request.
      return 'https://some.webhook/';
    },
  },
});

page.notify('Hello BackPage!');

Built-in Components

<Title />

Setting the title of the page.

page.render(
  <>
    <Title>Awesome Page</Title>
    <div>Hello BackPage!</div>
  </>,
);

<Style />

Add a <style /> tag to the page with content loaded from src.

const App = () => (
  <>
    <Style src={STYLE_PATH} />
    <div>Hello BackPage!</div>
  </>
);

<Console />

Intercepts console outputs using patch-console.

const App = () => (
  <>
    <h2>Logs</h2>
    <Console />
  </>
);

License

MIT License.