Starting Logux Client Project

In this section, we will create a UI client for Logux with Logux Client.

We recommend using any Single-Page-Application boilerplate based on Vite.

Then install Logux Client:

npm i @logux/client

Open src/index.ts and add:

import { CrossTabClient, badge, badgeEn, log } from '@logux/client'
import { badgeStyles } from '@logux/client/badge/styles'
import { SUBPROTOCOL } from '../api'

const client = new CrossTabClient({
  prefix: 'appName',
  server:
    process.env.NODE_ENV === 'development'
      ? 'ws://localhost:31337'
      : 'wss://logux.example.com',
  subprotocol: SUBPROTOCOL,
  userId: 'anonymous', // TODO: We will fill it in Authentication recipe
  token: '' // TODO: We will fill it in Authentication recipe
})

badge(client, { messages: badgeEn, styles: badgeStyles })
log(client)

client.start()

Check the Result

1. Open two terminals.
2. Start your Logux server in one terminal by npm start in server directory.
3. Start your client in the second terminal by npm start in client directory.

Next chapter