JavaScript Web Quickstart

​

Prerequisites

Ditto’s JavaScript Web Quickstart runs on modern web browsers. Before getting started, ensure you have the following:

• A code editor (Visual Studio Code is our recommendation, but any code editor will work)
• Git installed on your machine
• Node.js v20.19.0 or later in the 20.x line, or v22.12.0 or later
• A Ditto Portal account with a configured Ditto Database (see Getting SDK Connection Details)

​

Get Started

​

1. Clone the Repository

1. Open the terminal
2. Clone the repository from GitHub.
   git clone https://github.com/getditto/quickstart
   
3. Navigate to the project root directory:
   cd quickstart
   

​

2. Configure Ditto

​

Get Ditto Database ID, Development Token, and Server URL

In the Ditto Portal, open your database and get its Database ID and Development Token. Copy the URL shown under “Connect via SDK” for DITTO_SERVER_URL. See Getting SDK Connection Details for details.

​

Add Ditto Credentials

1. Copy the .env.sample file at the root of the quickstart repo to .env and add your Database ID, Development Token, and Server URL.
   cp .env.sample .env
   
2. Update the .env file with the Database ID, Development Token, and Server URL from your Ditto Database
   DITTO_DATABASE_ID="REPLACE_ME_WITH_YOUR_DATABASE_ID"
   DITTO_DEVELOPMENT_TOKEN="REPLACE_ME_WITH_YOUR_DEVELOPMENT_TOKEN"
   DITTO_SERVER_URL="REPLACE_ME_WITH_YOUR_URL"
   

​

3. Run the Application

1. Navigate to the project directory
   cd javascript-web
   
2. Install dependencies and start the development server
   npm install
   npm run dev
   

​

4. Sync-Data Offline

​

Next Steps

All the Ditto Quickstart apps work together! Try running a quickstart app in other languages and see them all collaborate.

​

Additional Resources

• JavaScript Install Guide
• JavaScript Release Notes
• API Reference