VitalSource assignments in the LMS are different than other assignment types because the document is being displayed in a reader maintained by a third-party (VitalSource) rather than Via. This third-party reader always tries to load the production version of Hypothesis, whereas when Via is used to deliver a document, your local instance of Via will use your local Hypothesis client. A workaround for this issue to enable local testing is to redirect the request for the client's boot script to point to your local client, and modify the local client to ignore parts of the Hypothesis configuration in the page where the client's boot script is loaded.
The approach documented here can also be used in other situations where you want to subtitute the production Hypothesis client with the local one, in a page or web application where we can't modify the script tag that loads the client.
- Configure your browser to redirect requests for the client's boot script at https://hypothes.is/embed.js to http://localhost:5000/embed.js. In Chrome this can be done using the Redirector extension (GitHub project). When configuring the extension, make sure that the redirect is configured to apply to scripts rather than the main HTML document (which is the default).
- Apply the diff below to the client, so that it loads the client's own assets from your dev environment, and communicates with the local lms installation.
diff --git a/src/boot/url-template.js b/src/boot/url-template.js
index 67402c63a..70d22990f 100644
--- a/src/boot/url-template.js
+++ b/src/boot/url-template.js
@@ -44,7 +44,9 @@ export function processUrlTemplate(url, document_ = document) {
return url;
}
- const origin = currentScriptOrigin(document_);
+ // Force assets to be loaded from localhost, rather than the domain that the
+ // boot script's `<script>` tag referenced.
+ const origin = { hostname: 'localhost', protocol: 'http' };
if (origin) {
url = url.replace('{current_host}', origin.hostname);
diff --git a/src/sidebar/config/host-config.js b/src/sidebar/config/host-config.js
index 27f7d271c..fdb0ce7bc 100644
--- a/src/sidebar/config/host-config.js
+++ b/src/sidebar/config/host-config.js
@@ -94,7 +94,9 @@ export function hostPageConfig(window) {
toObject(value)
);
return {
- origin: toString(objectVal.origin),
+ // Force client to talk to the local LMS app installation, rather than
+ // the one configured by `requestConfigFromFrame`.
+ origin: 'http://localhost:8001',
ancestorLevel: toInteger(objectVal.ancestorLevel),
};
},- Now try loading a VitalSource assignment with devtools open. You should see that the request for https://hypothes.is/embed.js gets redirected to http://localhost:5000/embed.js. On the page where this request originated, the various client asset URLs and links in the document's
<head>should be loaded from the client's dev server on http://localhost:3001.