chore: enable frontend base url without slash at the end

Author: michaelwenk

compose/env.dist

@@ -91,7 +91,7 @@ MB3_FRONTEND_HOST=localhost
 MB3_FRONTEND_PORT=8080
 
 # The base URL
-MB3_FRONTEND_BASE_URL=/MassBank/
+MB3_FRONTEND_BASE_URL=/MassBank
 
 # The version of the frontend
 MB3_FRONTEND_VERSION=3.0.0 (beta)

web-frontend/server.ts

@@ -19,7 +19,11 @@ const backendUrl =
     ? process.env.MB3_API_URL.replace(/\/$/, '')
     : 'http://localhost:8081/MassBank-api';
 const frontendUrl = process.env.MB3_FRONTEND_URL ?? 'http://localhost:8080';
-const frontendBaseUrl = process.env.MB3_FRONTEND_BASE_URL ?? '/MassBank3/';
+const frontendBaseUrl =
+  process.env.MB3_FRONTEND_BASE_URL &&
+  process.env.MB3_FRONTEND_BASE_URL.trim().length > 0
+    ? process.env.MB3_FRONTEND_BASE_URL.replace(/\/$/, '')
+    : '/MassBank3';
 const exportServiceUrl =
   process.env.EXPORT_SERVICE_URL ?? 'http://localhost:8083';
 const version = process.env.MB3_VERSION ?? '0.4.0 (beta)';
@@ -135,17 +139,26 @@ async function getLastmodDate() {
   return lastmodDate;
 }
 
+// Create router for redirecting to the frontend with base URL in case slash is missing
+const redirectRouter = express.Router();
+const regex = new RegExp(`^${frontendBaseUrl}$`);
+app.use(regex, redirectRouter);
+redirectRouter.get('', async (req: Request, res: Response) => {
+  const redirectUrl = frontendUrl + frontendBaseUrl + '/';
+  res.redirect(redirectUrl);
+});
+
 // Create router for base URL
 const baseRouter = express.Router();
-app.use(frontendBaseUrl, baseRouter);
+app.use(frontendBaseUrl + '/', baseRouter);
 
 const nRecords = 40000;
 const prefixUrl = frontendUrl + frontendBaseUrl;
 
 // serve sitemap index for search engines
 baseRouter.get('/robots.txt', async (req: Request, res: Response) => {
   try {
-    const content = `User-agent: *\nAllow: /\n\nSitemap: ${prefixUrl}sitemap.xml`;
+    const content = `User-agent: *\nAllow: /\n\nSitemap: ${prefixUrl}/sitemap.xml`;
 
     res.status(200).set({ 'Content-Type': 'text/plain' }).send(content);
   } catch (e) {
@@ -173,11 +186,11 @@ baseRouter.get('/sitemap.xml', async (req: Request, res: Response) => {
     const n = Math.ceil(hitsCount / nRecords);
     for (let i = 0; i < n; i++) {
       xmlContent.push(
-        `<sitemap><loc>${prefixUrl}sitemap_${i}.xml</loc><lastmod>${lastmodDate}</lastmod></sitemap>`,
+        `<sitemap><loc>${prefixUrl}/sitemap_${i}.xml</loc><lastmod>${lastmodDate}</lastmod></sitemap>`,
       );
     }
     xmlContent.push(
-      `<sitemap><loc>${prefixUrl}sitemap_misc.xml</loc></sitemap>`,
+      `<sitemap><loc>${prefixUrl}/sitemap_misc.xml</loc></sitemap>`,
     );
     xmlContent.push('</sitemapindex>');
     const xml = xmlFormat(xmlContent.join(''));
@@ -199,16 +212,16 @@ baseRouter.get('/sitemap_misc.xml', async (req: Request, res: Response) => {
       `<url><loc>${prefixUrl}</loc><changefreq>weekly</changefreq></url>`,
     );
     xmlContent.push(
-      `<url><loc>${prefixUrl}search</loc><changefreq>weekly</changefreq></url>`,
+      `<url><loc>${prefixUrl}/search</loc><changefreq>weekly</changefreq></url>`,
     );
     xmlContent.push(
-      `<url><loc>${prefixUrl}content</loc><changefreq>weekly</changefreq></url>`,
+      `<url><loc>${prefixUrl}/content</loc><changefreq>weekly</changefreq></url>`,
     );
     xmlContent.push(
-      `<url><loc>${prefixUrl}news</loc><changefreq>weekly</changefreq></url>`,
+      `<url><loc>${prefixUrl}/news</loc><changefreq>weekly</changefreq></url>`,
     );
     xmlContent.push(
-      `<url><loc>${prefixUrl}about</loc><changefreq>weekly</changefreq></url>`,
+      `<url><loc>${prefixUrl}/about</loc><changefreq>weekly</changefreq></url>`,
     );
 
     xmlContent.push('</urlset>');
@@ -244,7 +257,7 @@ baseRouter.get(/\/sitemap_\d+\.xml/, async (req: Request, res: Response) => {
     const xmlContent: string[] = [xmlHeader];
     hits.slice(index * nRecords, (index + 1) * nRecords).forEach((hit) => {
       xmlContent.push(
-        `<url><loc>${prefixUrl}RecordDisplay?id=${hit.accession}</loc><lastmod>${lastmodDate}</lastmod></url>`,
+        `<url><loc>${prefixUrl}/RecordDisplay?id=${hit.accession}</loc><lastmod>${lastmodDate}</lastmod></url>`,
       );
     });
     xmlContent.push(xmlFooter);

web-frontend/src/elements/basic/Chart.tsx

@@ -504,6 +504,7 @@ function Chart({
       const url =
         frontendUrl +
         baseUrl +
+        '/' +
         routes.search.path +
         `?${searchParams.toString()}`;
 

web-frontend/src/elements/common/AccessionSearchInputField.tsx

@@ -38,7 +38,7 @@ function AccessionSearchInputField({
   const handleOnClick = useCallback(
     () =>
       navigate({
-        pathname: baseUrl + routes.accession.path,
+        pathname: baseUrl + '/' + routes.accession.path,
         search: `?${createSearchParams({ id: accession })}`,
       }),
     [accession, baseUrl, navigate],

web-frontend/src/elements/header/Header.tsx

@@ -3,7 +3,7 @@ import './Header.scss';
 import routes from '../../constants/routes';
 import { Button, Menu, MenuProps } from 'antd';
 import { Header as HeaderAntD } from 'antd/es/layout/layout';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { usePropertiesContext } from '../../context/properties/properties';
 import { CSSProperties, useMemo } from 'react';
 import logo from '../../assets/logo.svg';
@@ -38,7 +38,7 @@ function Header({ height }: InputProps) {
             marginRight: 10,
           }}
         >
-          <Link to={baseUrl} target="_self">
+          <a href={baseUrl} target="_self">
             <img
               src={logo}
               alt="MassBank Europe"
@@ -50,7 +50,7 @@ function Header({ height }: InputProps) {
                 padding: 5,
               }}
             />
-          </Link>
+          </a>
         </Button>
       ),
     };
@@ -67,7 +67,7 @@ function Header({ height }: InputProps) {
             route.id !== routes.accessionNext.id,
         )
         .map((route) => {
-          const path = baseUrl + route.path;
+          const path = baseUrl + '/' + route.path;
           return {
             key: path,
             label: (

web-frontend/src/elements/result/ResultLink.tsx

@@ -17,7 +17,12 @@ function ResultLink({ hit, width = '100%', height = '100%' }: InputProps) {
 
   const url = useMemo(
     () =>
-      frontendUrl + baseUrl + routes.accession.path + '?id=' + hit.accession,
+      frontendUrl +
+      baseUrl +
+      '/' +
+      routes.accession.path +
+      '?id=' +
+      hit.accession,
     [baseUrl, frontendUrl, hit.accession],
   );
 

web-frontend/src/elements/routes/Routing.tsx

@@ -11,7 +11,7 @@ function Routing() {
         return (
           <Route
             key={'routing-key-' + route.id}
-            path={baseUrl + route.path}
+            path={baseUrl + '/' + route.path}
             element={<UserInterface body={<route.component />} />}
           />
         );

web-frontend/src/elements/routes/pages/home/QuickSearch.tsx

@@ -22,7 +22,7 @@ function QuickSearch() {
     async (formData: SearchFields) => {
       const builtSearchParams = buildSearchParamsFromFormData(formData);
       navigate({
-        pathname: baseUrl + routes.search.path,
+        pathname: baseUrl + '/' + routes.search.path,
         search: `?${Object.keys(builtSearchParams).length > 0 ? createSearchParams(builtSearchParams) : createSearchParams({ plain: 'true' })}`,
       });
     },

web-frontend/src/elements/routes/pages/search/SearchView.tsx

@@ -149,7 +149,7 @@ function SearchView() {
         const builtSearchParams = buildSearchParamsFromFormData(formData);
 
         navigate({
-          pathname: baseUrl + routes.search.path,
+          pathname: baseUrl + '/' + routes.search.path,
           search: `?${Object.keys(builtSearchParams).length > 0 ? createSearchParams(builtSearchParams) : createSearchParams({ plain: 'true' })}`,
         });
       } else {

web-frontend/src/utils/buildSearchUrl.ts

@@ -9,7 +9,11 @@ function buildSearchUrl(
   const searchParams = new URLSearchParams();
   searchParams.set(label, value);
   const url =
-    frontendUrl + baseUrl + routes.search.path + `?${searchParams.toString()}`;
+    frontendUrl +
+    baseUrl +
+    '/' +
+    routes.search.path +
+    `?${searchParams.toString()}`;
 
   return url;
 }