backpage

BackPage

Naive web UI 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.

Installation

npm install react backpage

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 />);

await page.guide(); // Print connect information.

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>;
};

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 />
  </>
);

Console outputs are streamed as part of the HTML in a non-incremental way, so it is not recommended to use <Console /> with a large limit number.

License

MIT License.