To use Liveblocks in React, you need to install our packages to your project. We’ve already installed the packages in this guide, but this is how you’d do it in your own project:
$npm install @liveblocks/client @liveblocks/react
After installing the packages, you can initialize a Liveblocks project with a config file, which we’ve already done on this page:
$npm create-liveblocks-app@latest --init
This file is named liveblocks.config.ts
.
When developing locally, we highly recommend using our DevTools for the best possible development experience.
The first step in connecting to Liveblocks is creating a client which will be
responsible for communicating with our back end. You can do this by modifying
createClient
in your config file, and passing your public API key.
const client = createClient({ publicApiKey: "",});
Ordinarily, you’d find your API keys on the dashboard, but for this tutorial we’ll let you borrow a temporary key.
In most production apps we recommend setting up Liveblocks on the server with your secret key, but for now, the public key is fine. We’ll come back to this in the authentication section.
When building Liveblocks apps, we’ll be exporting all React hooks and components from this file, which enables you to have full type safety with minimal effort.
We’ll be editing the four types in this file later, but for now, take note that
we’re exporting from the suspense
property; this enables the
React Suspense version of our
hooks, which we recommend for easier development.
export const { suspense: { // ... },};
RoomProvider
is the component that acts as the root of your real-time app—try
uncommenting the export in the code panel to see the app connect to Liveblocks!
export const { suspense: { RoomProvider, // ... },};