/realtime-mongodb-pusher

Sample app that shows how to use MongoDB change streams and Pusher in a Node.js/React app

Primary LanguageJavaScriptMIT LicenseMIT

realtime-mongodb-pusher

React application that allows you to add and delete tasks. It communicates to an API implemented in Node.js that saves the changes to a database. The Node.js script also receives these changes using change streams, parsing them and publishing them to a Pusher channel so the React application can consume them.

Follow the tutorial here.

Getting Started

  1. Clone this repository.
  2. Create a Pusher app.
  3. Enter your Pusher app information in server/server.js and in client/src/App.js.
  4. In a terminal window, start MongoDB as a replica set of one server with the command: mongod --dbpath <DATA_PATH> --replSet "rs".
  5. In a separate terminal window, run mongo, the MongoDB client.
  6. If this is the first time you set up a replica set, execute the command rs.initiate().
  7. Create the database tasksDb (use tasksDb) and the collection tasks (db.createCollection('tasks')).
  8. In a separate terminal window, cd into the server directory and execute npm install to download the dependencies and then, npm start to start the server.
  9. In a separate terminal window, cd into the client directory and execute npm install to download the dependencies and then, npm start to start the app.
  10. A browser window will open, you can open another one to see how the task are replicated in realtime.

Prerequisites

Built With

  • MongoDB - NoSQL database
  • Node.js - A JavaScript runtime
  • React - A JavaScript library for building webapps
  • Pusher - APIs to enable devs building realtime features

Acknowledgments

  • Thanks to Pusher for sponsoring this tutorial.

LICENSE

MIT