Build a Serverless Chat App in 5 Minutes with React & Chat Engine

Today you’ll learn how to use a chat app out of the box provided to you by Chat Engine.

This tutorials will have three steps and take about five minutes…

We’ll build an app with create-react-app, and add react-chat-engine

Chat Engine is free so you can toy around as long as you like.

Enough chatter, let’s get started…

(1/3) Start a React Project

First step, lets create a react app with create-react-app in your terminal:

npx create-react-app chat-engine-tutorial
cd chat-engine-tutorial
yarn run start

(If you haven’t installed create-react-app, run npm install -g create-react-app)

Boom! You have a React App up and running. Let’s start adding Chat.

(2/3) Setup Serverless Chat API

This next step doesn’t need code.

Let’s go to Chat Engine and get our chat API key.

1. Register at chatengine.io
2. Create a Project, I’ll call mine “Tutorial”
3. Create your first User or two, I’ll call my users “Adam” and “Eve”
4. You’ll need the Public Key and the Username + Password of a user

Done! Now onto the final part.

(3/3) Add the Chat API

Let’s connect this chat API to your React project.

Take your favourite IDE and open the chat-engine-tutorial project.

Open the src/App.js file, and replace it with the following code:

import React from 'react';
import { ChatEngine } from 'react-chat-engine';
function App() {
  return (
    <ChatEngine
      publicKey='00000000-0000-0000-0000-000000000000'
      userName='adam'
      userPassword='pass1234'
    />
  );
}
export default App;

IMPORTANT: Replace publicKey with your Public Key, replace userName with your User’s username, and replace userPassword with your user’s password.

Save and reopen localhost:3000

Add a Chat in the bottom left and BOOM! You have a serverless chat app!

You’re done the basics. You now have a serverless chat app thanks to React and Chat Engine.

Bonus Content: Customizations

If you’re looking for custom styles and features, I encourage you to react the React Chat Engine Documentation.

It shows you how to customize components, style and build your own functionality on top.

You can even add hideExample={true} as a props and rebuild the app from scratch!

I hope you enjoyed this post and enjoy chatting!