Installing JavaScript SDK

You can integrate the Ditto SDK with your web and Node.js projects developed using JavaScript and TypeScript languages. 
For a complete overview of the platforms, transports, and devices that the JavaScript SDK supports, see Compatibility with JavaScript﻿.
If you're using Node.js and want instructions on how to create a task app, see the Node.js Task App Quickstart﻿ and the Task App: Node.js﻿ tutorial.
To install the JavaScript SDK:
1
Confirm that you meet the minimum requirements. (Prerequisites﻿)
2
Install the ditto package in your environment. (Installing Dependencies﻿)
3
Import and initialize Ditto in your app. (Integrating Ditto﻿)
4
Authenticate with the Big Peer and then start syncing offline. (Integrating and Initializing﻿)
Prerequisites
Following are the minimum requirements that must be met before attempting to install Ditto.
﻿Node.js active and maintenance long-term support (LTS) 
Linux, macOS version 11, or Windows version 10.0
Installing Dependencies
Install the @dittolive/ditto package into your project:
bash
npm install @dittolive/ditto
npm install @dittolive/ditto
﻿
Integrating Ditto and Starting Sync
Import and initialize Ditto, and then provide your access credentials for one-time authentication with the Big Peer:
From the top-most scope of your app, import Ditto.
Using async await, initialize Ditto.
Provide your access credentials:
Replace the appID placeholder value with the app ID that identifies your app in Ditto.
Replace the token placeholder value with your playground token that the Big Peer uses to verify your digital identity before issuing your playground certificate. 
Make sure to instantiate the ditto object in the top-most scope of your app. Otherwise, it may be inadvertently garbage collected and no longer accessible throughout the lifecycle of your app. 
For instructions on how to obtain your access credentials, see Onboarding﻿. For an introduction to authentication in Ditto, see Ditto Basics > Authentication and Initialization﻿.
JS
import { init, Ditto } from "@dittolive/ditto";

let ditto;
async function main() {
  await init()
  ditto = new Ditto({
    type: "onlinePlayground",
    appID: "YOUR_APP_ID",
    token: "YOUR_PLAYGROUND_TOKEN"
  })

  ditto.startSync()
}

main()
import { init, Ditto } from "@dittolive/ditto";

let ditto;
async function main() {
  await init()
  ditto = new Ditto({
    type: "onlinePlayground",
    appID: "YOUR_APP_ID",
    token: "YOUR_PLAYGROUND_TOKEN"
  })

  ditto.startSync()
}

main()
﻿
Running Ditto
If you're using typescript, you must create the JavaScript file by running the following command:
Bash
tsc
tsc
﻿
Then, you can execute the file:
Bash
node index.js
node index.js
﻿
Add a Sync Subscriptions
Use the ditto.sync namespace to add a sync subscription.
JS
import { init, Ditto } from '@dittolive/ditto'

let ditto

async function main () {
  await init()

  ditto = new Ditto({ type: 'onlinePlayground', appID: 'YOUR_APP_ID', token: 'YOUR_TOKEN_HERE'})
  ditto.startSync()

  // Add a sync subscription
  ditto.sync.registerSubscription(`
    SELECT *
    FROM tasks
    WHERE isDeleted = false`)
}

main()
import { init, Ditto } from '@dittolive/ditto'

let ditto

async function main () {
  await init()

  ditto = new Ditto({ type: 'onlinePlayground', appID: 'YOUR_APP_ID', token: 'YOUR_TOKEN_HERE'})
  ditto.startSync()

  // Add a sync subscription
  ditto.sync.registerSubscription(`
    SELECT *
    FROM tasks
    WHERE isDeleted = false`)
}

main()
﻿
Listening to Changes
Using the observeLocal method, as follows, for every change to a document, you can retrieve those documents and print them to the console:
For a step-by-step demonstration of how to create a basic task app, see the Task App: Node.js﻿ tutorial.
JS
import { init, Ditto } from '@dittolive/ditto'

let ditto

async function main () {
  await init()

  ditto = new Ditto({ type: 'onlinePlayground', appID: 'YOUR_APP_ID', token: 'YOUR_TOKEN_HERE'})
  ditto.startSync()

    // Add a sync subscription
  ditto.sync.registerSubscription(`
    SELECT *
    FROM tasks
    WHERE isDeleted = false`)

  // Add a store observer
  ditto.store.registerObserver(`
    SELECT *
    FROM tasks
    WHERE isDeleted = false`,
    {} /* empty args */,
    (result) => {
      console.log(result.items)
    })


  const newTask = {
    isCompleted: false,
    isDeleted: false,
    body: "Hello world!"
  }

  // Inserting a new document
  ditto.store.execute(`
    INSERT INTO tasks
    DOCUMENTS (:newTask)`,
    { newTask })
}

main()
import { init, Ditto } from '@dittolive/ditto'

let ditto

async function main () {
  await init()

  ditto = new Ditto({ type: 'onlinePlayground', appID: 'YOUR_APP_ID', token: 'YOUR_TOKEN_HERE'})
  ditto.startSync()

    // Add a sync subscription
  ditto.sync.registerSubscription(`
    SELECT *
    FROM tasks
    WHERE isDeleted = false`)

  // Add a store observer
  ditto.store.registerObserver(`
    SELECT *
    FROM tasks
    WHERE isDeleted = false`,
    {} /* empty args */,
    (result) => {
      console.log(result.items)
    })


  const newTask = {
    isCompleted: false,
    isDeleted: false,
    body: "Hello world!"
  }

  // Inserting a new document
  ditto.store.execute(`
    INSERT INTO tasks
    DOCUMENTS (:newTask)`,
    { newTask })
}

main()
﻿
﻿
Updated 12 Mar 2024
Did this page help you?
React Native
Node.js Task App Quickstart