diff --git a/front/src/api/index.js b/front/src/api/index.js
index 1d7949e9..ba15ada6 100644
--- a/front/src/api/index.js
+++ b/front/src/api/index.js
@@ -1,6 +1,7 @@
 import axios from "axios";
+import { SCRIPT_NAME } from '../scriptname.js';
 
-axios.defaults.baseURL = "/api";
+axios.defaults.baseURL = SCRIPT_NAME +  '/api'
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 axios.defaults.withCredentials = true;
diff --git a/front/src/documentstasks/api.js b/front/src/documentstasks/api.js
index f61e5d9e..53de89d8 100644
--- a/front/src/documentstasks/api.js
+++ b/front/src/documentstasks/api.js
@@ -1,6 +1,7 @@
 import axios from "axios";
+import { SCRIPT_NAME } from '../scriptname.js';
 
-axios.defaults.baseURL = "/api";
+axios.defaults.baseURL = SCRIPT_NAME +  '/api'
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 axios.defaults.withCredentials = true;
diff --git a/front/src/editor/api.js b/front/src/editor/api.js
index 57903750..5ad3c00c 100644
--- a/front/src/editor/api.js
+++ b/front/src/editor/api.js
@@ -1,6 +1,7 @@
 import axios from "axios";
+import { SCRIPT_NAME } from '../scriptname.js';
 
-axios.defaults.baseURL = "/api";
+axios.defaults.baseURL = SCRIPT_NAME + '/api'
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 axios.defaults.withCredentials = true;
diff --git a/front/src/image_cards.js b/front/src/image_cards.js
index f41bac6e..e4b1fa6d 100644
--- a/front/src/image_cards.js
+++ b/front/src/image_cards.js
@@ -7,6 +7,8 @@ Dropzone.autoDiscover = false;
 var g_dragged = null; // Note: chrome doesn't understand dataTransfer very well
 var lastSelected = null;
 
+import { SCRIPT_NAME } from './scriptname.js';
+
 function openWizard(proc) {
     var selected_num = partCard.getSelectedPks().length;
 
@@ -115,7 +117,7 @@ class partCard {
         this.progressBar.css("width", this.progress + "%");
         this.progressBar.text(this.progress + "%");
         this.updateWorkflowIcons();
-        var url = "/document/" + DOCUMENT_ID + "/part/" + this.pk + "/edit/";
+        var url = SCRIPT_NAME + "/document/" + DOCUMENT_ID + "/part/" + this.pk + "/edit/";
 
         // show avg confidence on the card
         var avgConfidenceElement = this.progressBar;
@@ -486,9 +488,9 @@ export function bootImageCards(
 ) {
     DOCUMENT_ID = documentId;
     API = {
-        document: "/api/documents/" + DOCUMENT_ID,
-        parts: "/api/documents/" + DOCUMENT_ID + "/parts/",
-        part: "/api/documents/" + DOCUMENT_ID + "/parts/{part_pk}/",
+        document: SCRIPT_NAME + "/api/documents/" + DOCUMENT_ID,
+        parts: SCRIPT_NAME + "/api/documents/" + DOCUMENT_ID + "/parts/",
+        part: SCRIPT_NAME + "/api/documents/" + DOCUMENT_ID + "/parts/{part_pk}/",
     };
     //************* Card ordering *************
     $("#cards-container").on("dragover", ".js-drop", function (ev) {
diff --git a/front/src/messages.js b/front/src/messages.js
index c27ed886..468acbd8 100644
--- a/front/src/messages.js
+++ b/front/src/messages.js
@@ -1,5 +1,7 @@
 export var msgSocket;
 
+import { SCRIPT_NAME } from './scriptname.js';
+
 var alerts = {};
 export class Alert {
     constructor(id, message, level, links) {
@@ -61,7 +63,7 @@ export class Alert {
 export function bootWebsocket() {
     let scheme = location.protocol === "https:" ? "wss:" : "ws:";
     msgSocket = new ReconnectingWebSocket(
-        scheme + "//" + window.location.host + "/ws/notif/",
+        scheme + "//" + window.location.host + SCRIPT_NAME + "/ws/notif/",
     );
     msgSocket.maxReconnectAttempts = 3;
 
diff --git a/front/src/ontology_form.js b/front/src/ontology_form.js
index be6f28b0..3acdd285 100644
--- a/front/src/ontology_form.js
+++ b/front/src/ontology_form.js
@@ -1,9 +1,11 @@
 "use strict";
 
+import { SCRIPT_NAME } from './scriptname.js';
+
 export function bootOntologyForm() {
     /*** Region/Line types ***/
     function pushType(type, name) {
-        let uri = "/api/types/" + type + "/";
+        let uri = SCRIPT_NAME + "/api/types/" + type + "/";
         return fetch(uri, {
             method: "post",
             credentials: "same-origin",
diff --git a/front/src/scriptname.js b/front/src/scriptname.js
new file mode 100644
index 00000000..c9ac46a7
--- /dev/null
+++ b/front/src/scriptname.js
@@ -0,0 +1,7 @@
+function scriptName() {
+    let prefix = document.currentScript.src.split('/').slice(3, -2).join('/');
+    return (prefix.length > 0 ? "/" + prefix : "");
+}
+
+//export const SCRIPT_NAME = scriptName();
+export const SCRIPT_NAME = '/escriptorium2';
diff --git a/front/src/stories/DocumentDashboard.stories.js b/front/src/stories/DocumentDashboard.stories.js
index dda07929..bee1d44d 100644
--- a/front/src/stories/DocumentDashboard.stories.js
+++ b/front/src/stories/DocumentDashboard.stories.js
@@ -1,6 +1,7 @@
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { Server } from "mock-socket";
+import { SCRIPT_NAME } from '../scriptname.js';
 import DocumentDashboard from "../../vue/pages/Document/Document.vue";
 import GlobalNavigation from "../../vue/components/GlobalNavigation/GlobalNavigation.vue";
 import {
@@ -30,7 +31,7 @@ export default {
         // mock dropzone image upload api endpoint
         mockData: [
             {
-                url: "/api/documents/1/parts",
+                url: SCRIPT_NAME + "/api/documents/1/parts",
                 method: "POST",
                 status: 201,
             },
@@ -146,7 +147,7 @@ const Template = (args, { argTypes }) => ({
     setup() {
         // setup websocket mocks for tasks
         const scheme = location.protocol === "https:" ? "wss:" : "ws:";
-        const mockSocketURL = `${scheme}//${window.location.host}/ws/notif/`;
+        const mockSocketURL = `${scheme}//${window.location.host}${SCRIPT_NAME}/ws/notif/`;
         // wrap in try/catch in case reloaded with mock socket still open
         try {
             const mockServer = new Server(mockSocketURL);
diff --git a/front/vue/components/GlobalNavigation/GlobalNavigation.vue b/front/vue/components/GlobalNavigation/GlobalNavigation.vue
index 88040139..5e71c674 100644
--- a/front/vue/components/GlobalNavigation/GlobalNavigation.vue
+++ b/front/vue/components/GlobalNavigation/GlobalNavigation.vue
@@ -2,7 +2,7 @@
     <nav class="escr-global-nav">
         <div class="escr-upper-navgroup">
             <a
-                href="/"
+                :href="baseUrl + '/'"
                 aria-label="eScriptorium"
             >
                 <EscrLogo />
@@ -15,7 +15,7 @@
             >
                 <button
                     v-if="isAuthenticated && !searchDisabled"
-                    href="/search/"
+                    :href="baseUrl + '/search/'"
                     aria-label="global search"
                     class="escr-global-search"
                     :class="{
@@ -32,12 +32,12 @@
                 <template #popper>
                     <ul class="escr-vertical-menu escr-tasks-menu">
                         <li>
-                            <a href="/search/">
+                            <a :href="baseUrl + '/search/'">
                                 <span>Search</span>
                             </a>
                         </li>
                         <li>
-                            <a href="/find-replace/">
+                            <a :href="baseUrl + '/find-replace/'">
                                 <span>Find and Replace</span>
                             </a>
                         </li>
@@ -46,7 +46,7 @@
             </VMenu>
             <a
                 v-if="isAuthenticated"
-                href="/projects/"
+                :href="baseUrl + '/projects/'"
                 aria-label="projects list"
                 :class="{
                     'escr-globalnav-icon': true,
@@ -58,7 +58,7 @@
             </a>
             <a
                 v-if="isAuthenticated"
-                href="/models/"
+                :href="baseUrl + '/models/'"
                 aria-label="models list"
                 :class="{
                     'escr-globalnav-icon': true,
@@ -90,12 +90,12 @@
                 <template #popper>
                     <ul class="escr-vertical-menu escr-tasks-menu">
                         <li>
-                            <a href="/documents/tasks/">
+                            <a :href="baseUrl + '/documents/tasks/'">
                                 <span>Task Monitoring</span>
                             </a>
                         </li>
                         <li>
-                            <a href="/quotas/">
+                            <a :href="baseUrl + '/quotas/'">
                                 <span>Task Usage</span>
                             </a>
                         </li>
@@ -126,17 +126,17 @@
                 <template #popper>
                     <ul class="escr-vertical-menu">
                         <li>
-                            <a href="/profile/">
+                            <a :href="baseUrl + '/profile/'">
                                 <span>Profile Settings</span>
                             </a>
                         </li>
                         <li>
-                            <a href="/password_change/">
+                            <a :href="baseUrl + '/password_change/'">
                                 <span>Change Password</span>
                             </a>
                         </li>
                         <li v-if="canInvite">
-                            <a href="/invite/">
+                            <a :href="baseUrl + '/invite/'">
                                 <span>Invite Users</span>
                             </a>
                         </li>
@@ -144,17 +144,17 @@
                             v-if="isStaff"
                             class="new-section"
                         >
-                            <a href="/quotas/instance/">
+                            <a :href="baseUrl + '/quotas/instance/'">
                                 <span>Leaderboard</span>
                             </a>
                         </li>
                         <li v-if="isStaff">
-                            <a href="/admin/">
+                            <a :href="baseUrl + '/admin/'">
                                 <span>Site Administration</span>
                             </a>
                         </li>
                         <li class="new-section">
-                            <a href="/logout/">
+                            <a :href="baseUrl + '/logout/'">
                                 <span>Logout</span>
                             </a>
                         </li>
@@ -163,7 +163,7 @@
             </VMenu>
             <a
                 v-else
-                href="/login"
+                :href="baseUrl + '/login'"
                 aria-label="sign in"
                 class="escr-globalnav-icon"
             >
@@ -199,6 +199,7 @@ import TasksIcon from "../Icons/TasksIcon/TasksIcon.vue";
 import "../VerticalMenu/VerticalMenu.css";
 import "./GlobalNavigation.css";
 import { mapActions, mapState } from "vuex";
+import { SCRIPT_NAME } from '../../../src/scriptname.js';
 
 export default {
     name: "EscrGlobalNavigation",
@@ -233,6 +234,9 @@ export default {
             canInvite: (state) => state.user.canInvite,
             isStaff: (state) => state.user.isStaff,
         }),
+        baseUrl() {
+            return SCRIPT_NAME || '/';
+        },
         location() {
             // helper to access window object from within template
             return window.location;
diff --git a/front/vue/components/ImportModal/ImportImagesForm.vue b/front/vue/components/ImportModal/ImportImagesForm.vue
index d85746e0..3431871e 100644
--- a/front/vue/components/ImportModal/ImportImagesForm.vue
+++ b/front/vue/components/ImportModal/ImportImagesForm.vue
@@ -31,6 +31,7 @@ import { mapActions, mapState } from "vuex";
 import UploadIcon from "../Icons/UploadIcon/UploadIcon.vue";
 import ImageDropzone from "vue2-dropzone";
 import "vue2-dropzone/dist/vue2Dropzone.min.css";
+import { SCRIPT_NAME } from '../../../src/scriptname.js';
 
 export default {
     name: "EscrImportImagesForm",
@@ -62,7 +63,7 @@ export default {
          * Use the document ID from vuex store state to get the parts upload URL.
          */
         imageUploadURL() {
-            return `/api/documents/${this.documentId}/parts/`;
+            return SCRIPT_NAME + `/api/documents/${this.documentId}/parts/`;
         },
         getCsrfToken() {
             return document.cookie.match("(^|;)\\s*" + "csrftoken" + "\\s*=\\s*([^;]+)")?.pop()
diff --git a/front/vue/components/ModelsPanel/ModelsPanel.vue b/front/vue/components/ModelsPanel/ModelsPanel.vue
index d26fd7c7..5a146b78 100644
--- a/front/vue/components/ModelsPanel/ModelsPanel.vue
+++ b/front/vue/components/ModelsPanel/ModelsPanel.vue
@@ -36,7 +36,7 @@
                 <dd>{{ model.rights }}</dd>
                 <dt>Sharing</dt>
                 <dd v-if="model.can_share">
-                    <a :href="`/model/${model.pk}/rights/`">Share</a>
+                    <a :href="SCRIPT_NAME + `/model/${model.pk}/rights/`">Share</a>
                 </dd>
                 <dd v-else>
                     -
diff --git a/front/vue/pages/Document/Document.vue b/front/vue/pages/Document/Document.vue
index 4224bc02..588bda6e 100644
--- a/front/vue/pages/Document/Document.vue
+++ b/front/vue/pages/Document/Document.vue
@@ -345,6 +345,7 @@ import OntologyCard from "../../components/OntologyCard/OntologyCard.vue";
 import PencilIcon from "../../components/Icons/PencilIcon/PencilIcon.vue";
 import PeopleIcon from "../../components/Icons/PeopleIcon/PeopleIcon.vue";
 import QuickActionsPanel from "../../components/QuickActionsPanel/QuickActionsPanel.vue";
+import { SCRIPT_NAME } from "../../../src/scriptname.js";
 import SearchIcon from "../../components/Icons/SearchIcon/SearchIcon.vue";
 import SearchPanel from "../../components/SearchPanel/SearchPanel.vue";
 import SegmentModal from "../../components/SegmentModal/SegmentModal.vue";
@@ -484,13 +485,13 @@ export default {
                 docBreadcrumbs = [
                     {
                         title: this.projectName,
-                        href: `/project/${this.projectSlug}`
+                        href: SCRIPT_NAME + `/project/${this.projectSlug}`
                     },
                     { title: this.documentName }
                 ];
             }
             return [
-                { title: "My Projects", href: "/projects" },
+                { title: "My Projects", href: SCRIPT_NAME + "/projects" },
                 ...docBreadcrumbs,
             ];
         },
@@ -606,7 +607,7 @@ export default {
         // join document websocket room
         const msg = `{"type": "join-room", "object_cls": "document", "object_pk": ${this.id}}`;
         const scheme = location.protocol === "https:" ? "wss:" : "ws:";
-        const msgSocket = new ReconnectingWebSocket(`${scheme}//${window.location.host}/ws/notif/`);
+	    const msgSocket = new ReconnectingWebSocket(`${scheme}//${window.location.host}${SCRIPT_NAME}/ws/notif/`);
         msgSocket.maxReconnectAttempts = 3;
         msgSocket.addEventListener("open", function() {
             msgSocket.send(msg);
@@ -663,13 +664,13 @@ export default {
         }),
         navigateToImages() {
             if (this.id) {
-                window.location = `/document/${this.id}/images`;
+                window.location = SCRIPT_NAME + `/document/${this.id}/images`;
             } else {
                 this.addError({ message: "Error navigating to the images page." });
             }
         },
         navigateToTasks() {
-            window.location = "/quotas/";
+            window.location = SCRIPT_NAME + "/quotas/";
         },
         selectTranscription(e) {
             this.changeSelectedTranscription(parseInt(e.target.value, 10));
diff --git a/front/vue/pages/Page/Page.vue b/front/vue/pages/Page/Page.vue
index 23ab3d99..61dfe716 100644
--- a/front/vue/pages/Page/Page.vue
+++ b/front/vue/pages/Page/Page.vue
@@ -21,6 +21,7 @@ import { mapActions } from "vuex";
 import Alerts from "../../components/Toast/ToastGroup.vue";
 import EscrBreadcrumbs from "../../components/Breadcrumbs/Breadcrumbs.vue";
 import EscrSidebar from "../../components/Sidebar/Sidebar.vue";
+import { SCRIPT_NAME } from "../../../src/scriptname.js";
 
 export default {
     name: "EscrPage",
@@ -62,7 +63,7 @@ export default {
     created() {
         // intercept all websocket messages
         const scheme = location.protocol === "https:" ? "wss:" : "ws:";
-        const msgSocket = new ReconnectingWebSocket(`${scheme}//${window.location.host}/ws/notif/`);
+	    const msgSocket = new ReconnectingWebSocket(`${scheme}//${window.location.host}${SCRIPT_NAME}/ws/notif/`);
         msgSocket.maxReconnectAttempts = 3;
         msgSocket.addEventListener("message", this.websocketListener);
     },
diff --git a/front/vue/pages/Project/Project.vue b/front/vue/pages/Project/Project.vue
index 84678a20..415201f7 100644
--- a/front/vue/pages/Project/Project.vue
+++ b/front/vue/pages/Project/Project.vue
@@ -178,6 +178,7 @@ import ImagesIcon from "../../components/Icons/ImagesIcon/ImagesIcon.vue";
 import PencilIcon from "../../components/Icons/PencilIcon/PencilIcon.vue";
 import PeopleIcon from "../../components/Icons/PeopleIcon/PeopleIcon.vue";
 import PlusIcon from "../../components/Icons/PlusIcon/PlusIcon.vue";
+import { SCRIPT_NAME } from '../../../src/scriptname.js';
 import SearchIcon from "../../components/Icons/SearchIcon/SearchIcon.vue";
 import SearchPanel from "../../components/SearchPanel/SearchPanel.vue";
 import ShareModal from "../../components/SharePanel/ShareModal.vue";
@@ -257,7 +258,7 @@ export default {
          */
         breadcrumbs() {
             return [
-                { title: "My Projects", href: "/projects" },
+                { title: "My Projects", href: SCRIPT_NAME + "/projects" },
                 { title: this.projectName || "Loading..." }
             ];
         },
@@ -395,7 +396,7 @@ export default {
         },
         navigateToImages(item) {
             if (item?.pk) {
-                window.location = `/document/${item.pk}/images`;
+                window.location = SCRIPT_NAME + `/document/${item.pk}/images`;
             } else {
                 this.addError({ message: "Error navigating to the images page." });
             }
diff --git a/front/vue/store/modules/document.js b/front/vue/store/modules/document.js
index 833a9e2f..e2492bb7 100644
--- a/front/vue/store/modules/document.js
+++ b/front/vue/store/modules/document.js
@@ -19,6 +19,7 @@ import { tagColorToVariant } from "../util/color";
 import { getMetadataCRUD } from "../util/metadata";
 import forms from "../util/initialFormState";
 import { throttle } from "../util/throttle";
+import { SCRIPT_NAME } from '../../../src/scriptname.js';
 
 // initial state
 const state = () => ({
@@ -311,7 +312,7 @@ const actions = {
             );
             commit("setDeleteModalOpen", false);
             // redirect to project on delete
-            window.location = `/project/${state.projectSlug}`;
+            window.location = SCRIPT_NAME + `/project/${state.projectSlug}`;
         } catch (error) {
             dispatch("alerts/addError", error, { root: true });
         }
@@ -554,7 +555,7 @@ const actions = {
                     ...part,
                     title: `${part.title} - ${part.filename}`,
                     thumbnail: part.image?.thumbnails?.card,
-                    href: `/document/${state.id}/part/${part.pk}/edit/`,
+                    href: SCRIPT_NAME + `/document/${state.id}/part/${part.pk}/edit/`,
                 })),
             );
         } else {
diff --git a/front/vue/store/modules/project.js b/front/vue/store/modules/project.js
index b7406fda..8b00f2ad 100644
--- a/front/vue/store/modules/project.js
+++ b/front/vue/store/modules/project.js
@@ -1,3 +1,4 @@
+import { SCRIPT_NAME } from '../../../src/scriptname.js';
 import axios from "axios";
 import {
     createDocument,
@@ -184,7 +185,7 @@ const actions = {
                     { root: true },
                 );
                 // redirect to new document
-                window.location = `/document/${data.pk}/`;
+                window.location = SCRIPT_NAME + `/document/${data.pk}/`;
                 commit("setCreateDocumentModalOpen", false);
             } else {
                 commit("setLoading", false);
@@ -274,7 +275,7 @@ const actions = {
                 { root: true },
             );
             commit("setDeleteModalOpen", false);
-            window.location = "/projects/";
+            window.location = SCRIPT_NAME + "/projects/";
         } catch (error) {
             dispatch("alerts/addError", error, { root: true });
         }
@@ -294,7 +295,7 @@ const actions = {
                         ...document,
                         tags: { tags: document.tags },
                         // link to document dashboard
-                        href: `/document/${document.pk}/`,
+                        href: SCRIPT_NAME + `/document/${document.pk}/`,
                     });
                 });
                 commit("setNextPage", data.next);
@@ -372,7 +373,7 @@ const actions = {
                     ...result,
                     tags: { tags: result.tags },
                     // link to document dashboard
-                    href: `/document/${result.pk}/`,
+                    href: SCRIPT_NAME + `/document/${result.pk}/`,
                 })),
             );
         } else {
diff --git a/front/vue/store/modules/projects.js b/front/vue/store/modules/projects.js
index b19c04e9..1a7fb035 100644
--- a/front/vue/store/modules/projects.js
+++ b/front/vue/store/modules/projects.js
@@ -1,3 +1,4 @@
+import { SCRIPT_NAME } from '../../../src/scriptname.js';
 import axios from "axios";
 import {
     createProject,
@@ -86,7 +87,7 @@ const actions = {
                 );
                 commit("setCreateModalOpen", false);
                 // redirect to project dashboard
-                window.location = `/project/${data.slug}`;
+                window.location = SCRIPT_NAME + `/project/${data.slug}`;
             } else {
                 commit("setLoading", false);
                 throw new Error("Unable to create project");
@@ -192,7 +193,7 @@ const actions = {
                     ...result,
                     tags: { tags: result.tags },
                     // link to project dashboard
-                    href: `/project/${result.slug}/`,
+                    href: SCRIPT_NAME + `/project/${result.slug}/`,
                 })),
             );
             commit("setNextPage", data.next);
@@ -216,7 +217,7 @@ const actions = {
                         ...result,
                         tags: { tags: result.tags },
                         // link to project dashboard
-                        href: `/project/${result.slug}/`,
+                        href: SCRIPT_NAME + `/project/${result.slug}/`,
                     });
                 });
                 commit("setNextPage", data.next);
diff --git a/front/webpack.common.js b/front/webpack.common.js
index e4f2200e..54664db6 100644
--- a/front/webpack.common.js
+++ b/front/webpack.common.js
@@ -21,6 +21,8 @@ module.exports = {
         filename: "[name].js",
         path: path.resolve(__dirname, "./dist/"),
         publicPath: "",
+        sourcePrefix: "/sourcePrefix/",
+        workerPublicPath: "/workerPublicPath/",
     },
 
     plugins: [