Library for easy integration of LiveView into Express.js applications
npm install @liveviewjs/expressThe project enables developers to use LiveViewJS with Express.
This project contains code that enables developers to add LiveViewJS to your NodeJS + Express application (see src/node). Additionally, it contains example code of a working ExpressJS server with all the example LiveViews from the examples package (see src/example).
Integration LiveViewJS to your Express takes three steps:
1. Add LiveViewJS to your package.json Express app:
npm install liveviewjs @liveviewjs/express
2. Create one or more LiveViews (use BaseLiveView as your base class) - Feel free to use an example or include from the @liveviewjs/examples package.
``ts`
export class MyLiveView extends BaseLiveView
2. Create a LiveViewRouter to map your LiveViews to request paths. This is how requests are routed to your LiveViews both HTTP and WebSockets.`ts`
const liveViewRouter: LiveViewRouter = {
"/myroute": new MyLiveView(), // maps /myroute to MyLiveView
}
3. Define a LiveViewPageRenderer which defines the page layout in which your LiveViews will be rendered. Optionally, you can define a LiveViewRootRenderer which defines another level in which to render your LiveViews (often used for things like flash messages)`ts
// define the page layout in which your LiveViews will be rendered,
// also loads the LiveView client javascript which facilitates the
// communication between the client and the server
export const pageRenderer: LiveViewPageRenderer = (
pageTitleDefaults: PageTitleDefaults,
csrfToken: string,
liveViewContent: LiveViewTemplate
): LiveViewTemplate => {
return html
}
` 4. Configure your
LiveViewServerAdaptor and integrate the httpMiddleware and wsAdaptor functions into your server.
`ts
// initialize the LiveViewServer
const liveView = new NodeExpressLiveViewServer(
router,
new NodeJwtSerDe(signingSecret),
new SingleProcessPubSub(),
pageRenderer,
{ title: "Express Demo", suffix: " ยท LiveViewJS" },
new SessionFlashAdaptor(),
rootRenderer
);//...
// setup the LiveViewJS middleware
app.use(liveViewAdaptor.httpMiddleware());
//...
// initialize the LiveViewJS websocket message router
const liveViewRouter = liveView.wsRouter();
// send websocket requests to the LiveViewJS message router
wsServer.on("connection", (ws) => {
const connectionId = nanoid();
ws.on("message", async (message) => {
// pass websocket messages to LiveViewJS
await liveViewRouter.onMessage(connectionId, message.toString(), new NodeWsAdaptor(ws));
});
ws.on("close", async () => {
// pass websocket close events to LiveViewJS
await liveViewRouter.onClose(connectionId);
});
});
`
That's it!!! Start your server and start making requests to the LiveView routes!$3
Like all software, this is a work in progress. If you have any feedback, please let us know by opening an issue on the GitHub repository.$3
src/node is the code that allows developers to add LiveViewJS to Express applications. - index.ts - barrel file for ExpressJS / LiveViewJS adaptors
- jwtSerDe.ts - jsonwebtoken-based serializer/desierializer for LiveViewJS server/client communication
- server.ts - ExpressJS Server Adaptor for LiveViewJS
- wsAdaptor.ts - ExpressJS / ws Adaptor for WebSockets
- redisPubSub.ts - PubSub implementation using Redis
$3
src/example is the code that contains a working ExpressJS server with all the example LiveViews from the examples package. - index.ts - the ExpressJS server
- indexHandler.ts - shows an index html page with links to all the examples
- liveViewRenderers.ts - defines the page layout and root layouts for all the LiveViews (i.e., implements the
LiveViewPageRenderer and the LiveViewRootRenderer interfaces)
To Run the example server
Check out the full LiveViewJS repository:
git clone https://github.com/floodfx/liveviewjs.gitcd to this package:
cd packages/expressThen run the following command:
npm install
npm run start`