No Comments Yet
Be the first to share your thoughts and start the conversation.
Real time features with liveblocks
Loading...
0 Comments
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
00:00:00Â To start making our app come to life, of course, we'll use LiveBlocks to add the collaborative features.
00:00:06Â So click the link down in the description, that'll allow you to follow along and see exactly what I'm seeing.
00:00:13Â By the way, it'll bring you to this amazing landing page that they recently created, where in real time, with other people,
00:00:20Â you can mess with these 3D elements across the screen.
00:00:23Â Definitely go ahead and check it out.
00:00:25Â With that said, let's click sign up or sign in at the top right.
00:00:30Â Next, choose either GitHub or Google and create a new project.
00:00:34Â As you can see, I already used it for a couple.
00:00:36Â Name a project with something like JSM and then give it your name, such as in my case, Live Docs.
00:00:43Â For the time being, we'll switch the environment to development and click create project.
00:00:48Â And I love how all of these DevTools are becoming so much better with developer quickstarts.
00:00:54Â We have seen how convenient everything was set up within Clark.
00:00:57Â You didn't even have to check out the docs.
00:01:00Â We just created the account and made it work.
00:01:02Â It's going to be similar with LiveBlocks.
00:01:05Â They're asking you, what do you want to build?
00:01:08Â In this case, it's the text editor.
00:01:10Â So let's select it.
00:01:12Â We'll be using the LiveBlocks lexical editor.
00:01:16Â So let's select it as well.
00:01:17Â And how convenient we can choose Next.js as the technology.
00:01:21Â And now we're given the next steps.
00:01:24Â So let's simply install it.
00:01:26Â So simply paste the command right here.
00:01:28Â And then we'll have to initialize the LiveBlocks.config.ts by running this command.
00:01:35Â So let's wait until this one gets installed and then we can paste it.
00:01:39Â Okay, one down and one more to go.
00:01:41Â We want to install the Create LiveBlocks app.
00:01:47Â And LiveBlocks.config.ts has been generated.
00:01:51Â So let's navigate over to it and see what we have there.
00:01:55Â Here we can define the types for our configuration, such as the storage, the presence and everything.
00:02:01Â Basically letting LiveBlocks know of which types are your rooms, your events, your users, and so much more.
00:02:09Â So for example, let's modify the user meta.
00:02:13Â In this case, our user will have an ID of string, and it'll also have some additional information, such as the ID of string within the info.
00:02:24Â It'll also have a name of string, an email of string, an avatar of string, and a dedicated caller of string as well.
00:02:35Â So now across our entire application, where we're using a user, Liblox will know how that user looks like.
00:02:42Â Going back, we can go to the third step.
00:02:44Â And that is to create a LiveBlocks room.
00:02:47Â In this course, I'll teach you how to create multiple collaborative rooms where you'll have one room for each document.
00:02:56Â Okay?
00:02:57Â But for now, we can follow the instructions and then I'll teach you how to modify it later on.
00:03:01Â We'll copy this part right here, but with some tiny changes.
00:03:05Â Instead of putting this in the approom.tsx, we'll create a new file right here called a provider.
00:03:12Â Provider.tsx.
00:03:14Â We can run RAFCE right here, and then we'll return what we just copied.
00:03:20Â Next, since we're using a provider, we'll have to make this a client component by using the use client directive.
00:03:28Â Next, we can say import.
00:03:31Â LiveBlocks provider coming from add LiveBlocks forward slash react forward slash suspense.
00:03:38Â We'll use the room provider later on, as it will have many individual rooms, but I'll leave the client-side suspense, which is also coming from LiveBlocks suspense.
00:03:48Â And then in here we have the children.
00:03:50Â So we have to specify that as the props, children and children will be of a type react node.
00:04:01Â And we never want to store keys in plain text right here.
00:04:04Â Actually, LiveBlocks recommends against having this public API key anyway.
00:04:09Â So we can just remove this and later down the line, I'll show you a different way of authenticating our users through ID tokens.
00:04:17Â So here we can say auth endpoint is equal to forward slash API forward slash LiveBlocks dash auth.
00:04:26Â So we can soon implement this endpoint and I'll show you how that works.
00:04:30Â Other than that, we have this client-side suspense right here, and this is a handy place to add a custom loader.
00:04:37Â So let's quickly do that by creating a new component in our components folder called loader.tsx.
00:04:46Â Run RAFCE.
00:04:49Â Give this div a class name equal to loader.
00:04:54Â and render a Next.js image with a source equal to forward slash assets, forward slash icons, and forward slash loader.svg with an alt tag of loader,
00:05:10Â a width of about 32, A height of 32. And how convenient this is, Tailwind CSS provides a class name called animate-spin,
00:05:22Â which will spin this loader indefinitely.
00:05:26Â Great.
00:05:27Â So now we can go back here, and instead of using this basic loading text, we can now use our self-closing loader component.
00:05:37Â And we can go back into it, and right after the image, we can see loading dot dot dot still.
00:05:43Â Great.
00:05:44Â So now in our provider, we have the LiveBlocks provider, which is wrapping the client-side suspense.
00:05:51Â But remember, we removed the room out of the equation.
00:05:55Â So where are we going to create a new room?
00:05:58Â First, let's use this provider within the layout, and then I'll show you.
00:06:03Â So if we go here, you can already see that we are wrapping our application with the clerk provider, but right below the body,
00:06:11Â we also want to wrap everything in our provider coming from dot slash provider.
00:06:17Â And this is our LiveBlocks provider.
00:06:20Â And now every single component and page within our application will have knowledge of LiveBlocks integration.
00:06:28Â So let's go into the page that needs it the most, which is the document details page.
00:06:34Â This one right here.
00:06:36Â And here we'll use a new component, which we can create called a collaborative.
00:06:43Â room.tsx, run r-a-f-c-e, and here we can add that room part that we took out from the quick start before.
00:06:52Â Let me just refresh your memory.
00:06:54Â See, we just used the LiveLogs provider so far, but now we can copy this room provider part.
00:07:01Â And the reason why we extracted it into a new component and a new page is because we'll have multiple rooms for each one of our documents.
00:07:08Â So let's paste it right here.
00:07:11Â Let's import the room provider from React Suspense and client side as well.
00:07:16Â And don't forget, this will have to be turned into a client component.
00:07:21Â So we can say use client.
00:07:23Â And in this case, we don't need any children right below it.
00:07:27Â What we do need is a div with a class name equal to collaborative And now here we can render that header that we had before in the page,
00:07:40Â remember?
00:07:41Â This one right here, as well as the editor.
00:07:44Â So we'll take it out of the document and we'll put it right here within this div, within a room.
00:07:52Â And with it, we also have to get all of the imports.
00:07:55Â So let's copy them and paste them right here.
00:07:59Â And let's indent it properly.
00:08:02Â Now you can see that each room provider has its own ID.
00:08:06Â This is static for now, but of course, later on we'll generate a unique ID whenever a user generates a new document.
00:08:14Â Next, it says add the Liblox room to your page.
00:08:17Â Okay, we have done that.
00:08:19Â And set up the collaborative lexical text editor.
00:08:21Â We have done that using the JSM editor package, which is very similar to what they have here.
00:08:27Â We already have the toolbar in our editor, so I'll skip this.
00:08:30Â Next, we have render threads.
00:08:32Â We'll add this later on, once we add the comments.
00:08:35Â And then after that, we have the style, the editor, and this is where those two lines come in handy.
00:08:41Â So remember back in the globals.css before we had them commented out, but now we don't have to do that anymore because we have successfully installed the
00:08:51Â Liblox package.