PubNub

Build a React chat app that can communicate cross-platform

This tutorial will guide you through downloading, building and running the telehealth chat demo for React.  You will then optionally make some basic changes to the app.  Don’t worry if you have little or no React experience because this tutorial is aimed at all levels.

1

Prerequisites

 You’ll need the following before you begin:

  • Node JS, the latest version or the most recent LTS version.  Node will also download the node package manager, npm, which is used in the subsequent build steps.

  • Git (optional).  The source code for this demo is hosted in GitHub and git is a popular tool to obtain the source but other options exist such as downloading it as a zip.

  • A code editor such as Visual Studio Code (optional).  You could get by with a simple text editor such as notepad or textedit but something like VS Code will make the process more user friendly.

Obtaining the Source Code

The Telehealth demo app for React is available from GitHub.  This patient-doctor chat application uses PubNub’s Chat Components, which are pre-built UI and data building blocks to quickly create functional and visually appealing chat apps.

You can either:

Invoke the git tool from a terminal to clone the source code.  Navigate to an empty folder and enter the following command:

1

IMPORTANT: The cross-platform version of this application is stored on a different branch, x-telehealth.  Do not use the version on the master branch.

1

Or if you would rather download the source code as a zip file, select the x-telehealth branch and then click ‘Download Zip’ which appears as a drop down on the ‘Code’ button.  You will need to unzip the file before you can build the application.

Other options exist, GitHub is very flexible :)

Open the code in an editor (e.g. Visual Studio Code)

Open the react-chat-components folder in your text editor.

There are a few directories to be aware of:

  • \react-chat-components\samples\telehealth.  This is where code associated with the telehealth sample app is located.

  • \react-chat-components\samples\.  This is where files shared by all samples are located.  Most importantly you will find .env.sample here, discussed shortly.

  • \react-chat-components\samples\data\.  This is where data associated with the sample apps is located, for example user names and IDs.  This will be discussed near the end of this tutorial.

Copy or rename .env.example so you have a file called .env in the same directory as .env.sample, i.e. \react-chat-components\samples\.env

You are not ready to run the application until you obtain the Publish and Subscribe keys, so that is the next step.

BackNext