Serving from a base URL including a non-empty path (#166)

Author: mvanbrab

.gitignore

@@ -29,3 +29,4 @@ lintPush.sh
 
 test/cypress/screenshots
 test/cypress/downloads
+test/serve-this

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Works when served from any base URL including a path (e.g. `https://www.example.com/your/preferred/path`) (#165).
+
 ## [1.4.0] - 2024-10-02
 
 ### Added

README.md

@@ -99,6 +99,8 @@ npm run build
 
 The static build appears in directory `main/dist`.
 
+This static build can be served on a webserver without modifications from the host's root path (e.g. `https://www.example.com`), or from any other path (e.g. `https://www.example.com/your/preferred/path`).
+
 ## Logging in
 
 Some queries access data sources that are only readable by authenticated users. This requires you to log in.
@@ -359,6 +361,8 @@ For testing with the provided configuration file, we use [Cypress](https://www.c
 
 The development version might be tested repeatedly during development.
 
+Both the production version and the development version are tested from a non-empty path in the base URL.
+
 ### Testing the production version
 
 1. Build the production version of the Web application and serve it:
@@ -400,10 +404,10 @@ The development version might be tested repeatedly during development.
 
 The procedure is the same as for testing the production version, except for step 1, which is now:
 
-1. Start the Web application in development mode:
+1. Start the Web application in development mode, using a non-empty path in the base URL:
 
    In directory `main`:
 
    ```bash
-   npm run dev
+   npm run dev-with-path
    ```

main/package.json

@@ -10,7 +10,8 @@
     "lint:fix": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix",
     "lint:markdown": "markdownlint-cli2",
     "lint:markdown:fix": "markdownlint-cli2-fix",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "dev-with-path": "vite --base /random/path"
   },
   "dependencies": {
     "@comunica/query-sparql": "^3.2.3",

main/src/authenticationProvider/authenticationProvider.js

@@ -34,7 +34,8 @@ export default {
     try {
       await session.login({
         oidcIssuer: idp,
-        redirectUrl: new URL("/", window.location.href).toString(),
+        // leading dot needed to run from any path
+        redirectUrl: new URL('.', window.location.href).toString(),
         clientName: "Generic Data Viewer",
       });
     } catch (error) {

main/vite.config.js

@@ -9,4 +9,6 @@ export default defineConfig({
     // necessary for crypto lib to work
     global: 'globalThis'
   },
+  // leading dot needed to run from any path
+  base: './'
 })

test/cypress.config.js

@@ -5,7 +5,7 @@ export default defineConfig({
     experimentalStudio: true,
     experimentalRunAllSpecs: true,
     defaultCommandTimeout: 10000, /* is OK for very slow computers */
-    baseUrl: 'http://localhost:5173',
+    baseUrl: 'http://localhost:5173/random/path',
     video: false
   },
 });

test/cypress/e2e/fetch-status.cy.js

@@ -49,7 +49,7 @@ describe("Fetch Status", () => {
             cy.contains("button", "Authorize").click();
         });    
 
-        cy.url().should("eq", "http://localhost:5173/");
+        cy.url().should("eq", Cypress.config('baseUrl') + "/");
 
         // Go to the mixed book query
         cy.contains("For testing only").click();

test/cypress/e2e/log-in.cy.js

@@ -48,7 +48,7 @@ describe("Log in", () => {
       cy.contains("button", "Authorize").click();
     });
 
-    cy.url().should("eq", "http://localhost:5173/");
+    cy.url().should("eq", Cypress.config('baseUrl') + "/");
   });
 
   it("Log in with an invalid IDP issuer", () => {
@@ -83,7 +83,7 @@ describe("Log in", () => {
       cy.contains("button", "Authorize").click();
     });
 
-    cy.url().should("eq", "http://localhost:5173/");
+    cy.url().should("eq", Cypress.config('baseUrl') + "/");
 
     cy.contains("General examples").click();
     cy.contains("A secret list of my favorite books").click();

test/cypress/e2e/save-custom-queries-on-pod.cy.js

@@ -31,7 +31,7 @@ describe("Saving custom queries on pods - logged in", () => {
             cy.contains("button", "Authorize").click();
         });
 
-        cy.url().should("eq", "http://localhost:5173/");
+        cy.url().should("eq", Cypress.config('baseUrl') + "/");
 
         cy.visit("/#");
     });