Self-host JavaScript SDK in Your CDN

This guide walks you through the steps to self-host the RudderStack JavaScript SDK and also covers different scenarios based on your directory structure.

Prerequisites

For self-hosting the JavaScript SDK, following the below directory structure (as present in RudderStack’s CDN) to place your SDK and the associated files is recommended:

In this structure, there should be two directories - modern and legacy - under the base directory. Place the following files and folders within these directories:

• rsa.min.js and rsa.min.js.map: Core SDK file.
• js-integrations: Device mode destination SDKs are located in this directory.
• plugins: Plugins are located in this directory. Note that this is applicable only to the modern folder.

The SDK bundle in the modern directory is built for ES2015, while the legacy bundle is for ES5. Moreover, in the legacy version, all the plugins are bundled into the core SDK.

Setup

1. Download the JavaScript SDK and save it as rsa.min.js. Also, download the corresponding source map file, and save it as rsa.min.js.map. Place these files in the modern folder as shown above.
2. Download the required device mode destination SDK file along with the corresponding map file from the RudderStack CDN (https://cdn.rudderlabs.com/v3/modern/js-integrations). Place the below files in the js-integrations folder:

• <dest_name>.min.js
• <dest_name>.min.js.map

You can get the integration names from the JavaScript SDK repository.

3. Download the following plugin files along with the corresponding map files from the RudderStack CDN (https://cdn.rudderlabs.com/v3/modern/plugins). Place the below files in the plugins folder:

• rsa-plugins-remote-<plugin_name>.min.js
• rsa-plugins-remote-<plugin_name>.min.js.map
• rsa-plugins-<helper_name>.min.js
• rsa-plugins-<helper_name>.min.js.map

You can get the complete list of plugins from the JavaScript SDK repository. The helper plugin names are listed below:

• rsa-plugins-common.min.js
• rsa-plugins-legacyEncryptionUtils.min.js
• rsa-plugins-deviceModeDestinations.min.js
• rsa-plugins-RetryQueue.min.js

Note that you cannot access the parent folders directly. Add the above file names to the parent folder path to access the specific file.

For example:

• https://cdn.rudderlabs.com/v3/modern/js-integrations is inaccessible. However, https://cdn.rudderlabs.com/v3/modern/js-integrations/Amplitude.min.js is accessible.
• https://cdn.rudderlabs.com/v3/modern/plugins is inaccessible. However, https://cdn.rudderlabs.com/v3/modern/plugins/rsa-plugins-remote-BeaconQueue.min.js is accessible.

4. Download and host the rsa.plugins.js file along with its .map file from the below URLs - this is the index file for all the plugins listed above.

• https://cdn.rudderlabs.com/v3/modern/plugins/rsa-plugins.js
• https://cdn.rudderlabs.com/v3/modern/plugins/rsa-plugins.js.map

RudderStack recommends downloading and hosting all the destination SDKs, plugins, and source map files to help with troubleshooting.

5. Update sdkBaseUrl in the loading snippet to:

var sdkBaseUrl = "https://<subdomain>.<yourdomain>.com/<base-directory-path>";

6. If your JavaScript SDK file name is not rsa.min.js, then update sdkName in the loading snippet to:

var sdkName = "<custom-file-name>.min.js";

Load device mode destinations and plugins

If you’ve installed the SDK via CDN and have retained the recommended directory and file structure, the SDK automatically determines the location of the device mode destinations and plugins.

Otherwise, provide location of the destination SDKs via the destSDKBaseURL load API option:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  destSDKBaseURL: "https://<subdomain>.<yourdomain>.com/<integration-sdks-directory-path>"
});

Similarly, you can provide the location of the plugins via the pluginsSDKBaseURL load API option:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  pluginsSDKBaseURL: "https://<subdomain>.<yourdomain>.com/<plugins-directory-path>"
});

Make sure to replace the write keyThe write key (or source write key) is a unique identifier for your source. RudderStack uses this key to send events from a source to the specified destination. and data plane URLThe data plane URL is the location where events are routed and sent to the RudderStack backend for processing. You can find this URL in the home page of your RudderStack dashboard. with their actual values.

Questions? Contact us by email or on Slack