The Certimate frontend is a React-based Single Page Application (SPA) built with TypeScript, Vite, and Ant Design. It serves as the primary interface for managing SSL certificate automation workflows, access credentials, and system diagnostics.
The application initializes at ui/index.html. The TypeScript entry point is ui/src/main.tsx ui/src/main.tsx1-17 It performs the following bootstrap steps:
dayjs with the UTC plugin ui/src/main.tsx11RootApp component (defined in App.tsx) into the DOM ui/src/main.tsx13-17The application version is defined in ui/src/domain/app.ts as APP_VERSION ui/src/domain/app.ts1 It pulls from a global __APP_VERSION__ constant injected by Vite during the build process ui/vite.config.ts32
internal/app/app.go via regex during the Vite build process ui/vite.config.ts14-17-dev suffix is appended to the version string ui/vite.config.ts19Sources: ui/src/main.tsx1-17 ui/src/domain/app.ts1-8 ui/vite.config.ts11-33
Certimate uses react-router-dom for navigation, with the main configuration residing in ui/src/routers/index.tsx (referenced via router import in App.tsx) ui/src/App.tsx21
The RootApp component in ui/src/App.tsx acts as the top-level provider shell ui/src/App.tsx28 It wraps the entire application with:
colorPrimary and colorBgBase to specific hex codes based on the theme ui/src/App.tsx51-58 It also defines responsive breakpoints for the layout ui/src/App.tsx61-81router object ui/src/App.tsx138The ConsoleLayout component provides the main authenticated application structure ui/src/pages/ConsoleLayout.tsx30
Layout.Sider containing the SiderMenu ui/src/pages/ConsoleLayout.tsx64-121getAuthStore().isValid to ensure only authenticated superusers can access the console, redirecting others to /login ui/src/pages/ConsoleLayout.tsx52-55Frontend Initialization & Shell Flow
Sources: ui/src/App.tsx28-142 ui/src/pages/ConsoleLayout.tsx30-169 ui/src/main.tsx1-17 ui/src/pages/login/Login.tsx57-67
Certimate supports light/dark themes and multiple languages.
The application maintains visual consistency across Ant Design and Tailwind CSS:
useBrowserTheme hook detects the user's preferred mode ui/src/App.tsx29useEffect hook adds/removes .light or .dark classes on the documentElement to trigger Tailwind's dark mode ui/src/App.tsx36-42App.tsx are synchronized with the selected theme (e.g., #17191c for colorBgBase in dark mode) ui/src/App.tsx51-58global.css file defines CSS variables for background, foreground, and primary colors that map to these theme states ui/src/global.css13-42The i18n system is powered by i18next.
manualChunks to optimize bundle size ui/vite.config.ts37-41useAntdLocale, useDayjsLocale, useZodLocale) ensure that third-party components match the selected application language ui/src/App.tsx32-34SettingsAppearance component handles language switching via i18n.changeLanguage ui/src/pages/settings/SettingsAppearance.tsx83-88Sources: ui/src/App.tsx29-105 ui/src/pages/settings/SettingsAppearance.tsx11-35 ui/vite.config.ts34-44 ui/src/global.css13-42
Certimate includes a client-side version checker to notify users of new releases.
The useVersionChecker hook manages the update logic ui/src/hooks/useVersionChecker.ts41:
pollingInterval ui/src/hooks/useVersionChecker.ts102extractSemver and compareVersions to determine if the remote version is newer than the current APP_VERSION ui/src/hooks/useVersionChecker.ts11-33The version info is displayed in various parts of the UI (Login, Console Header) using the AppVersion component ui/src/components/AppVersion.tsx11
Natural Language to Code Entity Space
Sources: ui/src/hooks/useVersionChecker.ts41-120 ui/src/domain/app.ts1-8 ui/vite.config.ts11-33
The frontend utilizes the PocketBase SDK for data persistence and authentication.
| Feature | Code Reference | Implementation Detail |
|---|---|---|
| PocketBase SDK | pocketbase | Main dependency for backend communication ui/package.json56 |
| Auth Store | getAuthStore() | Retrieves the PocketBase admin auth state ui/src/repository/admin.ts26 |
| Vite Proxy | ui/vite.config.ts | Proxies /api requests to the local backend http://127.0.0.1:8090 during development ui/vite.config.ts66-68 |
| Real-time | subscribe() | Subscribes to collection changes via pb.collection(collectionName).subscribe ui/src/repository/workflow.ts95-97 |
Data Flow: UI to Repository Layer
Sources: ui/src/repository/admin.ts26 ui/vite.config.ts66-68 ui/src/repository/workflow.ts95-97 ui/package.json56 ui/src/repository/_pocketbase.ts1-10
Refresh this wiki
This wiki was recently refreshed. Please wait 7 days to refresh again.