Theme

Installation ​

This guide walks you through installing and configuring De. for your development environment.

Before You Begin

Make sure you have:

  • Node.js 14 or higher
  • A package manager (npm, yarn, or pnpm)
  • A De. workspace account

Choose Your Platform ​

Web Application

Build web-based logistics applications with de.sdk

Learn more →

Mobile Application

Build iOS/Android apps with de.sdk-rn

Learn more →

Web SDK Installation ​

1

Install the SDK

Add @de./sdk to your project

bash
npm install @de./sdk
bash
yarn add @de./sdk
bash
pnpm add @de./sdk
2

Install TypeScript Definitions

Optional but recommended for TypeScript projects

bash
npm install --save-dev @types/node
3

Configure Your Project

Create a configuration file

typescript
// de.config.ts
export default {
  workspace: process.env.DE_WORKSPACE_ID,
  apiUrl: 'https://api.dedot.io',
  msiUrl: 'https://map.dedot.io',
  environment: 'production' // or 'development', 'staging'
}

Environment Variables ​

Create a .env file in your project root:

env
DE_WORKSPACE_ID=your_workspace_id
DE_ACCESS_TOKEN=your_access_token
DE_API_URL=https://api.dedot.io
DE_MSI_URL=https://map.dedot.io

Security Warning

Never commit your .env file to version control. Add it to your .gitignore:

.env
.env.local
.env.production

Verify Installation ​

4

Test Your Setup

Create a simple test file

typescript
// test.ts
import De from '@de./sdk'

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

const access = new De.Access({
  workspace: process.env.DE_WORKSPACE_ID!,
  accessToken: process.env.DE_ACCESS_TOKEN!
})

console.log('SDK initialized successfully!')

Run the test:

bash
npx tsx test.ts

React Native Installation ​

1

Create React Native Project

Initialize a new React Native project if needed

bash
npx react-native init MyDeliveryApp
cd MyDeliveryApp
2

Install De. React Native SDK

Add @de./sdk-rn to your project

bash
npm install @de./sdk-rn
bash
yarn add @de./sdk-rn
3

Install Native Dependencies

Link native modules for iOS and Android

bash
# iOS (requires CocoaPods)
cd ios && pod install && cd ..

# Android (auto-linked)
npx react-native run-android
4

Configure Permissions

Add required permissions for location and network access

iOS (ios/MyDeliveryApp/Info.plist):

xml
<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to provide delivery tracking</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>We need your location for background tracking</string>

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.INTERNET" />

Verify React Native Setup ​

5

Test React Native Integration

Create a test component

typescript
// App.tsx
import React from 'react'
import { View, Text } from 'react-native'
import De from '@de./sdk-rn'

export default function App() {
  React.useEffect(() => {
    console.log('De. SDK-RN Version:', De.version)
  }, [])

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>De. SDK initialized!</Text>
    </View>
  )
}

Development Environments ​

Local Development

Run on your local machine with hot reload and debugging

Staging Environment

Test in production-like environment before deploying

Production

Deploy to production with optimized builds and monitoring

Local Development Setup ​

1

Use Development API Endpoints

Point to development servers

typescript
// de.config.dev.ts
export default {
  workspace: process.env.DE_WORKSPACE_ID,
  apiUrl: 'https://dev-api.dedot.io',
  msiUrl: 'https://dev-map.dedot.io',
  environment: 'development',
  debug: true
}
2

Enable Debug Mode

Get detailed logs during development

typescript
import De from '@de./sdk'

De.setDebugMode(true)

// You'll now see detailed logs in console

Production Build Configuration ​

Build Optimization

For production builds, ensure you:

  • Minify and bundle your code
  • Remove debug statements
  • Use environment-specific configuration
  • Enable caching strategies

Webpack Configuration Example:

javascript
// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all'
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.DE_WORKSPACE_ID': JSON.stringify(process.env.DE_WORKSPACE_ID),
      'process.env.DE_API_URL': JSON.stringify('https://api.dedot.io')
    })
  ]
}

Vite Configuration Example:

typescript
// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    minify: 'terser',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          'de-sdk': ['@de./sdk']
        }
      }
    }
  },
  define: {
    'process.env.DE_WORKSPACE_ID': JSON.stringify(process.env.DE_WORKSPACE_ID)
  }
})

Framework Integration ​

Next.js ​

1

Install in Next.js

Add De. SDK to your Next.js project

bash
npm install @de./sdk
2

Configure for SSR

Use dynamic imports for client-side only components

typescript
// components/DeMap.tsx
'use client'

import dynamic from 'next/dynamic'

const DynamicMap = dynamic(() => import('./MapComponent'), {
  ssr: false,
  loading: () => <div>Loading map...</div>
})

export default function DeMap() {
  return <DynamicMap />
}

Nuxt.js ​

1

Install Plugin

Create a Nuxt plugin for De. SDK

typescript
// plugins/de-sdk.client.ts
import De from '@de./sdk'

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  
  const access = new De.Access({
    workspace: config.public.deWorkspace,
    accessToken: config.public.deAccessToken
  })

  return {
    provide: {
      de: De,
      deAccess: access
    }
  }
})

Vue 3 ​

1

Create Vue Plugin

Add De. SDK as a Vue plugin

typescript
// plugins/de.ts
import type { App } from 'vue'
import De from '@de./sdk'

export default {
  install(app: App) {
    app.config.globalProperties.$de = De
  }
}

Use in your app:

typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import DePlugin from './plugins/de'

createApp(App)
  .use(DePlugin)
  .mount('#app')

Troubleshooting ​

Common Issues

Module not found errors ​

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

TypeScript errors ​

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

Build errors ​

Check that your bundler supports ESM modules. Add to your config:

json
{
  "type": "module"
}

Getting Help ​

Documentation

Search our comprehensive docs

Learn more →

GitHub Issues

Report bugs and issues

Learn more →

Community Forum

Ask the community

Learn more →

Next Steps ​

Setup AuthenticationBuild Your First AppLearn Core Concepts
Installation Complete - What's Next?
SDK Installed
→
Authentication
→
Build App