Edit Updated on

How to Install JavaScript SDK

Installing SDK

Depending on the platform you're using, there are different ways for you to install the SDK.
Web Node.js React Native Electron Other

Web

The following method can be used if your project runs in browser, WebView, or other in-app HTML platforms.

Installing and Referencing SDK

npm

The easiest way to integrate our SDK into your project is to use npm:

$ npm install leancloud-storage --save

$ npm install leancloud-storage --save

$ npm install leancloud-realtime --save

$ npm install leancloud-realtime leancloud-realtime-plugin-typed-message leancloud-storage --save

Create references to the SDK with require:

const AV = require('leancloud-storage');
const { Query, User } = AV;

const AV = require('leancloud-storage/live-query');
const { Query, User } = AV;

const { Realtime, TextMessage } = require('leancloud-realtime');

const AV = require('leancloud-storage');
const { Realtime, TextMessage } = require('leancloud-realtime');
// For a list of all members exposed by Rich Media Message Plugin, refer to its API doc: https://leancloud.github.io/js-realtime-sdk/plugins/typed-messages/docs/module-leancloud-realtime-plugin-typed-messages.html
const { TypedMessagesPlugin, ImageMessage } = require('leancloud-realtime-plugin-typed-messages');

To avoid compatibility issues, the JavaScript SDK has been distributing ES5 code with all the polyfills (e.g. Promise) bundled. Since v5.0.0-rc.2, the JavaScript LeanMessage SDK also offers a version targeted to the latest version of ECMAScript, which has a smaller size and better runtime optimization for use in scenarios that only need compatibility with latest browsers. If your application uses @babel/preset-env or something similar, you can also use the latest ECMAScript version of LeanCloud SDK, and let Babel or other tools to compile your code to the specific ECMAScript version you need. Since the latest version of ECMAScript changes every year, and the goal of that version is to provide code that is aligned with the latest standards, introducing new features from newer versions of ECMAScript will not be considered as a breaking change. The current version of ECMAScript is 2020.

If you want to try out this version:

const { Realtime } = require('cleancloud-realtime/es-latest');

CDN

You can also import the SDK with a script tag:

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.6.0/dist/av-min.js"></script>

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.6.0/dist/av-live-query-min.js"></script>

<script src="//cdn.jsdelivr.net/npm/leancloud-realtime@5.0.0-rc.2/dist/im-browser.min.js"></script>

<!-- Rich Media Message depends on LeanStorage. -->
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.6.0/dist/av-min.js"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-realtime@5.0.0-rc.2/dist/im-browser.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-realtime-plugin-typed-messages"></script>
`

When using this method, you can reference the SDK with the global variable AV:

const { Query, User } = AV;

const { Query, User } = AV;

const { Realtime, TextMessage } = AV;

const { Realtime, TextMessage, TypedMessagesPlugin, ImageMessage } = AV;

If you want to try out the latest ECMAScript version of LeanMessage SDK:

<script src="//cdn.jsdelivr.net/npm/leancloud-realtime@5.0.0-rc.2/dist/es-latest/im.js"></script>

Node.js

JavaScript SDK also works with Node.js. If you plan to use LeanStorage within LeanEngine, you can import leanengine into your project by following instructions in LeanEngine Quick Start.

Installing and Referencing SDK

You can use npm to install and reference our SDK for Node.js as well. See npm for more details.

React Native

You can use npm to install and reference our SDK for React Native. React Native support is provided by a separate adapter library (@leancloud/platform-adapters-react-native).

Installing:

$ yarn add leancloud-storage @leancloud/platform-adapters-react-native @react-native-community/async-storage-backend-legacy@^2.0.0-rc.3
# for React Native 0.60+
$ npx pod-install
# for React Native <= 0.59 
# npx react-native link @react-native-community/async-storage-backend-legacy

$ yarn add leancloud-storage @leancloud/platform-adapters-react-native @react-native-community/async-storage-backend-legacy@^2.0.0-rc.3
# for React Native 0.60+
$ npx pod-install
# for React Native <= 0.59 
# npx react-native link @react-native-community/async-storage-backend-legacy

yarn add leancloud-realtime @leancloud/platform-adapters-react-native

$ yarn add leancloud-realtime leancloud-realtime-plugin-typed-message leancloud-storage @leancloud/platform-adapters-react-native @react-native-community/async-storage-backend-legacy@^2.0.0-rc.3
# for React Native 0.60+
$ npx pod-install
# for React Native <= 0.59 
# npx react-native link @react-native-community/async-storage-backend-legacy

Referencing:

import AV from 'leancloud-storage/core';
import * as adapters from '@leancloud/platform-adapters-react-native';
AV.setAdapters(adapters);

import AV from 'leancloud-storage/live-query-core';
import * as adapters from '@leancloud/platform-adapters-react-native';
AV.setAdapters(adapters);

import { Realtime, setAdapters } from 'leancloud-realtime/im';
import * as adapters from '@leancloud/platform-adapters-react-native';
setAdapters(adapters);

import AV from 'leancloud-storage/core';
import { Realtime, setAdapters } from 'leancloud-realtime/im';
import { TypedMessagesPlugin, ImageMessage } from 'leancloud-realtime-plugin-typed-messages';
import * as adapters from '@leancloud/platform-adapters-react-native';
AV.setAdapters(adapters);
setAdapters(adapters);

Electron

Electron uses npm for managing dependencies. You can install our SDK with the following command:

$ npm install leancloud-storage --save

$ npm install leancloud-storage --save

$ npm install leancloud-realtime --save

$ npm install leancloud-realtime leancloud-realtime-plugin-typed-message leancloud-storage --save

Importing SDK as Browser Scripts

You can import the SDK by adding a script tag into index.html:

<script src="./node_modules/leancloud-storage/dist/av-min.js"></script>

<script src="./node_modules/leancloud-storage/dist/av-live-query-min.js"></script>

<script src="./node_modules/leancloud-realtime/dist/im-browser.min.js"></script>

<script src="./node_modules/leancloud-storage/dist/av-min.js"></script>
<script src="./node_modules/leancloud-realtime/dist/im-browser.min.js"></script>
<script src="./node_modules/leancloud-realtime-plugin-typed-messages/dist/typed-messages.js"></script>

Importing SDK as Node.js Modules

The way of using script to import the SDK works in most scenarios. However, if you have the following needs, you can also use require('leancloud-storage') to import the SDK as Node.js modules:

  • Using the SDK in the main process
  • Constructing AV.File with Buffer or Stream provided by Node.js

require and script import two different sets of SDK. Each of them needs to be initialized separately and cannot be used interchangeably.

Other

The JavaScript SDK provides platform-independent versions to support other platforms. All platform-related APIs are abstracted into configurable adapters, which need to be configured for the target platform after introducing the SDK core. Assuming there is an adapter package (platform-adapters-xyz) for a platform (xyz) on npm, you can configure the JavaScript SDK as follows:

const AV = require('leancloud-storage/core');
const adapters = require('platform-adapters-xyz');
AV.setAdapters(adapters);

const AV = require('leancloud-storage/live-query-core');
const adapters = require('platform-adapters-xyz');
AV.setAdapters(adapters);

const { Realtime, setAdapters } = require('leancloud-realtime/im');
const adapters = require('platform-adapters-xyz');
setAdapters(adapters);

const AV = require('leancloud-storage/core');
const { Realtime, setAdapters } = require('leancloud-realtime/im');
const { TypedMessagesPlugin, ImageMessage } = require('leancloud-realtime-plugin-typed-messages');
const adapters = require('platform-adapters-xyz');
AV.setAdapters(adapters);
setAdapters(adapters);

Precompiled UMD files are also available, in case you cannot or do not want to use npm:

https://cdn.jsdelivr.net/npm/leancloud-storage@4.6.0/dist/av-core-min.js

https://cdn.jsdelivr.net/npm/leancloud-storage@4.6.0/dist/av-live-query-core-min.js

https://cdn.jsdelivr.net/npm/leancloud-realtime@5.0.0-rc.2/dist/im.min.js

not supported

You can implement your own adapter for a target platform. Interface definitions for adapters can be found in the @leancloud/adapter-types package. You can also search for adapters contributed by other developers with the keyword platform-adapters.

Initializing Your Project

To begin with, get your App ID and App Key from your app's Dashboard > Settings > App Keys.

AV.init({
  appId: "{{appid}}",
  appKey: "{{appkey}}"
});

AV.init({
  appId: "{{appid}}",
  appKey: "{{appkey}}"
});

const realtime = new Realtime({
  appId: '{{appid}}',
  appKey: '{{appkey}}',
});

const realtime = new Realtime({
  appId: '{{appid}}',
  appKey: '{{appkey}}',
  // Register plugins for rich media messages
  plugins: [TypedMessagesPlugin],
});
// You need to initialize LeanStorage, too.
AV.init({
  appId: "{{appid}}",
  appKey: "{{appkey}}"
});

Enabling Debug Logs

You can easily trace the problems in your project by turning debug logs on during the development phase. Once enabled, details of every request made by the SDK along with errors will be output to IDE, browser console, or your app's Dashboard > LeanEngine > App logs.

const AV = require('leancloud-storage');
AV.debug.enable();
AV.debug.disable();

const AV = require('leancloud-storage');
AV.debug.enable();
AV.debug.disable();

const { debug } = require('leancloud-realtime');
debug.enable();
debug.disable();

const { debug } = require('leancloud-realtime');
debug.enable();
debug.disable();

Alternatively, you can enable debug logs via configuring localStorage (for browsers) or DEBUG environment variable (for Node.js applications).

For browsers:

localStorage.setItem('debug', 'leancloud*');

localStorage.setItem('debug', 'leancloud*,LC*');

localStorage.setItem('debug', 'LC*');

localStorage.setItem('debug', 'LC*');

For Node.js applications:

DEBUG=leancloud* npm start

DEBUG=leancloud*,LC* npm start

DEBUG=LC* npm start

DEBUG=LC* npm start

Make sure debug logs are turned off before your app is published. Failure to do so may lead to the exposure of sensitive data.

Verifying

First of all, make sure you are able to connect to LeanCloud server. You can test it by running the following command:

ping "{{domain}}"

If everything goes well, you will see the following response:

PING api-ucloud.leancloud.cn (123.59.41.31): 56 data bytes
64 bytes from 123.59.41.31: icmp_seq=0 ttl=51 time=9.032 ms
64 bytes from 123.59.41.31: icmp_seq=1 ttl=51 time=7.290 ms
64 bytes from 123.59.41.31: icmp_seq=2 ttl=51 time=8.131 ms
64 bytes from 123.59.41.31: icmp_seq=3 ttl=51 time=9.689 ms
64 bytes from 123.59.41.31: icmp_seq=4 ttl=51 time=6.559 ms
64 bytes from 123.59.41.31: icmp_seq=5 ttl=51 time=8.665 ms
64 bytes from 123.59.41.31: icmp_seq=6 ttl=51 time=8.041 ms
64 bytes from 123.59.41.31: icmp_seq=7 ttl=51 time=8.203 ms
64 bytes from 123.59.41.31: icmp_seq=8 ttl=51 time=6.288 ms
64 bytes from 123.59.41.31: icmp_seq=9 ttl=51 time=7.938 ms

--- api-ucloud.leancloud.cn ping statistics ---
10 packets transmitted, 10 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 6.288/7.984/9.689/0.997 ms

Then add the following code into your project:

const TestObject = AV.Object.extend('TestObject');
const testObject = new TestObject();
testObject.set('words', 'Hello world!');
testObject.save().then((testObject) => {
  console.log('Object saved.')
})

Save the file and run it.

Then go to your app's Dashboard > LeanStorage > Data > TestObject. If you see the following content, it means that you have correctly installed the SDK.

A row shows up in the table with "words" to be "Hello world!".

See Debugging if you're not seeing the content.

Debugging

This guide is written for the latest version of our SDK. If you encounter any error, please first make sure you have the latest version installed.

401 Unauthorized

If you get a 401 error or see the following content in network logs:

{
  "code": 401,
  "error": "Unauthorized."
}

It means that the App ID or App Key might be incorrect or don't match. If you have multiple apps, you might have used the App ID of one app with the App Key of another one, which will lead to such error.

Client Cannot Access the Internet

Make sure you have granted enough permissions for your mobile app.

{{allComment[version]}} ×
  • No comments yet.
  • {{comment.author}}
    {{ comment.createdAt | date: 'yyyy-MM-dd HH:mm:ss '}}
    {{comment.content}}
Please to leave your comments.