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.
• Public URL via backpage.cloud.

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

Public URL

By specifying a UUID as token, you can get a public URL from backpage.cloud:

import {BackPage, getPersistentToken} from 'backpage';

const page = new BackPage({
  // You can also use any random UUID for temporary page.
  token: await getPersistentToken(),
  // Different pages can be setup using the same token with different names.
  name: 'project-name',
});

await page.guide();

Note: backpage.cloud may introduce payments for significant network traffic to cover the expense in the future.

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.