Base url with non empty path (#42)

mvanbrab · web-flow · commit 95aa2bf2b9fc · 2025-02-20T16:32:55.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,3 +29,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Change components so everything uses typescript
 - Add pinia store for external state management in loama
 - Add default image for logged in user
+- Apps can run in a non-empty base path ([issue #41](https://github.com/SolidLabResearch/loama/issues/41))
diff --git a/README.md b/README.md
@@ -44,22 +44,51 @@ relies on solid-common-lib.
 
 ## Getting started
 
-### prerequisites
+### Prerequisites
 
 - Node >= 20
 - Yarn >= 1.22.x
 
+### Environment variables
+
+The apps are configurable by means of some environment variables.
+
+The environment variables are read from `.env[.mode]` files as [documented by Vite](https://v2.vitejs.dev/config/#environment-variables).
+
+Each app has a file `.env.example` showing the possibilities.
+You may copy it to e.g. `.env` in the same directory and modify it to your needs.
+
+One environment variable is common to all apps: `VITE_BASE`, allowing to run the app in a URL with a path.
+The loama `.env.example` file would result in the loama app running at e.g. `http://localhost:5173/loama/`.
+Very useful for running this app behind a reverse proxy!
+
 ### Development setup
 
 We use yarn workspaces to manage our dependencies of all the subprojects.
 
-Run `yarn` or `yarn install` to get all the dependencies
+Run `yarn` or `yarn install` to get all the dependencies.
+
+Do this before starting loama a very first time after installation:
+
+```bash
+# terminate all yarn dev commands below with <Ctrl-C> as soon as they display "Found 0 errors. Watching for file changes."
+cd ./solid-common-lib/
+yarn dev
+cd ../solid-app-lib/
+yarn dev
+cd ../controller/
+yarn dev
+```
+
+To start the dev server for loama and its dependencies:
 
-Finally we use [nx](nx.dev) to run a job in multiple projects. Simply start the dev servers for loama & its dependencies with:
+```bash
+yarn dev
+```
 
-`yarn dev`
+This makes use of [nx](https://nx.dev) to run a job in multiple projects.
 
-Now you can find loama at http://localhost:5173
+Now you can find loama at <http://localhost:5173>, or in a URL with a path, if you configured so in your `.env` as explained above.
 
 ### Using your own SOLID pod
 
diff --git a/doctorapp/.env.example b/doctorapp/.env.example
@@ -0,0 +1 @@
+VITE_BASE=/doctorapp/
diff --git a/doctorapp/vite.config.ts b/doctorapp/vite.config.ts
@@ -1,15 +1,24 @@
 import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueDevTools from "vite-plugin-vue-devtools";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue(), vueDevTools()],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
-    },
-  },
-});
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd());
+    const config = {
+        plugins: [
+            vue(),
+            vueDevTools()
+        ],
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            }
+        },
+        // available in app as import.meta.env.BASE_URL
+        base: env.VITE_BASE
+    }
+    return config;
+})
diff --git a/loama/.env.example b/loama/.env.example
@@ -1 +1,2 @@
-VITE_DEFAULT_IDP=https://example.podprovider.com/
+VITE_BASE=/loama/
+VITE_DEFAULT_IDP=https://example.podprovider.com/
diff --git a/loama/vite.config.ts b/loama/vite.config.ts
@@ -1,20 +1,26 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [
-        vue(),
-        vueDevTools(),
-        svgLoader()
-    ],
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url))
-        }
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd());
+    const config = {
+        plugins: [
+            vue(),
+            vueDevTools(),
+            svgLoader()
+        ],
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            }
+        },
+        // available in app as import.meta.env.BASE_URL
+        base: env.VITE_BASE || '/'
     }
+    return config;
 })
diff --git a/mockbook/.env.example b/mockbook/.env.example
@@ -0,0 +1 @@
+VITE_BASE=/mockbook/
diff --git a/mockbook/vite.config.ts b/mockbook/vite.config.ts
@@ -1,15 +1,24 @@
 import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueDevTools from "vite-plugin-vue-devtools";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue(), vueDevTools()],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
-    },
-  },
-});
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd());
+    const config = {
+        plugins: [
+            vue(),
+            vueDevTools()
+        ],
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            }
+        },
+        // available in app as import.meta.env.BASE_URL
+        base: env.VITE_BASE
+    }
+    return config;
+})
diff --git a/solid-common-lib/src/index.ts b/solid-common-lib/src/index.ts
@@ -81,7 +81,7 @@ export async function getProfileInfo(
     const mbox = getUrl(profileThing, Schema.mbox) ?? "";
     const description =
         getStringWithLocale(profileThing, Schema.description, "en-us") ?? "";
-    const img = getUrl(profileThing, Schema.img) ?? "/profile.svg";
+    const img = getUrl(profileThing, Schema.img) ?? (import.meta.env.BASE_URL + "profile.svg");
     const phone = getUrl(profileThing, Schema.phone) ?? "";
 
     return { name, mbox, description, img, phone };
diff --git a/solid-common-lib/tsconfig.json b/solid-common-lib/tsconfig.json
@@ -32,7 +32,7 @@
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    "types": ["vite/client"],                            /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-VITE_DEFAULT_IDP=https://example.podprovider.com/`
	`1`	`+VITE_BASE=/loama/`
	`2`	`+VITE_DEFAULT_IDP=https://example.podprovider.com/`