DEV Community

MongoDB profile image MongoDB Guests
MongoDB Guests for MongoDB

Posted on

Set Up Real-Time Sync Apps With Ditto and MongoDB in 10 Minutes

#webdev #programming #mongodb #tutorial

This tutorial was written by Masha Kozhyna.

Mobile connectivity continues to improve, but offline functionality remains essential in environments with poor or inconsistent networks. Ensuring data integrity and real-time sync across edge devices is a key challenge.

This tutorial walks you through setting up a demo system using Ditto’s edge-sync platform, including the Ditto Quickstart app (for web and mobile), the Ditto Big Peer, the Ditto MongoDB Connector, and a MongoDB Atlas cluster. Data is synchronized between client apps and MongoDB via the Big Peer, enabling seamless real-time collaboration—even offline.

Prerequisites

Before you start, make sure you have:

Architecture overview

Distributed Data Synchronization Architecture for MongoDB Atlas and Ditto Big Peer

  • Quickstart applications (Ditto SDK clients): Self-contained Todo apps running on edge devices (web, mobile, desktop). These form a P2P mesh network for local and Big Peer sync. Each instance uses a shared data model and sync logic.
  • P2P mesh network: Enables local, device-to-device data sync even without an internet connection, ensuring offline resilience and fast local performance.
  • Ditto Big Peer: A high-availability Ditto instance that synchronizes data between MongoDB Atlas and edge devices, acting as a hub for distributed systems.
  • Ditto MongoDB Connector: Listens for changes in both MongoDB and Ditto, and synchronizes data bidirectionally using CRDTs to resolve conflicts. Works alongside the Big Peer.
  • MongoDB Atlas: A fully managed cloud database that acts as the persistent data store, handling storage, querying, and transformation for application data.

Initial setup

MongoDB Atlas cluster

In this section, you'll set up a MongoDB Atlas cluster to store and manage your application's core data.

1: Set up your Atlas cluster

a. Sign in to your Atlas account.

b. If you don't yet have an Atlas cluster, create a free M0 cluster. To learn more about creating an Atlas cluster, see Create a Cluster in our official docs.

IMPORTANT: You can create only one M0 free cluster per project.

c. Choose your cluster and click Connect.

d. Copy your connection string and click Done. It contains the username, password, and the database name in the following format: mongodb+srv://<username>:<password>@<deployment>.mongodb.net/?retryWrites=true&w=majority&appName=<appName>.

For this demo, we created the MongoDB Atlas cluster named SolutionsAssurance on MongoDB version 8.0.3, hosted in the AWS region eu-south-2 (Spain), and on the M10 tier.

IMPORTANT: The minimum supported version for the connector is currently MongoDB 7.0.13 and MongoDB 8.0.0.

2: Add the database and collections

Create the databases and collections you want to synchronize. It is required to set for the collections changeStreamPreAndPostImages:true. This setting allows the connector to ensure causal consistency between both systems.
Replace and in the code snippet below with your actual database and collection names.

use <yourDatabaseName> //check collections db.getCollectionInfos() //set changeStream to true for collection db.runCommand({ collMod: <yourCollectionName>, changeStreamPreAndPostImages: { enabled: true }})
Enter fullscreen mode Exit fullscreen mode

3: Sample data

{ _id: ObjectId('A39E8043-7873-4A29-85E3-BF79BD7260A2'), deleted: false, done: false, title: "List 1" }
Enter fullscreen mode Exit fullscreen mode

4: Add a database user

Create a new database user or use an existing one. The connector authenticates to MongoDB using the username and password of a database user. The user must have readWrite permissions on the target DB.

If you are connecting to a sharded database. the database user also needs to have the explicit read permission for the built-in collection collection in the config database.

5: Whitelist IPs

The Big Peer uses the IPs for interacting with external services such as MongoDB. These three IPs are fixed. You must add them to your MongoDB Atlas allowlist. Select Network Access and click Add IP Address to add IPs.

3.147.233.88 52.15.232.117 3.130.255.9
Enter fullscreen mode Exit fullscreen mode

IMPORTANT: If you’re running BYOC/self-hosted Big Peer in your cloud account, the egress IPs will be your own (not the three above). In that case, allowlist your deployment’s public egress IPs or use Private Endpoints.

Ditto Big Peer instance

In this section, you'll set up the Ditto Big Peer, a synchronization engine.

1: Log in with your Ditto account at the Ditto Portal.

2: Set up the organization and application.

a. Click New organization under the Organizations tab.

b. Click the New app inside your organisation and assign it to Playground Auth mode.

c. At the Connect tab for the Big Peer, you will see App ID, Online Playground Authentication Token and other parameters which you will use for connection with the client application.

3: Review the Ditto portal.

At the Collections tab, we can see all the collections which are synchronized with the Ditto Big Peer.

Quickstart portal page with Collections tab open showing a 'tasks' collection with one document.

We can navigate inside the collection and see the information about every item.

Quickstart portal page with Collections tab open showing 'tasks' collection. One document is displayed with fields for _id, _mdb, deleted, done, and title.

Ditto MongoDB native connector

In this section, you'll set up the Ditto MongoDB Connector, which will run as a service within the Big Peer.

1: Select the MongoDB Connector from the Settings tab.

2: Click the Configure button and fill the Connection info.

Connection info page showing fields for database name and connection string, with an option to add collections to sync and a Save button.<br>

3: Fill in the database field with the MongoDB database that you wish to synchronize with Ditto.

4: Fill in the connection string field, with the connection string of the MongoDB database that you wish to synchronize with Ditto (e.g., mongodb+srv://<db_username>:<db_password>@solutionsassurance.n0kts.mongodb.net/?retryWrites=true&w=majority&appName=SolutionsAssurance).

5: Click Add collection to select the collections for synchronization.

6: Enter the collection name.

7: Enable Initial Sync to import existing data from your MongoDB collection into the Big Peer.

a. When enabled, this one-time background process syncs current documents.

b. If disabled, only future changes (via MongoDB Change Streams) will be synced.

8: Select the mapping type. If you select the Match IDs option, then the ID fields used between Ditto and MongoDB will be identical.

9: If you select the Map fields to Ditto ID option, then you will need to add all of the fields that you wish to map to the Ditto ID.

10: Once you have added all the data, click the Add collection button to add the collection to the connector configuration.

11: Click the Save button to create the connector.

12: You will see the status of the connector. First, it will show Pending, then once it is ready, it will show as Running. In case of an error, the connector will show the status Failed and the error message with details of the issue.

13: Additionally, if you enabled the initial sync, you will see the progress in Initial Sync Status section.

MongoDB Connector page showing connected status with cluster endpoint and target database, and connection IP addresses. Initial sync status for 'tasks' collection shows completed. Collections list includes 'tasks', with button to delete configuration.

14: You can change the configuration of the connector if you want to add/edit/remove the collection for synchronization, change the mapping, or change the credentials used by the connector to connect to a MongoDB Atlas cluster.

15: To re-configure the connector, you can use the Edit button.

MongoDB Connector page showing connected status with cluster endpoint, target database 'Vehicles', connection IP addresses, and highlighted Edit button.

Web application

In this section, you'll configure and run Ditto’s browser web application. This application uses Vite along with TypeScript and React.

1: Clone the repository.

2: From the repository root, copy the .env.sample file to .env, and fill in the fields.

DITTO_APP_ID="" DITTO_PLAYGROUND_TOKEN="" DITTO_AUTH_URL="" DITTO_WEBSOCKET_URL=""
Enter fullscreen mode Exit fullscreen mode

3: Navigate to the project directory and install dependencies.

cd javascript-web npm install
Enter fullscreen mode Exit fullscreen mode

4: Run the application.

npm run dev
Enter fullscreen mode Exit fullscreen mode

5: Visit http://localhost:5173/ to see the application running in the browser.

Ditto Tasks page showing two task items, with 'List 1' checked as completed and 'List 2' active. Sync is enabled, with option to add a new task.

Mobile application

In this section, you'll configure a Ditto Swift application and run it on an iOS device or a simulator.

1: Create a copy of the .env file from the root folder and put it inside the swift folder.

DITTO_APP_ID="" DITTO_PLAYGROUND_TOKEN="" DITTO_AUTH_URL="" DITTO_WEBSOCKET_URL=""
Enter fullscreen mode Exit fullscreen mode

2: Launch Xcode and open the quickstart/swift/tasks/tasks.xcodeproj project.

3: If you want to run the application on your iOS device, navigate to the project Signing and Capabilities tab and modify the Team and Bundle Identifier settings to your Apple developer account credentials to provision building to your device.

4: In Xcode, select a connected iOS device or iOS Simulator as the destination at the top menu.

5: At the top bar, select Product > Build menu item. This should generate an Env.swift source file containing the values from your .env file, and then build the application.

6: At the top bar, choose the Product > Run menu item to start the application.

7: The application will be built and run on the selected device or simulator.

Mobile view of Ditto Tasks app on iPhone showing two tasks, 'List 2' active and 'List 1' completed, with sync enabled and a New Task button.

Use cases

Once the system is configured, you can verify that synchronization is working correctly between your MongoDB collections and Ditto applications. Create a new task in the Quickstart application—it should automatically appear in both the Ditto portal and the corresponding MongoDB collection. Similarly, any changes made directly in MongoDB will be reflected in the Ditto portal and across all connected Quickstart apps.

Learn More

Data integration between edge devices and the cloud doesn’t have to be complex.
With Ditto’s Bidirectional Connector for MongoDB, you can enable real-time, conflict-free synchronization across your systems—even in low-connectivity environments.

To learn more and get started, explore the resources below:

Top comments (0)