Starting Logux Redux Project

In this section, we will create a UI client for Logux with Logux Redux. Logux Redux can work with any UI framework. We will use React and Create React App only as an example.

Server

Before starting the client, you need to create Logux Server:

How to create the server on Node.js.
How to create a proxy to use HTTP server on any other language.

You will need a bundler to compile npm packages into JS bundle. Webpack or Vite is excellent for it. Also, we recommend using some library to bind Redux state with DOM. React or Preact is good options. However, for simple UI, you can write code to change DOM according to state changes.

To create a project with a single command, we will use Create React App.

npx create-react-app client-logux
cd client-logux

Adding Redux

Install Redux:

npm i react-redux redux

pnpm add react-redux redux

yarn add react-redux redux

Open src/index.js:

import * as serviceWorker from './serviceWorker'
import { Provider } from 'react-redux'
import reducer from './reducers'
import { createStore } from 'redux'

const store = createStore(reducer)

ReactDOM.render(<App />, document.getElementById('root'))
ReactDOM.render(
  <Provider store={store}><App /></Provider>,
  document.getElementById('root')
)

Create src/reducers/index.js

import { combineReducers } from 'redux'

export default combineReducers({
  // TODO: Add reducers depends on application purposes
  test: (state = 0) => state // Remove me when you will have real reducer
})

Read how to use Redux.

Adding Logux Redux

Install Logux Redux:

npm i @logux/core @logux/client @logux/redux nanostores

pnpm add @logux/core @logux/client @logux/redux nanostores

yarn add @logux/core @logux/client @logux/redux nanostores

Edit src/index.js:

import reducer from './reducers'
import { createStore } from 'redux'
import { CrossTabClient } from '@logux/client'
import { createStoreCreator } from '@logux/redux'

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

const createStore = createStoreCreator(client)

const store = createStore(reducer)
store.client.start()

Synchronization UI

To see the state of the synchronization process, we will add some helpers. They are all optional, but they are great for a start.

Install Logux Client:

npm i @logux/client

pnpm add @logux/client

yarn add @logux/client

Change src/index.js:

import { CrossTabClient } from '@logux/client'
import { CrossTabClient, badge, badgeEn, log } from '@logux/client'
import { badgeStyles } from '@logux/client/badge/styles'
import { createStoreCreator } from '@logux/redux'

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

store.client.start()

Check the Result

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

Next chapter