Build a React chat app that can communicate cross-platform

This React chat app tutorial will guide you through downloading, building and running the digital health chat demo (also known as the telehealth chat demo).  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.

PubNub supports HIPAA, GDPR, SOC2 type 2, and CCPA compliance enabling you to build digital health applications.

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 digital health (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

Or if you would rather download the source code as a zip file, 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.

Web browser displaying the GitHub repository page for PubNub's 'react-chat-components'.

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\react\telehealth.  This is where code associated with the digital health sample app is located.

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

  • \react-chat-components\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.

Visual Studio Code interface with open project folder showing React chat components and files like .env.example highlighted.

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

Integrated development environment (IDE) interface with a project folder structure open on the sidebar and a highlighted .env configuration file showing environment variable keys.

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

BackStep 1 of 4Next