Chat SDK Tutorial: Environment setup for React

This tutorial will walk you through setting up the Getting Stated sample for the Chat SDK, explain the architecture behind the app, and make some modifications. The Chat SDK samples are all housed within the larger js-chat GitHub repository under the /samples/ directory and show how to use the Chat SDK to quickly and easily create functional chat applications with PubNub.

Prerequisites

The Chat SDK is both framework and UI agnostic, but the ‘getting started’ sample app is written in React, so this tutorial will also use React with some custom UX. This section of the tutorial will set up your development environment to build and run a React application that uses the PubNub Chat SDK.

Make sure you have the following installed on your computer:

Node.JS
Yarn
Git
A code editor (e.g., Visual Studio Code)

Versions of the dependencies can be found on the documentation page.

Download Source Application

In a terminal, navigate to an empty folder. Enter the following command to clone the repository and navigate into the directory.

1
2
git clone https://github.com/pubnub/js-chat.git
cd js-chat

This step is optional but will ensure that the version of the repository you are using matches the version used to create this tutorial.

1
git checkout c84156bdf8f82e71ba426369b21e60e2605b28bf

Install dependencies

Please note that although we strive to maintain up-to-date instructions for all our tutorials, if the instructions below become outdated for any reason, these instructions can also be found at our documentation page.

From within the js-chat root directory, execute the following:

1
2
3
yarn
cd lib
yarn build

Navigate to the /samples/getting-started/ folder and run the app

1
2
cd ../samples/getting-started
yarn dev

If you open your browser on the instructed port, e.g., http://localhost:5173. You should just see a loading screen. The app doesn’t complete loading because the PubNub publish and subscribe keys have not yet been specified.

Open the application with your favorite code editor, navigate to the ./src/App.tsx file, and locate the call to Chat.init(...)

1
2
3
4
5
const chat = await Chat.init({
  subscribeKey: import.meta.env.VITE_PUBNUB_SUB_KEY,
  publishKey: import.meta.env.VITE_PUBNUB_PUB_KEY,
  userId: randomizedUsers[0].id,
})

The next step is to generate your own publish and subscribe keys to replace these placeholders.

Side note: If you are adding the Chat SDK to your own application, you need to add the dependency using yarn, see the documentation section ‘Add Chat SDK to your app’ for more information.

1
2
//  To add the Chat SDK to your own application
yarn add @pubnub/chat