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
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.
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.
Other options exist, GitHub is very flexible :)
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.
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.