React Chat App
This is an example of a basic real time chat app using React, Socket.io and Cosmic JS. This example consists of the following:
- React for UI
- Babel for ES6 and JSX transformation
- Webpack for bundling
- Socket.io for real-time communication
- Cosmic JS for saving and returning messages from a cloud-hosted API
The following dev tools are used:
- ESLint to make sure our code is consistent
- React Hot Loader for instant updates on save
Install
Run the following commands to install the app:
git clone https://github.com/tonyspiro/react-chat-app
cd react-chat-app
npm install
Run in production
Run the following command to run the app in production:
npm start
View the app running in production at http://localhost:3000
Run in development
Run the following commands to run the app in development with hot reloading:
npm start server
and in another terminal tab run:
npm run development
View the app running in development at http://localhost:8080
Configure your own chat app
- Set up a bucket in Cosmic JS with an object type of
messages. - Edit config.js:
// config.js
export default {
bucket: {
slug: 'your-bucket-slug',
type_slug: 'messages'
},
server: {
host: process.env.APP_URL || 'http://localhost:3000'
}
}