This repository contains the code for the Team Chat web reference application hosted on the PubNub Chat Docs Page. You can download the project to run on your local machine, and explore the code to see how we built it.
The application demonstrates how to build a chat application using:
- PubNub
- TypeScript
- React
- Redux
- Node.js
- PubNub Account (Free)
To run this application you must obtain publish and subscribe keys from your PubNub Account. If you don't already have an account, you can create one for free.
-
Sign in to your PubNub Dashboard.
-
Click Create New App.
-
Give your app a name, and select Chat App as the app type.
-
Click Create.
-
Click your new app to open its settings, then click its keyset.
-
Enable the Objects feature. Presence and PubNub Functions should have been enabled when the keyset was created.
-
Select a region to store your user data (e.g. US East).
-
Locate the Publish and Subscribe keys. You'll need these keys to include in this project.
-
Clone the GitHub repository.
git clone git@github.com:pubnub/typescript-ref-app-team-chat.git
-
Install the project.
cd typescript-ref-app-team-chat npm install
-
Run the project in your local environment. If you are running the app for the first time, enter your PubNub keys to begin populating sample data.
npm start
A web browser should automatically open http://localhost:3000, and you can explore your very own Team Chat app!
To enable the gif picker, you need a GIPHY API key. You can sign up for a (free) developer account and create a key from the GIPHY developer dashboard.
-
Create
.env
at the root of the project to hold your environment variables. This file will no be commited. -
Copy the API key from the dashboard and add it to
.env
.GIPHY_API_KEY=your-api-key
-
The variable needs to be exposed to the React app by adding another line.
REACT_APP_GIPHY_API_KEY=$GIPHY_API_KEY
-
Restart the dev server for the changes to take effect.
npm start
In addition to message moderation, AI powered moderation can be enabled to block innapropriate images.
You can sign up for a (free) account and API key from the Sightengine dashboard.
-
Add the API User and API Secret to your
.env
file.FUNCTIONS_SIGHTENGINE_API_SECRET=your-api-secret FUNCTIONS_SIGHTENGINE_API_USER=your-api-user
The /giphy ${message}
command shares a gif related to the message.
-
You should have created a GIPHY API key in the Gif Picker section. Exposed it to the function by adding another variable that references it.
FUNCTIONS_GIPHY_API_KEY=$GIPHY_API_KEY
Link previews, message moderation, and the /giphy
command are powered by PubNub functions. To enable these features, you'll need to build and deploy the function code in /server
.
Note: To manage functions from the CLI, you have to sign in to your PubNub account. This is currently not possible if you created your account with SSO.
-
Use the CLI to build and deploy the functions from source (in
server/src
).npm run deploy:functions
-
Enter your PubNub account email and password (these will not be saved).
-
Select your app and keyset using the up/down arrows and return to submit.
-
From the PubNub dashboard, select the keyset your are using. Then, open the functions tab (on the left). Enter a module name and description, then click Create New Module.
-
Click Create Function, give it a name, set the event type to Before Publish or Fire and enter
*
for the channel pattern and click Create. -
Use the CLI to build the functions from source (in
server/src
).npm run build:functions
-
After running the build command, a minified and compiled version of the function is available is
server/build/transformPublishedMessages.js
. Copy the contents of the file into the functions editor and click Save. -
Click Start Module from the top right to deploy your function.
We've included additional documentation and a detailed tutorial for building a chat app with React, Redux, and PubNub.
You can view it in the /docs
directory or run the documentation site locally.
-
If you haven't already, clone the GitHub repository
git clone git@github.com:pubnub/typescript-ref-app-team-chat.git
-
Install the dependencies
cd typescript-ref-app-team-chat/website npm install
-
Run the docs website locally.
npm start
If the chat app is already running, you may be asked to accept a different port. Your browser should open to http//localhost:3000 where you can find the tutorial and docs.
Checkout PubNub Chat Docs page for more information about how to use the React and Redux SDKs to add in-app chat to your applications.
This project was bootstrapped with Create React App. Special thanks to Martin Lagrange, Elvis Wolcott, and Mark Erikson.