Self-host JavaScript SDK in Your CDN

RudderStack recommends serving the JavaScript SDK on your own domain over self-hosting it, especially to defend against the adblockers.

Self-hosting the SDK is only recommended in cases where you want to create a zero-gap architecture and ensure no data goes out to any external service.

This guide walks you through the steps for self-hosting the RudderStack JavaScript SDK.

Prerequisites

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

In this structure, there are two directories - modern and legacy - present in the base directory.

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

Place the files and folders listed in the below table within these directories:

Setup

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

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. Use the below links to download the required device mode destination SDK file with the corresponding source map file from the RudderStack CDN (https://cdn.rudderlabs.com/). Then, place the downloaded files in the js-integrations folder of the modern/legacy bundle, as applicable.

   • Device mode integrations for modern bundle
   • Device mode integrations for legacy bundle

3. (Only applicable for the modern bundle) Download the plugin files with the corresponding map files from the RudderStack CDN and place them in the plugins folder.

4. Update sdkBaseUrl in the loading snippet to:

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

5. 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 WRITE_KEY and DATA_PLANE_URL with their actual values.

Questions? Contact us by email or on Slack