graasp · spaenleh · May 18, 2026
diff --git a/src/config/env.ts b/src/config/env.ts
@@ -8,9 +8,6 @@ export const SHOW_NOTIFICATIONS =
 
 export const APP_VERSION = import.meta.env.VITE_VERSION;
 
-export const GRAASP_LIBRARY_HOST =
-  import.meta.env.VITE_GRAASP_LIBRARY_HOST ?? 'http://localhost:3005';
-
 export const SENTRY_ENV = import.meta.env.VITE_SENTRY_ENV;
 export const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN;
 export const GRAASP_REDIRECTION_HOST = import.meta.env

diff --git a/src/lib/ClientManager.ts b/src/lib/ClientManager.ts
@@ -73,15 +73,7 @@ export class ClientManager {
     qs: { [key: string]: string | number | boolean } = {},
   ) {
     // make a copy of the host
-    let host = new URL(this.host.toString());
-    if (context === Context.Library) {
-      const libraryHost = this.clientHosts.get(context);
-      if (libraryHost) {
-        host = libraryHost;
-      } else {
-        throw new Error('Library host used before it was defined.');
-      }
-    }
+    const host = new URL(this.host.toString());
     const prefix = this.getPrefix(context);
     const url =
       context === Context.Player

diff --git a/src/main.tsx b/src/main.tsx
@@ -28,12 +28,7 @@ import { theme } from '@/ui/theme';
 
 import { AuthProvider, useAuth } from './AuthContext';
 import './app.css';
-import {
-  APP_VERSION,
-  GRAASP_LIBRARY_HOST,
-  SENTRY_DSN,
-  SENTRY_ENV,
-} from './config/env';
+import { APP_VERSION, SENTRY_DSN, SENTRY_ENV } from './config/env';
 import { QueryClientProvider, queryClient } from './config/queryClient';
 import { ClientManager } from './lib/ClientManager';
 import { routeTree } from './routeTree.gen';
@@ -64,8 +59,7 @@ const clientManager = ClientManager.getInstance();
 clientManager.addPrefix(Context.Builder, '/builder/items');
 clientManager.addPrefix(Context.Analytics, '/analytics/items');
 clientManager.addPrefix(Context.Player, '/player');
-clientManager.addHost(Context.Library, new URL(GRAASP_LIBRARY_HOST));
-clientManager.addPrefix(Context.Library, '/collections');
+clientManager.addPrefix(Context.Library, '/library/collections');
 
 // Set up a Router instance
 const router = createRouter({

diff --git a/src/modules/account/settings/publicProfile/EditPublicProfile.tsx b/src/modules/account/settings/publicProfile/EditPublicProfile.tsx
@@ -17,7 +17,6 @@ import { useAuth } from '@/AuthContext';
 import { BorderedSection } from '@/components/layout/BorderedSection';
 import { Button } from '@/components/ui/Button';
 import { NS } from '@/config/constants';
-import { GRAASP_LIBRARY_HOST } from '@/config/env';
 import {
   PUBLIC_PROFILE_BIO_ID,
   PUBLIC_PROFILE_SAVE_BUTTON_ID,
@@ -99,9 +98,7 @@ export function EditPublicProfile({
     <BorderedSection title={t('TITLE')}>
       <Typography variant="body1">{t('DESCRIPTION')}</Typography>
       {profile && user && (
-        <a href={`${GRAASP_LIBRARY_HOST}/members/${user.id}`}>
-          {t('CHECK_TEXT')}
-        </a>
+        <a href={`/library/members/${user.id}`}>{t('CHECK_TEXT')}</a>
       )}
 
       <Stack

diff --git a/src/modules/analytics/PageWrapper.tsx b/src/modules/analytics/PageWrapper.tsx
@@ -9,7 +9,6 @@ import { getRouteApi } from '@tanstack/react-router';
 
 import { HeaderRightContent } from '@/components/ui/HeaderRightContent';
 import { NS } from '@/config/constants';
-import { GRAASP_LIBRARY_HOST } from '@/config/env';
 import { HomeHeaderLink } from '@/ui/Main/HomeHeaderLink';
 import Main from '@/ui/Main/Main';
 import PlatformSwitch from '@/ui/PlatformSwitch/PlatformSwitch';
@@ -41,7 +40,7 @@ export function PageWrapper({
       href: `/player/${itemId}/${itemId}`,
     },
     [Platform.Library]: {
-      href: GRAASP_LIBRARY_HOST,
+      href: `/library`,
     },
     [Platform.Analytics]: {
       disabled: true,

diff --git a/src/modules/builder/components/pages/home/LibraryCard.tsx b/src/modules/builder/components/pages/home/LibraryCard.tsx
@@ -1,12 +1,16 @@
 import { useTranslation } from 'react-i18next';
 
-import { Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
+import {
+  Button,
+  Stack,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 
 import { ArrowRightIcon } from 'lucide-react';
 
-import { ButtonLink } from '@/components/ui/ButtonLink';
 import { NS } from '@/config/constants';
-import { GRAASP_LIBRARY_HOST } from '@/config/env';
 import LibraryIcon from '@/ui/icons/LibraryIcon';
 import { AccentColors } from '@/ui/theme';
 
@@ -38,14 +42,14 @@ function LibraryCard() {
             <LibraryIcon primaryColor="white" />
           </Stack>
           <Typography color="white">{t('SUBTITLE')}</Typography>
-          <ButtonLink
+          <Button
             sx={{ background: 'white', color: AccentColors.library }}
             variant="contained"
             endIcon={<ArrowRightIcon size={20} />}
-            to={GRAASP_LIBRARY_HOST}
+            href="/library"
           >
             {t('BUTTON_TEXT')}
-          </ButtonLink>
+          </Button>
         </Stack>
       </Stack>
     </Stack>

diff --git a/src/modules/landing/aboutUs/PresentationVideoSection.tsx b/src/modules/landing/aboutUs/PresentationVideoSection.tsx
@@ -5,7 +5,6 @@ import { Stack, Typography } from '@mui/material';
 import { Button } from '@/components/ui/Button';
 import { ButtonLink } from '@/components/ui/ButtonLink';
 import { NS } from '@/config/constants';
-import { GRAASP_LIBRARY_HOST } from '@/config/env';
 
 function PresentationVideoSection() {
   const { t } = useTranslation(NS.Landing, {
@@ -36,9 +35,9 @@ function PresentationVideoSection() {
         <ButtonLink variant="contained" to="/auth/register">
           {t('JOIN_BUTTON_TEXT')}
         </ButtonLink>
-        <a href={GRAASP_LIBRARY_HOST}>
-          <Button color="secondary">{t('LIBRARY_BUTTON_TEXT')}</Button>
-        </a>
+        <Button variant="contained" href="/library" color="secondary">
+          {t('LIBRARY_BUTTON_TEXT')}
+        </Button>
       </Stack>
     </Stack>
   );

diff --git a/src/modules/landing/header/Menu.tsx b/src/modules/landing/header/Menu.tsx
@@ -1,10 +1,9 @@
 import { useTranslation } from 'react-i18next';
 
-import { Stack } from '@mui/material';
+import { Button, Stack } from '@mui/material';
 
 import { ButtonLink } from '@/components/ui/ButtonLink';
 import { NS } from '@/config/constants';
-import { GRAASP_LIBRARY_HOST } from '@/config/env';
 
 export function Menu() {
   const { t } = useTranslation(NS.Landing, { keyPrefix: 'NAVBAR' });
@@ -16,12 +15,7 @@ export function Menu() {
       <ButtonLink activeProps={() => ({ fontWeight: 'bold' })} to="/support">
         {t('GETTING_STARTED')}
       </ButtonLink>
-      <ButtonLink
-        activeProps={() => ({ fontWeight: 'bold' })}
-        to={GRAASP_LIBRARY_HOST}
-      >
-        {t('LIBRARY')}
-      </ButtonLink>
+      <Button href="/library">{t('LIBRARY')}</Button>
       <ButtonLink activeProps={() => ({ fontWeight: 'bold' })} to="/about-us">
         {t('ABOUT_US')}
       </ButtonLink>

diff --git a/src/modules/landing/header/MobileMenu.tsx b/src/modules/landing/header/MobileMenu.tsx
@@ -2,14 +2,13 @@ import type { MouseEvent } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Divider, IconButton } from '@mui/material';
+import { Divider, IconButton, MenuItem } from '@mui/material';
 import Menu from '@mui/material/Menu';
 
 import { MenuIcon } from 'lucide-react';
 
 import { MenuItemLink } from '@/components/ui/MenuItemLink';
 import { NS } from '@/config/constants';
-import { GRAASP_LIBRARY_HOST } from '@/config/env';
 
 import useUserMenu from './useUserMenu';
 
@@ -92,13 +91,9 @@ export function MobileMenu() {
         >
           {t('GETTING_STARTED')}
         </MenuItemLink>
-        <MenuItemLink
-          activeProps={() => ({ selected: true })}
-          to={GRAASP_LIBRARY_HOST}
-          onClick={handleClose}
-        >
+        <MenuItem href="/library" onClick={handleClose}>
           {t('LIBRARY')}
-        </MenuItemLink>
+        </MenuItem>
         <MenuItemLink
           activeProps={() => ({ selected: true })}
           to="/about-us"

diff --git a/src/modules/landing/home/messages/MessageLibrary.tsx b/src/modules/landing/home/messages/MessageLibrary.tsx
@@ -1,16 +1,15 @@
 import { Trans, useTranslation } from 'react-i18next';
 
 import {
+  Button,
   Grid,
   Stack,
   Typography,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
 
-import { ButtonLink } from '@/components/ui/ButtonLink';
 import { NS } from '@/config/constants';
-import { GRAASP_LIBRARY_HOST } from '@/config/env';
 
 import { Message } from '../Message';
 import { UserCapsuleExample } from '../UserCapsuleExample';
@@ -41,33 +40,31 @@ function MessageLibrary() {
           />
         </Typography>
         <Stack direction="row" gap={2}>
-          <ButtonLink
-            to={GRAASP_LIBRARY_HOST}
+          <Button
+            href="/library"
             sx={{
               // make button take only needed space
               width: 'fit-content',
             }}
             color="primary"
             variant="contained"
-            dataUmamiEvent="messages-library-button"
+            data-umami-event="messages-library-button"
           >
             {t('LIBRARY_BUTTON_TEXT')}
-          </ButtonLink>
+          </Button>
           {isSmUp && (
-            <ButtonLink
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-expect-error
-              to={`${GRAASP_LIBRARY_HOST}/oer`}
+            <Button
+              href="/library/oer"
               sx={{
                 // make button take only needed space
                 width: 'fit-content',
               }}
               color="secondary"
               variant="contained"
-              dataUmamiEvent="messages-library-oer-button"
+              data-umami-event="messages-library-oer-button"
             >
               {t('OER_BUTTON_TEXT')}
-            </ButtonLink>
+            </Button>
           )}
         </Stack>
       </Message>

diff --git a/src/routes/builder/items/$itemId.tsx b/src/routes/builder/items/$itemId.tsx
@@ -19,7 +19,6 @@ import { ButtonLink } from '@/components/ui/ButtonLink';
 import { HeaderRightContent } from '@/components/ui/HeaderRightContent';
 import { MainMenuItem } from '@/components/ui/MainMenuItem';
 import { NS } from '@/config/constants';
-import { GRAASP_LIBRARY_HOST } from '@/config/env';
 import { hooks, mutations } from '@/config/queryClient';
 import {
   APP_NAVIGATION_PLATFORM_SWITCH_ID,
@@ -108,7 +107,7 @@ function RouteComponent() {
       href: `/player/${itemId}/${itemId}`,
     },
     [Platform.Library]: {
-      href: GRAASP_LIBRARY_HOST,
+      href: `/library`,
     },
     [Platform.Analytics]: {
       href: `/analytics/items/${itemId}`,

diff --git a/src/routes/player/$rootId/$itemId.tsx b/src/routes/player/$rootId/$itemId.tsx
@@ -13,7 +13,6 @@ import { ItemNavigation } from '@/components/tree/ItemNavigation';
 import { CustomLink } from '@/components/ui/CustomLink';
 import { HeaderRightContent } from '@/components/ui/HeaderRightContent';
 import { NS } from '@/config/constants';
-import { GRAASP_LIBRARY_HOST } from '@/config/env';
 import { hooks } from '@/config/queryClient';
 import Main from '@/ui/Main/Main';
 import PlatformSwitch from '@/ui/PlatformSwitch/PlatformSwitch';
@@ -62,7 +61,7 @@ function PlayerWrapper(): JSX.Element {
       href: '/player',
     },
     [Platform.Library]: {
-      href: GRAASP_LIBRARY_HOST,
+      href: '/library',
     },
     [Platform.Analytics]: {
       href: `/analytics/items/${itemId}`,