Theme

SDK Installation ​

Complete installation guide for De. SDKs across all platforms and frameworks.

Quick Installation

Web (npm):

bash
npm install @de./sdk

React Native:

bash
npm install @de./sdk-rn
cd ios && pod install

Web SDK Installation ​

Package Managers ​

1

Install via NPM

Recommended for most projects

bash
npm install @de./sdk

Verify installation:

bash
npm list @de./sdk
2

Install via Yarn

For Yarn users

bash
yarn add @de./sdk

Verify installation:

bash
yarn why @de./sdk
3

Install via PNPM

For PNPM users

bash
pnpm add @de./sdk

Verify installation:

bash
pnpm list @de./sdk

CDN Installation ​

For quick prototypes or non-bundled projects:

html
<!DOCTYPE html>
<html>
<head>
  <title>De. SDK Demo</title>
</head>
<body>
  <div id="map" style="width: 100%; height: 600px;"></div>
  
  <!-- De. SDK -->
  <script src="https://cdn.dedot.io/sdk/1.0.0/de.sdk.js"></script>
  
  <script>
    // SDK is available as global De
    const msi = new De.MSI({
      element: 'map',
      accessToken: 'your-token'
    })
    
    msi.load().then(({ controls }) => {
      console.log('Map loaded!')
    })
  </script>
</body>
</html>

CDN Versions:

  • Latest: https://cdn.dedot.io/sdk/latest/de.sdk.js
  • Specific: https://cdn.dedot.io/sdk/1.0.0/de.sdk.js
  • Minified: https://cdn.dedot.io/sdk/1.0.0/de.sdk.min.js

Framework-Specific Installation ​

React ​

1

Install Dependencies

Add SDK and types

bash
npm install @de./sdk
npm install --save-dev @types/node
2

Environment Variables

Create .env file

bash
# .env.local
REACT_APP_DE_WORKSPACE_ID=your-workspace-id
REACT_APP_DE_ACCESS_TOKEN=your-access-token
3

Create Map Component

src/components/Map.tsx

typescript
import { useEffect, useRef } from 'react'
import De from '@de./sdk'

export default function Map() {
  const mapRef = useRef<HTMLDivElement>(null)
  const msiRef = useRef<any>(null)
  
  useEffect(() => {
    if (!mapRef.current) return
    
    const initMap = async () => {
      msiRef.current = new De.MSI({
        element: mapRef.current!,
        accessToken: process.env.REACT_APP_DE_ACCESS_TOKEN
      })
      
      await msiRef.current.load()
    }
    
    initMap()
    
    return () => {
      msiRef.current?.destroy()
    }
  }, [])
  
  return (
    <div 
      ref={mapRef} 
      style={{ width: '100%', height: '600px' }}
    />
  )
}

Next.js ​

1

Install Package

Add SDK

bash
npm install @de./sdk
2

Environment Variables

.env.local

bash
NEXT_PUBLIC_DE_WORKSPACE_ID=your-workspace-id
NEXT_PUBLIC_DE_ACCESS_TOKEN=your-access-token
3

Create Client Component

app/components/Map.tsx

typescript
'use client'

import { useEffect, useRef } from 'react'
import De from '@de./sdk'

export default function Map() {
  const mapRef = useRef<HTMLDivElement>(null)
  
  useEffect(() => {
    if (!mapRef.current) return
    
    const msi = new De.MSI({
      element: mapRef.current,
      accessToken: process.env.NEXT_PUBLIC_DE_ACCESS_TOKEN
    })
    
    msi.load()
    
    return () => msi.destroy()
  }, [])
  
  return <div ref={mapRef} style={{ width: '100%', height: '600px' }} />
}
4

Use in Page

app/page.tsx

typescript
import dynamic from 'next/dynamic'

// Disable SSR for map component
const Map = dynamic(() => import('./components/Map'), { 
  ssr: false,
  loading: () => <div>Loading map...</div>
})

export default function Home() {
  return (
    <main>
      <h1>Delivery Tracking</h1>
      <Map />
    </main>
  )
}

Vue 3 ​

1

Install Package

Add SDK

bash
npm install @de./sdk
2

Environment Variables

.env

bash
VITE_DE_WORKSPACE_ID=your-workspace-id
VITE_DE_ACCESS_TOKEN=your-access-token
3

Create Map Component

src/components/Map.vue

vue
<template>
  <div ref="mapContainer" style="width: 100%; height: 600px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import De from '@de./sdk'

const mapContainer = ref<HTMLDivElement | null>(null)
let msi: any = null

onMounted(async () => {
  if (!mapContainer.value) return
  
  msi = new De.MSI({
    element: mapContainer.value,
    accessToken: import.meta.env.VITE_DE_ACCESS_TOKEN
  })
  
  await msi.load()
})

onUnmounted(() => {
  msi?.destroy()
})
</script>

Angular ​

1

Install Package

Add SDK

bash
npm install @de./sdk
2

Environment Variables

src/environments/environment.ts

typescript
export const environment = {
  production: false,
  deWorkspaceId: 'your-workspace-id',
  deAccessToken: 'your-access-token'
}
3

Create Map Component

src/app/map/map.component.ts

typescript
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core'
import De from '@de./sdk'
import { environment } from '../../environments/environment'

@Component({
  selector: 'app-map',
  template: '<div #mapContainer style="width: 100%; height: 600px"></div>'
})
export class MapComponent implements OnInit, OnDestroy {
  @ViewChild('mapContainer') mapContainer!: ElementRef
  private msi: any
  
  async ngOnInit() {
    this.msi = new De.MSI({
      element: this.mapContainer.nativeElement,
      accessToken: environment.deAccessToken
    })
    
    await this.msi.load()
  }
  
  ngOnDestroy() {
    this.msi?.destroy()
  }
}

Svelte ​

1

Install Package

Add SDK

bash
npm install @de./sdk
2

Environment Variables

.env

bash
VITE_DE_WORKSPACE_ID=your-workspace-id
VITE_DE_ACCESS_TOKEN=your-access-token
3

Create Map Component

src/components/Map.svelte

svelte
<script lang="ts">
  import { onMount, onDestroy } from 'svelte'
  import De from '@de./sdk'
  import { env } from '$env/dynamic/public'
  
  let mapContainer: HTMLDivElement
  let msi: any
  
  onMount(async () => {
    msi = new De.MSI({
      element: mapContainer,
      accessToken: env.VITE_DE_ACCESS_TOKEN
    })
    
    await msi.load()
  })
  
  onDestroy(() => {
    msi?.destroy()
  })
</script>

<div bind:this={mapContainer} style="width: 100%; height: 600px"></div>

React Native SDK Installation ​

Prerequisites ​

  • Node.js 16+
  • React Native 0.68+
  • iOS: Xcode 13+, CocoaPods
  • Android: Android Studio, JDK 11+

Installation Steps ​

1

Install Package

Add React Native SDK

bash
npm install @de./sdk-rn
2

Install Pods (iOS)

Install native dependencies

bash
cd ios
pod install
cd ..
3

Configure iOS

ios/Podfile

ruby
platform :ios, '13.0'

target 'YourApp' do
  # ... existing config
  
  # De. SDK
  pod 'DeSdk', :path => '../node_modules/@de./sdk-rn'
end
4

Configure Android

android/app/build.gradle

gradle
android {
  compileSdkVersion 33
  
  defaultConfig {
    minSdkVersion 23
    targetSdkVersion 33
  }
}

dependencies {
  // De. SDK auto-linked
  implementation project(':de-sdk-rn')
}
5

Permissions (iOS)

ios/YourApp/Info.plist

xml
<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to show delivery tracking</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>We need your location for background tracking</string>
6

Permissions (Android)

android/app/src/main/AndroidManifest.xml

xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

TypeScript Configuration ​

Web Projects ​

tsconfig.json:

json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "strict": true,
    "skipLibCheck": true,
    "types": ["@de./sdk", "node"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

React Native Projects ​

tsconfig.json:

json
{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "types": ["@de./sdk-rn", "react-native"]
  }
}

Environment Setup ​

Development Environment ​

Create .env file:

bash
# Development
DE_WORKSPACE_ID=ws_dev_123
DE_ACCESS_TOKEN=sk_dev_xyz789
DE_ENVIRONMENT=dev
DE_API_URL=https://dev-api.dedot.io

Staging Environment ​

.env.staging:

bash
# Staging
DE_WORKSPACE_ID=ws_staging_123
DE_ACCESS_TOKEN=sk_staging_xyz789
DE_ENVIRONMENT=staging
DE_API_URL=https://staging-api.dedot.io

Production Environment ​

.env.production:

bash
# Production
DE_WORKSPACE_ID=ws_prod_123
DE_ACCESS_TOKEN=sk_prod_xyz789
DE_ENVIRONMENT=prod
DE_API_URL=https://api.dedot.io

Load Environment Variables ​

JavaScript/TypeScript:

typescript
import dotenv from 'dotenv'
dotenv.config()

const config = {
  workspace: process.env.DE_WORKSPACE_ID,
  accessToken: process.env.DE_ACCESS_TOKEN,
  env: process.env.DE_ENVIRONMENT
}

React Native:

bash
npm install react-native-dotenv
typescript
import { DE_WORKSPACE_ID, DE_ACCESS_TOKEN } from '@env'

const config = {
  workspace: DE_WORKSPACE_ID,
  accessToken: DE_ACCESS_TOKEN
}

Verification ​

Test Installation ​

Create a test file to verify SDK is working:

test-sdk.js:

javascript
import De from '@de./sdk'

console.log('De. SDK version:', De.version)

const access = new De.Access({
  workspace: 'test',
  accessToken: 'test'
})

console.log('SDK loaded successfully!')

Run test:

bash
node test-sdk.js

Expected output:

De. SDK version: 1.0.0
SDK loaded successfully!

Troubleshooting ​

Common Issues ​

Module Not Found

Error: Cannot find module '@de./sdk'

Solution:

bash
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install

TypeScript Errors

Error: Could not find declaration file

Solution:

bash
# Install types
npm install --save-dev @types/node

# Add to tsconfig.json
{
  "compilerOptions": {
    "types": ["@de./sdk"]
  }
}

Build Errors (React Native)

Error: Pod install failed

Solution:

bash
cd ios
pod deintegrate
pod install
cd ..

Access Token Invalid

Error: 401 Unauthorized

Solution:

  • Check token is correct
  • Verify workspace ID matches
  • Regenerate token if expired
  • Check environment variables loaded

Getting Help ​

If you encounter issues:

  1. Check the documentation
  2. Search GitHub issues
  3. Ask on Discord
  4. Contact [email protected]

Version Requirements ​

Minimum Versions ​

Web SDK:

  • Node.js: 16.0.0+
  • npm: 7.0.0+
  • Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

React Native SDK:

  • Node.js: 16.0.0+
  • React Native: 0.68.0+
  • iOS: 13.0+
  • Android: API 23+ (Android 6.0+)

Peer Dependencies ​

The SDK requires these peer dependencies:

json
{
  "peerDependencies": {
    "react": ">=17.0.0",
    "react-dom": ">=17.0.0"
  }
}

Install if missing:

bash
npm install react react-dom

Next Steps ​

Web SDK GuideBuild Your First AppView Examples