This document covers the frontend application setup, build system configuration, and routing architecture of the Memos React application. It details how the application is initialized, configured, and how navigation is structured through React Router.
The Memos frontend is built using Vite as the primary build tool with React 18 and TypeScript. The application uses a modern JavaScript toolchain optimized for development speed and production performance.
| Category | Libraries | Purpose |
|---|---|---|
| Framework | react, react-dom | Core React framework |
| Build System | vite, @vitejs/plugin-react | Development server and bundling |
| Routing | react-router-dom | Client-side routing with data loading |
| Data Fetching | @tanstack/react-query | Async state and cache management |
| API Client | @connectrpc/connect, @connectrpc/connect-web | gRPC-Web client for backend communication |
| UI Components | @radix-ui/*, lucide-react | Accessible component primitives and icons |
| Styling | tailwindcss | Utility-first CSS framework |
| Internationalization | i18next, react-i18next | Multi-language support |
The application entry point is defined in web/src/main.tsx, which handles the initial setup and rendering of the React application web/src/main.tsx1-83
Before React renders, the application performs early initialization to prevent visual flashing:
applyThemeEarly(): Reads theme preference and applies it to the document before first paint web/src/main.tsx23applyLocaleEarly(): Loads saved locale preference to initialize i18next before rendering web/src/main.tsx24The application uses a hierarchical provider structure that establishes contexts in a specific order:
ErrorBoundary: Top-level error handling web/src/main.tsx63QueryClientProvider: Provides React Query client for data fetching web/src/main.tsx64InstanceProvider: Loads and provides instance configuration web/src/main.tsx65AuthProvider: Manages user authentication state and session web/src/main.tsx66ViewProvider: Manages UI view preferences web/src/main.tsx67AppInitializer: Coordinates async initialization of Instance and Auth contexts web/src/main.tsx68The AppInitializer component coordinates parallel initialization of context providers web/src/main.tsx27-59:
initStartedRef to prevent duplicate initialization web/src/main.tsx30-35initInstance() and initAuth() in parallel via Promise.all() web/src/main.tsx37-40useTokenRefreshOnFocus() to proactively refresh tokens when the window regains focus, specifically to prevent 401 errors web/src/main.tsx46useLiveMemoRefresh() to listen for memo changes via SSE and invalidate caches web/src/main.tsx49null until both isIdentityInitialized and isProfileInitialized are true web/src/main.tsx54-56Application Initialization Flow
Sources: web/src/main.tsx23-83 web/src/App.tsx62-71
The App component serves as the root container for all routes web/src/App.tsx11-72
useUserTheme() and useUserLocale() hooks web/src/App.tsx16-17cleanupExpiredOAuthState() on mount to remove stale states web/src/App.tsx20-22/auth/signup if the instance profile indicates needsSetup web/src/App.tsx28-32additionalStyle and additionalScript from instance settings into the DOM web/src/App.tsx34-49document.title and favicon based on customProfile settings web/src/App.tsx52-60Sources: web/src/App.tsx1-72
The application uses React Router with a hierarchical routing structure defined in web/src/router/index.tsx web/src/router/index.tsx42-124
Routes are organized into a tree structure using routeConfig web/src/router/index.tsx42:
RootLayout and MainLayout for consistent UI web/src/router/index.tsx73-119The application uses specialized components to protect routes web/src/router/index.tsx7-13:
RequireAuthRoute: Ensures the user is authenticated before accessing private pages like /archived, /setting, or /inbox web/src/router/index.tsx89 web/src/router/index.tsx103RequireGuestRoute: Ensures the user is not authenticated for /auth sub-routes web/src/router/index.tsx59RequireInstanceInitializationRoute: Ensures the instance is initialized before accessing specific pages web/src/router/index.tsx56 web/src/router/index.tsx83LandingRoute: Handles the index path web/src/router/index.tsx79Components are loaded lazily using lazyWithReload, which catches chunk loading errors and attempts a reload web/src/router/index.tsx16-31
Route Tree and Layout Nesting
Sources: web/src/router/index.tsx42-124 web/src/router/routes.ts1-12
The RootLayout provides the core application shell web/src/layouts/RootLayout.tsx30-80:
Navigation component as a fixed sidebar on sm screens web/src/layouts/RootLayout.tsx61-71filter parameter web/src/layouts/RootLayout.tsx40-49The MainLayout manages the primary content area and the MemoExplorer web/src/layouts/MainLayout.tsx21-101:
MemoExplorerContext (home, explore, archived, profile) based on the current path web/src/layouts/MainLayout.tsx32-38The Navigation component builds the primary navigation links web/src/components/Navigation.tsx26-143:
currentUser presence web/src/components/Navigation.tsx80-82useNotifications() web/src/components/Navigation.tsx57-71Sources: web/src/layouts/RootLayout.tsx1-80 web/src/layouts/MainLayout.tsx21-101 web/src/components/Navigation.tsx1-143
Refresh this wiki
This wiki was recently refreshed. Please wait 6 days to refresh again.