I’m messing around with a Shell application in React and wanting to load information from apps\/components that are added to the shell dynamically, i.e. via auto-discovery.<\/p>\n
Now, we’re using React for this example so we can create React apps using Vite for what we will call, our components, as these can be loaded into React as components. The reason to create these as standalone apps would be for use to develop against.<\/em><\/p>\n So let’s assume I have a main application, the Shell app and this can get routes for functionality (our apps\/components) which may get added later on in the development process, basically a pluggable type of architecture which just uses React components along with those components supplying routing information to allow us to plug them into the Shell.<\/p>\n To give it more context, I build a Shell application with Search and later on want to add a Document UI, so it’d be nice if the Document can be worked on separately and when ready, deployed to a specific locations where the Shell (upon refresh) can discover the new component and wire into the Shell.<\/p>\n Vite has a feature import.meta.glob<\/em> which we can use to discover our routes.tsx<\/em> that are deployed to a specific path, i.e.<\/p>\n This will return keys for the file paths and values being the functions that import from the files or modules. For example it might locate components such as<\/p>\n If eager<\/em> is missing (or false) then Vite lazy imports the functions and you’d then need to call them yourself, with eager:true<\/em>, Vite imports the modules immediately.<\/p>\n If we use something like this<\/p>\n Then we could use the routes via the react-router-dom in App.tsx, like this<\/p>\n and finally here’s an example routes.tsx file for our components<\/p>\n I’m messing around with a Shell application in React and wanting to load information from apps\/components that are added to the shell dynamically, i.e. via auto-discovery. Now, we’re using React for this example so we can create React apps using Vite for what we will call, our components, as these can be loaded into React […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243,735],"tags":[],"class_list":["post-12127","post","type-post","status-publish","format-standard","hentry","category-react","category-vite"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/12127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=12127"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/12127\/revisions"}],"predecessor-version":[{"id":12135,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/12127\/revisions\/12135"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=12127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=12127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=12127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\nconst modules = import.meta.glob<Record<string, unknown>>(\r\n '..\/..\/apps\/*\/src\/routes.tsx', { eager: true }\r\n);\r\n<\/pre>\n\r\napps\/search\/src\/routes.tsx\r\napps\/document\/src\/routes.tsx\r\napps\/export\/src\/routes.tsx\r\napps\/settings\/src\/routes.tsx\r\n<\/pre>\n
\r\n\r\nimport type { RouteObject } from 'react-router-dom';\r\n\r\nconst modules = import.meta.glob<Record<string, unknown>>(\r\n '..\/..\/apps\/*\/src\/routes.tsx', { eager: true }\r\n);\r\n\r\nexport const allAppRoutes: RouteObject[] = Object.values(modules)\r\n .flatMap((mod) => {\r\n const arr = Object.values(mod).find(\r\n (v): v is RouteObject[] => Array.isArray(v) && \r\n v.every(item => typeof item === 'object' && \r\n item !== null && 'path' in item && 'element' in item)\r\n );\r\n return arr || [];\r\n });\r\n<\/pre>\n\r\nconst baseRoutes = [\r\n { path: '\/', element: <div>Welcome to the Shell<\/div> },\r\n];\r\n\r\nconst routes = [\r\n ...baseRoutes,\r\n ...allAppRoutes,\r\n];\r\nreturn (\r\n <AuthContext.Provider value={auth}>\r\n <ShellLayout>\r\n <Suspense fallback={<div>Loading\u2026<\/div>}>\r\n <Routes>\r\n {routes.map(({ path, element }) => (\r\n <Route key={path} path={path} element={element} \/>\r\n ))}\r\n <\/Routes>\r\n <\/Suspense>\r\n <\/ShellLayout>\r\n <\/AuthContext.Provider>\r\n);\r\n<\/pre>\n\r\nimport SearchApp from '.\/App';\r\n\r\nexport const searchRoutes = [\r\n { path: '\/search\/*', element: <SearchApp \/> },\r\n];\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"