mirrors/mcphub
1
0
Fork 0
mirror of https://github.com/samanhappy/mcphub.git synced 2025-12-23 18:29:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Refactor API URL handling and add base path support (#131)

Browse Source
This commit is contained in:
samanhappy
2025-05-27 16:11:35 +08:00
committed by GitHub
parent 37bb3414c8
commit 268ce5cce6
18 changed files with 624 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Dockerfile
View File

@@ -18,8 +18,8 @@ RUN npm install -g pnpm
ARG REQUEST_TIMEOUT=60000
ENV REQUEST_TIMEOUT=$REQUEST_TIMEOUT
ARG VITE_BASE_PATH=""
ENV VITE_BASE_PATH=$VITE_BASE_PATH
ARG BASE_PATH=""
ENV BASE_PATH=$BASE_PATH
ENV PNPM_HOME=/usr/local/share/pnpm
ENV PATH=$PNPM_HOME:$PATH

7
frontend/index.html
View File

@@ -1,16 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Hub Dashboard</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body class="bg-gray-100">
<div id="root"></div>
<script type="module" src="./src/main.tsx"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

9
frontend/src/App.tsx
View File

@@ -15,13 +15,16 @@ import LogsPage from './pages/LogsPage';
// Get base path from environment variable or default to empty string
const getBasePath = (): string => {
const basePath = import.meta.env.VITE_BASE_PATH || '';
return basePath.startsWith('/') ? basePath : '';
const basePath = import.meta.env.BASE_PATH || '';
// Ensure the path starts with / if it's not empty and doesn't already start with /
if (basePath && !basePath.startsWith('/')) {
return '/' + basePath;
}
return basePath;
};
function App() {
const basename = getBasePath();
return (
<ThemeProvider>
<AuthProvider>

3
frontend/src/components/AddServerForm.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import ServerForm from './ServerForm'
import { getApiUrl } from '../utils/api'
interface AddServerFormProps {
onAdd: () => void
@@ -20,7 +21,7 @@ const AddServerForm = ({ onAdd }: AddServerFormProps) => {
try {
setError(null)
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/servers', {
const response = await fetch(getApiUrl('/servers'), {
method: 'POST',
headers: {
'Content-Type': 'application/json',

44
frontend/src/hooks/useGroupData.ts
View File

@@ -1,6 +1,7 @@
import { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Group, ApiResponse } from '@/types';
import { getApiUrl } from '../utils/api';
export const useGroupData = () => {
const { t } = useTranslation();
@@ -13,10 +14,10 @@ export const useGroupData = () => {
try {
setLoading(true);
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/groups', {
const response = await fetch(getApiUrl('/groups'), {
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
if (!response.ok) {
@@ -44,18 +45,18 @@ export const useGroupData = () => {
// Trigger a refresh of the groups data
const triggerRefresh = useCallback(() => {
setRefreshKey(prev => prev + 1);
setRefreshKey((prev) => prev + 1);
}, []);
// Create a new group with server associations
const createGroup = async (name: string, description?: string, servers: string[] = []) => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/groups', {
const response = await fetch(getApiUrl('/groups'), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token || ''
'x-auth-token': token || '',
},
body: JSON.stringify({ name, description, servers }),
});
@@ -76,14 +77,17 @@ export const useGroupData = () => {
};
// Update an existing group with server associations
const updateGroup = async (id: string, data: { name?: string; description?: string; servers?: string[] }) => {
const updateGroup = async (
id: string,
data: { name?: string; description?: string; servers?: string[] },
) => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/groups/${id}`, {
const response = await fetch(getApiUrl(`/groups/${id}`), {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token || ''
'x-auth-token': token || '',
},
body: JSON.stringify(data),
});
@@ -107,11 +111,11 @@ export const useGroupData = () => {
const updateGroupServers = async (groupId: string, servers: string[]) => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/groups/${groupId}/servers/batch`, {
const response = await fetch(getApiUrl(`/groups/${groupId}/servers/batch`), {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token || ''
'x-auth-token': token || '',
},
body: JSON.stringify({ servers }),
});
@@ -135,11 +139,11 @@ export const useGroupData = () => {
const deleteGroup = async (id: string) => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/groups/${id}`, {
const response = await fetch(getApiUrl(`/groups/${id}`), {
method: 'DELETE',
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
const result = await response.json();
@@ -161,11 +165,11 @@ export const useGroupData = () => {
const addServerToGroup = async (groupId: string, serverName: string) => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/groups/${groupId}/servers`, {
const response = await fetch(getApiUrl(`/groups/${groupId}/servers`), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token || ''
'x-auth-token': token || '',
},
body: JSON.stringify({ serverName }),
});
@@ -189,11 +193,11 @@ export const useGroupData = () => {
const removeServerFromGroup = async (groupId: string, serverName: string) => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/groups/${groupId}/servers/${serverName}`, {
const response = await fetch(getApiUrl(`/groups/${groupId}/servers/${serverName}`), {
method: 'DELETE',
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
const result: ApiResponse<Group> = await response.json();
@@ -227,6 +231,6 @@ export const useGroupData = () => {
updateGroupServers,
deleteGroup,
addServerToGroup,
removeServerFromGroup
removeServerFromGroup,
};
};

464
frontend/src/hooks/useMarketData.ts
View File

@@ -1,6 +1,7 @@
import { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { MarketServer, ApiResponse } from '@/types';
import { getApiUrl } from '../utils/api';
export const useMarketData = () => {
const { t } = useTranslation();
@@ -26,10 +27,10 @@ export const useMarketData = () => {
try {
setLoading(true);
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/market/servers', {
const response = await fetch(getApiUrl('/market/servers'), {
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
if (!response.ok) {
@@ -55,36 +56,42 @@ export const useMarketData = () => {
}, [t]);
// Apply pagination to data
const applyPagination = useCallback((data: MarketServer[], page: number, itemsPerPage = serversPerPage) => {
const totalItems = data.length;
const calculatedTotalPages = Math.ceil(totalItems / itemsPerPage);
setTotalPages(calculatedTotalPages);
const applyPagination = useCallback(
(data: MarketServer[], page: number, itemsPerPage = serversPerPage) => {
const totalItems = data.length;
const calculatedTotalPages = Math.ceil(totalItems / itemsPerPage);
setTotalPages(calculatedTotalPages);
// Ensure current page is valid
const validPage = Math.max(1, Math.min(page, calculatedTotalPages));
if (validPage !== page) {
setCurrentPage(validPage);
}
// Ensure current page is valid
const validPage = Math.max(1, Math.min(page, calculatedTotalPages));
if (validPage !== page) {
setCurrentPage(validPage);
}
const startIndex = (validPage - 1) * itemsPerPage;
const paginatedServers = data.slice(startIndex, startIndex + itemsPerPage);
setServers(paginatedServers);
}, [serversPerPage]);
const startIndex = (validPage - 1) * itemsPerPage;
const paginatedServers = data.slice(startIndex, startIndex + itemsPerPage);
setServers(paginatedServers);
},
[serversPerPage],
);
// Change page
const changePage = useCallback((page: number) => {
setCurrentPage(page);
applyPagination(allServers, page, serversPerPage);
}, [allServers, applyPagination, serversPerPage]);
const changePage = useCallback(
(page: number) => {
setCurrentPage(page);
applyPagination(allServers, page, serversPerPage);
},
[allServers, applyPagination, serversPerPage],
);
// Fetch all categories
const fetchCategories = useCallback(async () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/market/categories', {
const response = await fetch(getApiUrl('/market/categories'), {
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
if (!response.ok) {
@@ -107,10 +114,10 @@ export const useMarketData = () => {
const fetchTags = useCallback(async () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/market/tags', {
const response = await fetch(getApiUrl('/market/tags'), {
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
if (!response.ok) {
@@ -130,170 +137,188 @@ export const useMarketData = () => {
}, []);
// Fetch server by name
const fetchServerByName = useCallback(async (name: string) => {
try {
setLoading(true);
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/market/servers/${name}`, {
headers: {
'x-auth-token': token || ''
const fetchServerByName = useCallback(
async (name: string) => {
try {
setLoading(true);
const token = localStorage.getItem('mcphub_token');
const response = await fetch(getApiUrl(`/market/servers/${name}`), {
headers: {
'x-auth-token': token || '',
},
});
if (!response.ok) {
throw new Error(`Status: ${response.status}`);
}
});
if (!response.ok) {
throw new Error(`Status: ${response.status}`);
}
const data: ApiResponse<MarketServer> = await response.json();
const data: ApiResponse<MarketServer> = await response.json();
if (data && data.success && data.data) {
setCurrentServer(data.data);
return data.data;
} else {
console.error('Invalid server data format:', data);
setError(t('market.serverNotFound'));
if (data && data.success && data.data) {
setCurrentServer(data.data);
return data.data;
} else {
console.error('Invalid server data format:', data);
setError(t('market.serverNotFound'));
return null;
}
} catch (err) {
console.error(`Error fetching server ${name}:`, err);
setError(err instanceof Error ? err.message : String(err));
return null;
} finally {
setLoading(false);
}
} catch (err) {
console.error(`Error fetching server ${name}:`, err);
setError(err instanceof Error ? err.message : String(err));
return null;
} finally {
setLoading(false);
}
}, [t]);
},
[t],
);
// Search servers by query
const searchServers = useCallback(async (query: string) => {
try {
setLoading(true);
setSearchQuery(query);
const searchServers = useCallback(
async (query: string) => {
try {
setLoading(true);
setSearchQuery(query);
if (!query.trim()) {
// Fetch fresh data from server instead of just applying pagination
fetchMarketServers();
return;
}
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/market/servers/search?query=${encodeURIComponent(query)}`, {
headers: {
'x-auth-token': token || ''
if (!query.trim()) {
// Fetch fresh data from server instead of just applying pagination
fetchMarketServers();
return;
}
});
if (!response.ok) {
throw new Error(`Status: ${response.status}`);
const token = localStorage.getItem('mcphub_token');
const response = await fetch(
getApiUrl(`/market/servers/search?query=${encodeURIComponent(query)}`),
{
headers: {
'x-auth-token': token || '',
},
},
);
if (!response.ok) {
throw new Error(`Status: ${response.status}`);
}
const data: ApiResponse<MarketServer[]> = await response.json();
if (data && data.success && Array.isArray(data.data)) {
setAllServers(data.data);
setCurrentPage(1);
applyPagination(data.data, 1);
} else {
console.error('Invalid search results format:', data);
setError(t('market.searchError'));
}
} catch (err) {
console.error('Error searching servers:', err);
setError(err instanceof Error ? err.message : String(err));
} finally {
setLoading(false);
}
const data: ApiResponse<MarketServer[]> = await response.json();
if (data && data.success && Array.isArray(data.data)) {
setAllServers(data.data);
setCurrentPage(1);
applyPagination(data.data, 1);
} else {
console.error('Invalid search results format:', data);
setError(t('market.searchError'));
}
} catch (err) {
console.error('Error searching servers:', err);
setError(err instanceof Error ? err.message : String(err));
} finally {
setLoading(false);
}
}, [t, allServers, applyPagination, fetchMarketServers]);
},
[t, allServers, applyPagination, fetchMarketServers],
);
// Filter servers by category
const filterByCategory = useCallback(async (category: string) => {
try {
setLoading(true);
setSelectedCategory(category);
setSelectedTag(''); // Reset tag filter when filtering by category
const filterByCategory = useCallback(
async (category: string) => {
try {
setLoading(true);
setSelectedCategory(category);
setSelectedTag(''); // Reset tag filter when filtering by category
if (!category) {
fetchMarketServers();
return;
}
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/market/categories/${encodeURIComponent(category)}`, {
headers: {
'x-auth-token': token || ''
if (!category) {
fetchMarketServers();
return;
}
});
if (!response.ok) {
throw new Error(`Status: ${response.status}`);
const token = localStorage.getItem('mcphub_token');
const response = await fetch(
getApiUrl(`/market/categories/${encodeURIComponent(category)}`),
{
headers: {
'x-auth-token': token || '',
},
},
);
if (!response.ok) {
throw new Error(`Status: ${response.status}`);
}
const data: ApiResponse<MarketServer[]> = await response.json();
if (data && data.success && Array.isArray(data.data)) {
setAllServers(data.data);
setCurrentPage(1);
applyPagination(data.data, 1);
} else {
console.error('Invalid category filter results format:', data);
setError(t('market.filterError'));
}
} catch (err) {
console.error('Error filtering servers by category:', err);
setError(err instanceof Error ? err.message : String(err));
} finally {
setLoading(false);
}
const data: ApiResponse<MarketServer[]> = await response.json();
if (data && data.success && Array.isArray(data.data)) {
setAllServers(data.data);
setCurrentPage(1);
applyPagination(data.data, 1);
} else {
console.error('Invalid category filter results format:', data);
setError(t('market.filterError'));
}
} catch (err) {
console.error('Error filtering servers by category:', err);
setError(err instanceof Error ? err.message : String(err));
} finally {
setLoading(false);
}
}, [t, fetchMarketServers, applyPagination]);
},
[t, fetchMarketServers, applyPagination],
);
// Filter servers by tag
const filterByTag = useCallback(async (tag: string) => {
try {
setLoading(true);
setSelectedTag(tag);
setSelectedCategory(''); // Reset category filter when filtering by tag
const filterByTag = useCallback(
async (tag: string) => {
try {
setLoading(true);
setSelectedTag(tag);
setSelectedCategory(''); // Reset category filter when filtering by tag
if (!tag) {
fetchMarketServers();
return;
}
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/market/tags/${encodeURIComponent(tag)}`, {
headers: {
'x-auth-token': token || ''
if (!tag) {
fetchMarketServers();
return;
}
});
if (!response.ok) {
throw new Error(`Status: ${response.status}`);
const token = localStorage.getItem('mcphub_token');
const response = await fetch(getApiUrl(`/market/tags/${encodeURIComponent(tag)}`), {
headers: {
'x-auth-token': token || '',
},
});
if (!response.ok) {
throw new Error(`Status: ${response.status}`);
}
const data: ApiResponse<MarketServer[]> = await response.json();
if (data && data.success && Array.isArray(data.data)) {
setAllServers(data.data);
setCurrentPage(1);
applyPagination(data.data, 1);
} else {
console.error('Invalid tag filter results format:', data);
setError(t('market.tagFilterError'));
}
} catch (err) {
console.error('Error filtering servers by tag:', err);
setError(err instanceof Error ? err.message : String(err));
} finally {
setLoading(false);
}
const data: ApiResponse<MarketServer[]> = await response.json();
if (data && data.success && Array.isArray(data.data)) {
setAllServers(data.data);
setCurrentPage(1);
applyPagination(data.data, 1);
} else {
console.error('Invalid tag filter results format:', data);
setError(t('market.tagFilterError'));
}
} catch (err) {
console.error('Error filtering servers by tag:', err);
setError(err instanceof Error ? err.message : String(err));
} finally {
setLoading(false);
}
}, [t, fetchMarketServers, applyPagination]);
},
[t, fetchMarketServers, applyPagination],
);
// Fetch installed servers
const fetchInstalledServers = useCallback(async () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/servers', {
const response = await fetch(getApiUrl('/servers'), {
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
if (!response.ok) {
@@ -313,64 +338,77 @@ export const useMarketData = () => {
}, []);
// Check if a server is already installed
const isServerInstalled = useCallback((serverName: string) => {
return installedServers.includes(serverName);
}, [installedServers]);
const isServerInstalled = useCallback(
(serverName: string) => {
return installedServers.includes(serverName);
},
[installedServers],
);
// Install server to the local environment
const installServer = useCallback(async (server: MarketServer) => {
try {
const installType = server.installations?.npm ? 'npm' : Object.keys(server.installations || {}).length > 0 ? Object.keys(server.installations)[0] : null;
const installServer = useCallback(
async (server: MarketServer) => {
try {
const installType = server.installations?.npm
? 'npm'
: Object.keys(server.installations || {}).length > 0
? Object.keys(server.installations)[0]
: null;
if (!installType || !server.installations?.[installType]) {
setError(t('market.noInstallationMethod'));
if (!installType || !server.installations?.[installType]) {
setError(t('market.noInstallationMethod'));
return false;
}
const installation = server.installations[installType];
// Prepare server configuration
const serverConfig = {
name: server.name,
config: {
command: installation.command,
args: installation.args,
env: installation.env || {},
},
};
// Call the createServer API
const token = localStorage.getItem('mcphub_token');
const response = await fetch(getApiUrl('/servers'), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token || '',
},
body: JSON.stringify(serverConfig),
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || `Status: ${response.status}`);
}
// Update installed servers list after successful installation
await fetchInstalledServers();
return true;
} catch (err) {
console.error('Error installing server:', err);
setError(err instanceof Error ? err.message : String(err));
return false;
}
const installation = server.installations[installType];
// Prepare server configuration
const serverConfig = {
name: server.name,
config: {
command: installation.command,
args: installation.args,
env: installation.env || {}
}
};
// Call the createServer API
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/servers', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token || ''
},
body: JSON.stringify(serverConfig),
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || `Status: ${response.status}`);
}
// Update installed servers list after successful installation
await fetchInstalledServers();
return true;
} catch (err) {
console.error('Error installing server:', err);
setError(err instanceof Error ? err.message : String(err));
return false;
}
}, [t, fetchInstalledServers]);
},
[t, fetchInstalledServers],
);
// Change servers per page
const changeServersPerPage = useCallback((perPage: number) => {
setServersPerPage(perPage);
setCurrentPage(1);
applyPagination(allServers, 1, perPage);
}, [allServers, applyPagination]);
const changeServersPerPage = useCallback(
(perPage: number) => {
setServersPerPage(perPage);
setCurrentPage(1);
applyPagination(allServers, 1, perPage);
},
[allServers, applyPagination],
);
// Load initial data
useEffect(() => {
@@ -405,6 +443,6 @@ export const useMarketData = () => {
changePage,
changeServersPerPage,
// Installed servers methods
isServerInstalled
isServerInstalled,
};
};

49
frontend/src/hooks/useServerData.ts
View File

@@ -1,18 +1,19 @@
import { useState, useEffect, useRef, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Server, ApiResponse } from '@/types';
import { getApiUrl } from '../utils/api';
// Configuration options
const CONFIG = {
// Initialization phase configuration
startup: {
maxAttempts: 60, // Maximum number of attempts during initialization
pollingInterval: 3000 // Polling interval during initialization (3 seconds)
maxAttempts: 60, // Maximum number of attempts during initialization
pollingInterval: 3000, // Polling interval during initialization (3 seconds)
},
// Normal operation phase configuration
normal: {
pollingInterval: 10000 // Polling interval during normal operation (10 seconds)
}
pollingInterval: 10000, // Polling interval during normal operation (10 seconds)
},
};
export const useServerData = () => {
@@ -44,10 +45,10 @@ export const useServerData = () => {
const fetchServers = async () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/servers', {
const response = await fetch(getApiUrl('/servers'), {
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
const data = await response.json();
@@ -68,10 +69,10 @@ export const useServerData = () => {
// Use friendly error message
if (!navigator.onLine) {
setError(t('errors.network'));
} else if (err instanceof TypeError && (
err.message.includes('NetworkError') ||
err.message.includes('Failed to fetch')
)) {
} else if (
err instanceof TypeError &&
(err.message.includes('NetworkError') || err.message.includes('Failed to fetch'))
) {
setError(t('errors.serverConnection'));
} else {
setError(t('errors.serverFetch'));
@@ -97,10 +98,10 @@ export const useServerData = () => {
const fetchInitialData = async () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/servers', {
const response = await fetch(getApiUrl('/servers'), {
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
const data = await response.json();
@@ -191,12 +192,12 @@ export const useServerData = () => {
}
// Change in refreshKey will trigger useEffect to run again
setRefreshKey(prevKey => prevKey + 1);
setRefreshKey((prevKey) => prevKey + 1);
};
// Server related operations
const handleServerAdd = () => {
setRefreshKey(prevKey => prevKey + 1);
setRefreshKey((prevKey) => prevKey + 1);
};
const handleServerEdit = async (server: Server) => {
@@ -205,8 +206,8 @@ export const useServerData = () => {
const token = localStorage.getItem('mcphub_token');
const response = await fetch(`/api/settings`, {
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
const settingsData: ApiResponse<{ mcpServers: Record<string, any> }> = await response.json();
@@ -243,8 +244,8 @@ export const useServerData = () => {
const response = await fetch(`/api/servers/${serverName}`, {
method: 'DELETE',
headers: {
'x-auth-token': token || ''
}
'x-auth-token': token || '',
},
});
const result = await response.json();
@@ -253,7 +254,7 @@ export const useServerData = () => {
return false;
}
setRefreshKey(prevKey => prevKey + 1);
setRefreshKey((prevKey) => prevKey + 1);
return true;
} catch (err) {
setError(t('errors.general') + ': ' + (err instanceof Error ? err.message : String(err)));
@@ -268,7 +269,7 @@ export const useServerData = () => {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token || ''
'x-auth-token': token || '',
},
body: JSON.stringify({ enabled }),
});
@@ -282,7 +283,7 @@ export const useServerData = () => {
}
// Update the UI immediately to reflect the change
setRefreshKey(prevKey => prevKey + 1);
setRefreshKey((prevKey) => prevKey + 1);
return true;
} catch (err) {
console.error('Error toggling server:', err);
@@ -301,6 +302,6 @@ export const useServerData = () => {
handleServerAdd,
handleServerEdit,
handleServerRemove,
handleServerToggle
handleServerToggle,
};
};

11
frontend/src/hooks/useSettingsData.ts
View File

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { ApiResponse } from '@/types';
import { useToast } from '@/contexts/ToastContext';
import { getApiUrl } from '../utils/api';
// Define types for the settings data
interface RoutingConfig {
@@ -80,7 +81,7 @@ export const useSettingsData = () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/settings', {
const response = await fetch(getApiUrl('/settings'), {
headers: {
'x-auth-token': token || '',
},
@@ -136,7 +137,7 @@ export const useSettingsData = () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/system-config', {
const response = await fetch(getApiUrl('/system-config'), {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
@@ -183,7 +184,7 @@ export const useSettingsData = () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/system-config', {
const response = await fetch(getApiUrl('/system-config'), {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
@@ -233,7 +234,7 @@ export const useSettingsData = () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/system-config', {
const response = await fetch(getApiUrl('/system-config'), {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
@@ -283,7 +284,7 @@ export const useSettingsData = () => {
try {
const token = localStorage.getItem('mcphub_token');
const response = await fetch('/api/system-config', {
const response = await fetch(getApiUrl('/system-config'), {
method: 'PUT',
headers: {
'Content-Type': 'application/json',

24
frontend/src/services/authService.ts
View File

@@ -1,7 +1,10 @@
import { AuthResponse, LoginCredentials, RegisterCredentials, ChangePasswordCredentials } from '../types';
// Base URL for API requests
const API_URL = '';
import {
AuthResponse,
LoginCredentials,
RegisterCredentials,
ChangePasswordCredentials,
} from '../types';
import { getApiUrl } from '../utils/api';
// Token key in localStorage
const TOKEN_KEY = 'mcphub_token';
@@ -24,7 +27,8 @@ export const removeToken = (): void => {
// Login user
export const login = async (credentials: LoginCredentials): Promise<AuthResponse> => {
try {
const response = await fetch(`${API_URL}/auth/login`, {
console.log(getApiUrl('/auth/login'));
const response = await fetch(getApiUrl('/auth/login'), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -51,7 +55,7 @@ export const login = async (credentials: LoginCredentials): Promise<AuthResponse
// Register user
export const register = async (credentials: RegisterCredentials): Promise<AuthResponse> => {
try {
const response = await fetch(`${API_URL}/auth/register`, {
const response = await fetch(getApiUrl('/auth/register'), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -87,7 +91,7 @@ export const getCurrentUser = async (): Promise<AuthResponse> => {
}
try {
const response = await fetch(`${API_URL}/auth/user`, {
const response = await fetch(getApiUrl('/auth/user'), {
method: 'GET',
headers: {
'x-auth-token': token,
@@ -105,7 +109,9 @@ export const getCurrentUser = async (): Promise<AuthResponse> => {
};
// Change password
export const changePassword = async (credentials: ChangePasswordCredentials): Promise<AuthResponse> => {
export const changePassword = async (
credentials: ChangePasswordCredentials,
): Promise<AuthResponse> => {
const token = getToken();
if (!token) {
@@ -116,7 +122,7 @@ export const changePassword = async (credentials: ChangePasswordCredentials): Pr
}
try {
const response = await fetch(`${API_URL}/auth/change-password`, {
const response = await fetch(getApiUrl('/auth/change-password'), {
method: 'POST',
headers: {
'Content-Type': 'application/json',

17
frontend/src/services/logService.ts
View File

@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react';
import { getToken } from './authService'; // Import getToken function
import { getApiUrl } from '../utils/api';
export interface LogEntry {
timestamp: number;
@@ -18,10 +19,10 @@ export const fetchLogs = async (): Promise<LogEntry[]> => {
throw new Error('Authentication token not found. Please log in.');
}
const response = await fetch('/api/logs', {
const response = await fetch(getApiUrl('/logs'), {
headers: {
'x-auth-token': token
}
'x-auth-token': token,
},
});
const result = await response.json();
@@ -46,11 +47,11 @@ export const clearLogs = async (): Promise<void> => {
throw new Error('Authentication token not found. Please log in.');
}
const response = await fetch('/api/logs', {
const response = await fetch(getApiUrl('/logs'), {
method: 'DELETE',
headers: {
'x-auth-token': token
}
'x-auth-token': token,
},
});
const result = await response.json();
@@ -90,7 +91,7 @@ export const useLogs = () => {
}
// Connect to SSE endpoint with auth token in URL
eventSource = new EventSource(`/api/logs/stream?token=${token}`);
eventSource = new EventSource(getApiUrl(`/logs/stream?token=${token}`));
eventSource.onmessage = (event) => {
if (!isMounted) return;
@@ -102,7 +103,7 @@ export const useLogs = () => {
setLogs(data.logs);
setLoading(false);
} else if (data.type === 'log') {
setLogs(prevLogs => [...prevLogs, data.log]);
setLogs((prevLogs) => [...prevLogs, data.log]);
}
} catch (err) {
console.error('Error parsing SSE message:', err);

27
frontend/src/utils/api.ts Normal file
View File

@@ -0,0 +1,27 @@
/**
* API utility functions for constructing URLs with proper base path support
*/
/**
* Get the API base URL including base path and /api prefix
* @returns The complete API base URL
*/
export const getApiBaseUrl = (): string => {
const basePath = import.meta.env.BASE_PATH || '';
// Ensure the path starts with / if it's not empty and doesn't already start with /
const normalizedBasePath = basePath && !basePath.startsWith('/') ? '/' + basePath : basePath;
// Always append /api to the base path for API endpoints
return normalizedBasePath + '/api';
};
/**
* Construct a full API URL with the given endpoint
* @param endpoint - The API endpoint (should start with /, e.g., '/auth/login')
* @returns The complete API URL
*/
export const getApiUrl = (endpoint: string): string => {
const baseUrl = getApiBaseUrl();
// Ensure endpoint starts with /
const normalizedEndpoint = endpoint.startsWith('/') ? endpoint : '/' + endpoint;
return baseUrl + normalizedEndpoint;
};

2
frontend/src/vite-env.d.ts vendored
View File

@@ -3,7 +3,7 @@
interface ImportMeta {
readonly env: {
readonly PACKAGE_VERSION: string;
readonly VITE_BASE_PATH?: string; // Add base path environment variable
readonly BASE_PATH?: string; // Add base path environment variable
// Add other custom env variables here if needed
[key: string]: any;
};

12
frontend/vite.config.ts
View File

@@ -8,9 +8,12 @@ import { readFileSync } from 'fs';
// Get package.json version
const packageJson = JSON.parse(readFileSync(path.resolve(__dirname, '../package.json'), 'utf-8'));
// Get base path from environment variable
const basePath = process.env.BASE_PATH || '';
// https://vitejs.dev/config/
export default defineConfig({
base: './', // Use relative paths for assets
base: basePath || './', // Use base path or relative paths for assets
plugins: [react(), tailwindcss()],
resolve: {
alias: {
@@ -18,19 +21,20 @@ export default defineConfig({
},
},
define: {
// Make package version available as global variable
// Make package version and base path available as global variables
'import.meta.env.PACKAGE_VERSION': JSON.stringify(packageJson.version),
'import.meta.env.BASE_PATH': JSON.stringify(basePath),
},
build: {
sourcemap: true, // Enable source maps for production build
},
server: {
proxy: {
'/api': {
[`${basePath}/api`]: {
target: 'http://localhost:3000',
changeOrigin: true,
},
'/auth': {
[`${basePath}/auth`]: {
target: 'http://localhost:3000',
changeOrigin: true,
},

72
nginx.conf.example Normal file
View File

@@ -0,0 +1,72 @@
# Nginx configuration example for MCPHub with subpath routing
# This example shows how to deploy MCPHub under a subpath like /mcphub
server {
listen 80;
server_name your-domain.com;
# MCPHub under /mcphub subpath
location /mcphub/ {
# Remove the subpath prefix before forwarding to MCPHub
rewrite ^/mcphub/(.*)$ /$1 break;
proxy_pass http://mcphub:3000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
# Important: Disable buffering for SSE connections
proxy_buffering off;
proxy_cache off;
# Support for Server-Sent Events (SSE)
proxy_read_timeout 24h;
proxy_send_timeout 24h;
}
# Alternative configuration if you want to keep the subpath in the backend
# In this case, set BASE_PATH=/mcphub
# location /mcphub/ {
# proxy_pass http://mcphub:3000/mcphub/;
# proxy_http_version 1.1;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection 'upgrade';
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header X-Forwarded-Proto $scheme;
# proxy_cache_bypass $http_upgrade;
#
# # Important: Disable buffering for SSE connections
# proxy_buffering off;
# proxy_cache off;
#
# # Support for Server-Sent Events (SSE)
# proxy_read_timeout 24h;
# proxy_send_timeout 24h;
# }
}
# Docker Compose example with subpath
# version: '3.8'
# services:
# mcphub:
# image: samanhappy/mcphub
# environment:
# - BASE_PATH=/mcphub
# volumes:
# - ./mcp_settings.json:/app/mcp_settings.json
#
# nginx:
# image: nginx:alpine
# ports:
# - "80:80"
# volumes:
# - ./nginx.conf:/etc/nginx/conf.d/default.conf
# depends_on:
# - mcphub

1
src/config/index.ts
View File

@@ -10,6 +10,7 @@ const defaultConfig = {
port: process.env.PORT || 3000,
initTimeout: process.env.INIT_TIMEOUT || 300000,
timeout: process.env.REQUEST_TIMEOUT || 60000,
basePath: process.env.BASE_PATH || '',
mcpHubName: 'mcphub',
mcpHubVersion: getPackageVersion(),
};

30
src/middlewares/index.ts
View File

@@ -5,6 +5,7 @@ import { dirname } from 'path';
import fs from 'fs';
import { auth } from './auth.js';
import { initializeDefaultUser } from '../models/User.js';
import config from '../config/index.js';
// Create __dirname equivalent for ES modules
const __filename = fileURLToPath(import.meta.url);
@@ -35,7 +36,7 @@ export const errorHandler = (
err: Error,
_req: Request,
res: Response,
_next: NextFunction
_next: NextFunction,
): void => {
console.error('Unhandled error:', err);
res.status(500).json({
@@ -46,10 +47,17 @@ export const errorHandler = (
export const initMiddlewares = (app: express.Application): void => {
// Serve static files from the dynamically determined frontend path
app.use(express.static(frontendPath));
// Note: Static files will be handled by the server directly, not here
app.use((req, res, next) => {
if (req.path !== '/sse' && req.path !== '/messages') {
const basePath = config.basePath;
// Only apply JSON parsing for API and auth routes, not for SSE or message endpoints
if (
req.path !== `${basePath}/sse` &&
req.path !== `${basePath}/messages` &&
!req.path.startsWith(`${basePath}/sse/`) &&
!req.path.startsWith(`${basePath}/mcp/`)
) {
express.json()(req, res, next);
} else {
next();
@@ -57,16 +65,18 @@ export const initMiddlewares = (app: express.Application): void => {
});
// Initialize default admin user if no users exist
initializeDefaultUser().catch(err => {
initializeDefaultUser().catch((err) => {
console.error('Error initializing default user:', err);
});
// Protect all API routes with authentication middleware
app.use('/api', auth);
app.get('/', (_req: Request, res: Response) => {
// Serve the frontend application
res.sendFile(path.join(frontendPath, 'index.html'));
// Protect API routes with authentication middleware, but exclude auth endpoints
app.use(`${config.basePath}/api`, (req, res, next) => {
// Skip authentication for login and register endpoints
if (req.path === '/auth/login' || req.path === '/auth/register') {
next();
} else {
auth(req, res, next);
}
});
app.use(errorHandler);

64
src/routes/index.ts
View File

@@ -1,5 +1,6 @@
import express from 'express';
import { check } from 'express-validator';
import config from '../config/index.js';
import {
getAllServers,
getAllSettings,
@@ -7,7 +8,7 @@ import {
updateServer,
deleteServer,
toggleServer,
updateSystemConfig
updateSystemConfig,
} from '../controllers/serverController.js';
import {
getGroups,
@@ -18,7 +19,7 @@ import {
addServerToExistingGroup,
removeServerFromExistingGroup,
getGroupServers,
updateGroupServersBatch
updateGroupServersBatch,
} from '../controllers/groupController.js';
import {
getAllMarketServers,
@@ -27,19 +28,10 @@ import {
getAllMarketTags,
searchMarketServersByQuery,
getMarketServersByCategory,
getMarketServersByTag
getMarketServersByTag,
} from '../controllers/marketController.js';
import {
login,
register,
getCurrentUser,
changePassword
} from '../controllers/authController.js';
import {
getAllLogs,
clearLogs,
streamLogs
} from '../controllers/logController.js';
import { login, register, getCurrentUser, changePassword } from '../controllers/authController.js';
import { getAllLogs, clearLogs, streamLogs } from '../controllers/logController.js';
import { auth } from '../middlewares/auth.js';
const router = express.Router();
@@ -80,27 +72,39 @@ export const initRoutes = (app: express.Application): void => {
router.delete('/logs', clearLogs);
router.get('/logs/stream', streamLogs);
// Auth routes (these will NOT be protected by auth middleware)
app.post('/auth/login', [
check('username', 'Username is required').not().isEmpty(),
check('password', 'Password is required').not().isEmpty(),
], login);
// Auth routes - move to router instead of app directly
router.post(
'/auth/login',
[
check('username', 'Username is required').not().isEmpty(),
check('password', 'Password is required').not().isEmpty(),
],
login,
);
app.post('/auth/register', [
check('username', 'Username is required').not().isEmpty(),
check('password', 'Password must be at least 6 characters').isLength({ min: 6 }),
], register);
router.post(
'/auth/register',
[
check('username', 'Username is required').not().isEmpty(),
check('password', 'Password must be at least 6 characters').isLength({ min: 6 }),
],
register,
);
app.get('/auth/user', auth, getCurrentUser);
router.get('/auth/user', auth, getCurrentUser);
// Add change password route
app.post('/auth/change-password', [
auth,
check('currentPassword', 'Current password is required').not().isEmpty(),
check('newPassword', 'New password must be at least 6 characters').isLength({ min: 6 }),
], changePassword);
router.post(
'/auth/change-password',
[
auth,
check('currentPassword', 'Current password is required').not().isEmpty(),
check('newPassword', 'New password must be at least 6 characters').isLength({ min: 6 }),
],
changePassword,
);
app.use('/api', router);
app.use(`${config.basePath}/api`, router);
};
export default router;

29
src/server.ts
View File

@@ -22,10 +22,12 @@ export class AppServer {
private app: express.Application;
private port: number | string;
private frontendPath: string | null = null;
private basePath: string;
constructor() {
this.app = express();
this.port = config.port;
this.basePath = config.basePath;
}
async initialize(): Promise<void> {
@@ -40,11 +42,11 @@ export class AppServer {
initUpstreamServers()
.then(() => {
console.log('MCP server initialized successfully');
this.app.get('/sse/:group?', (req, res) => handleSseConnection(req, res));
this.app.post('/messages', handleSseMessage);
this.app.post('/mcp/:group?', handleMcpPostRequest);
this.app.get('/mcp/:group?', handleMcpOtherRequest);
this.app.delete('/mcp/:group?', handleMcpOtherRequest);
this.app.get(`${this.basePath}/sse/:group?`, (req, res) => handleSseConnection(req, res));
this.app.post(`${this.basePath}/messages`, handleSseMessage);
this.app.post(`${this.basePath}/mcp/:group?`, handleMcpPostRequest);
this.app.get(`${this.basePath}/mcp/:group?`, handleMcpOtherRequest);
this.app.delete(`${this.basePath}/mcp/:group?`, handleMcpOtherRequest);
})
.catch((error) => {
console.error('Error initializing MCP server:', error);
@@ -66,17 +68,26 @@ export class AppServer {
if (this.frontendPath) {
console.log(`Serving frontend from: ${this.frontendPath}`);
this.app.use(express.static(this.frontendPath));
// Serve static files with base path
this.app.use(this.basePath, express.static(this.frontendPath));
// Add the wildcard route for SPA
// Add the wildcard route for SPA with base path
if (fs.existsSync(path.join(this.frontendPath, 'index.html'))) {
this.app.get('*', (_req, res) => {
this.app.get(`${this.basePath}/*`, (_req, res) => {
res.sendFile(path.join(this.frontendPath!, 'index.html'));
});
// Also handle root redirect if base path is set
if (this.basePath) {
this.app.get('/', (_req, res) => {
res.redirect(this.basePath);
});
}
}
} else {
console.warn('Frontend dist directory not found. Server will run without frontend.');
this.app.get('/', (_req, res) => {
const rootPath = this.basePath || '/';
this.app.get(rootPath, (_req, res) => {
res
.status(404)
.send('Frontend not found. MCPHub API is running, but the UI is not available.');