I'm currently developing a micro-frontend application using React, webpack and module federation. It consists of one container app, and two "children" / remotes. The container app consist of an app bar, empty side drawer and main div, and the remotes it imports expose one independent React app for the actual page content, plus one single component which should render the navigation items for the side drawer, each:
The remote MFEs have their own Redux store each, which works fine for the page content part, as this includes an App.tsx with a Redux store provider. So far, also the navigation component worked fine, since all it did was push routes into the browser history.
Now I've run into a problem: the exposed navigation component of one remote also has to select data from it's Redux store and dispatch actions. This does not work so far, since it's a single exposed component, and when it's rendered in the container app, there is not Redux store provider for the childs Redux store. How could I solve this? I've read a few times that sharing redux state between micro frontends is a bad practice, so I was trying to avoid this so far. The data the navigation needs access to is basically just a boolean, which indicates that the application is in an elevated "service mode", making the remote MFE render a few more items (e.g. a "delete all" button which is usually hidden). So maybe this could also be shared through local storage or similar, what are some best practices here?
Here's my webpack config and some relevant code for better understanding:
// container app webpack config (development)
...
plugins: [
new ModuleFederationPlugin({
name: "container_app",
remotes: {
config_app: "config_app#http://localhost:3001/remoteEntry.js",
commissioning_app: "commissioning_app#http://localhost:3002/remoteEntry.js",
},
shared: {
...
},
}),
],
...
// config_app webpack config (development)
...
plugins: [
new ModuleFederationPlugin({
name: "config_app",
filename: "remoteEntry.js",
exposes: {
"./ConfigApp": "./src/bootstrap",
"./ConfigAppNavigation": "./src/components/UI/Misc/ConfigAppNavigation",
},
shared: {
...
},
}),
],
...
// MiniDrawer.tsx in container_app, which uses ConfigAppNavigation to render the navigation items
// (depending on current route, otherwise navigation items are rendered from other MFE child)
...
const ConfigAppNavigation = lazy(() => import("config_app/ConfigAppNavigation"));
const MiniDrawer: React.FC = () => {
...
<Switch>
...
<Route path="/">
<Suspense fallback={<span>loading ...</span>}>
<ConfigAppNavigation onNavigate={onDrawerClose} />
</Suspense>
</Route>
</Switch>
...
}
...
And as stated, before switching to an MFE design, the component which is now ConfigAppNavigation selected / changed the mentioned boolean value from config_app's Redux store, which now with this setup doesn't work.
Related
The new Relay hooks API has put a focus on the React pattern of "render-as-you-fetch" and so far I am really liking this. Relay's useQueryLoader and usePreloadedQuery hooks make implementing this most of the time pretty straight forward.
I am however, struggling to find a good pattern on how to implement this pattern when it comes to routing. There are two typical situations that I find makes this difficult to implement.
Situation A:
User loads a home page (example.com/)
User go deep down one part of the app tree (example.com/settings/user/security/authentication)
They then click on a link to take them to a totally unrelated part of their app (example.com/blog/post-1)
Situation B:
User uses the URL bar to go to a section of the app instead of using a link (example.com/blog/post-1)
With these examples there are two outcomes, either the user goes to a route (example.com/blog/post-1) either via a nest child component or directly via the URL. So the way we are fetching data for this route must support both of these approaches.
I assume we would want to trigger the fetch as early as possible for this route, so when the user clicks on the link or as soon as we detect this route on page load.
There are three ideas I can think of to implement this:
Use a fetch-then-render pattern instead (such as Relay's useLazyLoadQuery hook)
Store a function (say in Context) and have all links for this route call this function in their onClick method, and also have a useEffect for this route that calls the function if there is no data loaded, or the reference for the query is stale
Use render-as-you-fetch functions but implement them to support fetch-then-render also
Approach 1:
This defeats the purpose of render-as-you-fetch pattern however is an easy way out and more likely to be a "cleaner" way to implement fetching data for a route.
Approach 2:
In practice I have found this really hard to implement. Often the link to go to the route is disconnected from part of the component tree where the component renders the route is. And using a Context means that I have to manage different loadData functions for specific routes (which can be tricky when variables etc are involved).
Approach 3:
This is what I have been doing currently. In practice, it often results in being able to pass the load data function to a near by component, however if the route is accessed by a disconnected component, by the URL, or a page reload etc then the components falls back to calling the load data function in a useEffect hook.
Does anyone have any other ideas or examples on how they implemented this?
An update on this topic, React Router v6 recently introduced support for route loaders, allowing preload Relay queries based on routing.
Example:
import { StrictMode, Suspense } from "react";
import ReactDOM from "react-dom/client";
import {
createBrowserRouter,
Link,
RouterProvider,
useLoaderData,
} from "react-router-dom";
import graphql from "babel-plugin-relay/macro";
import {
loadQuery,
PreloadedQuery,
RelayEnvironmentProvider,
usePreloadedQuery,
} from "react-relay";
import { environment } from "./environment";
import { srcGetCurrentUserQuery } from "./__generated__/srcGetCurrentUserQuery.graphql";
const getCurrentUser = graphql`
query srcGetCurrentUserQuery {
viewer {
id
fullname
}
}
`;
const Test = () => {
const data = usePreloadedQuery(getCurrentUser, preloadedQuery);
const preloadedQuery = useLoaderData() as PreloadedQuery<srcGetCurrentUserQuery>;
return (
<Suspense fallback={<>Loading...</>}>
<Viewer preloadedQuery={preloadedQuery} />
</Suspense>
);
};
const router = createBrowserRouter([
{
element: (
<>
{"index"} <br /> <Link to={"/test"}>Go test</Link>
</>
),
path: "/",
},
{
element: <Test />,
path: "test",
loader: async () => {
return Promise.resolve(
loadQuery<srcGetCurrentUserQuery>(environment, getCurrentUser, {})
);
},
},
]);
ReactDOM.createRoot(document.getElementById("root")!).render(
<StrictMode>
<RelayEnvironmentProvider environment={environment}>
<RouterProvider router={router} />
</RelayEnvironmentProvider>
</StrictMode>
);
More information about React Router loaders here: https://reactrouter.com/en/main/route/loader
I've also been struggling with understanding this. I found these resources particularly helpful:
Ryan Solid explaining how to implement fetch-as-you-render
The ReactConf 2019 Relay demo
The Relay Issue Tracker example
What I understand they aim for you to achieve is:
Start loading your query before and outside of the render path
Start loading your component at the same time as the query (code splitting)
Pass the preloaded query reference into the component
The way it's solved in the Relay demo is through something they call an "Entrypoint". These are heavily integrated into their router (you can see this in the Issue Tracker example). They comprise the following components:
A route definition (e.g. /items)
A lazy component definition (e.g. () => import('./Items'))
A function that starts the query loading (e.g. () => preloadQuery(...))
When the router matches a new path, it starts the process of loading the lazy component, as well as the query. Then it passes both of these into a context object to get rendered by their RouterRenderer.
As for how to implement this, it seems like the most important rules are:
Don't request data inside components, request it at the routing or event level
Make sure data and lazy components are requested at the same time
A simple solution appears to be to create a component that is responsible for collecting the data, and then rendering the respective component. Something like:
const LazyItemDetails = React.lazy(() => import('./ItemDetails'))
export function ItemEntrypoint() {
const match = useMatch()
const relayEnvironment = useEnvironment()
const queryRef = loadQuery<ItemDetailsQuery>(relayEnvironment, ItemDetailsQuery, { itemId: match.itemId })
return <LazyItemDetails queryRef={queryRef} />
}
However there are potential issues that the Issue Tracker example adds solutions to:
The lazy component may have previously been requested so should be cached
The data fetching sits on the render path
Instead the Issue Tracker solution uses a router which does the component caching, and the data fetching at the same time as the route is matched (by listening to history change events). You could use this router in your own code, if you're comfortable with maintaining your own router.
In terms of off the shelf solutions, there doesn't appear to be a router that implements the patterns required to do fetch-as-you-render.
TL;DR Use the Relay Issue Tracker example router.
Bonus: I've written a blog post about my process of understanding this pattern
I'm using Gatsby and I want build a single page site, so without create pages. For achieve this I edited gatsby-node.js with the following code:
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path === "/") {
page.matchPath = "/*"
createPage(page)
}
}
in that case, each request is re-routed to the index.js page, which is the only one.
Then, in the index.js page I have:
const IndexPage = () => {
const intl = useIntl()
const locale = intl.locale
return (
<BGTState>
<BlogState>
<Layout>
<Router>
<Home path={`${locale}/`} />
<Section path={`${locale}/:sectionSlug`} />
<Collection path={`${locale}/:sectionSlug/:collectionSlug`} />
<Season
path={`${locale}/:categorySlug/:collectionSlug/:seasonSlug`}
/>
<Product
path={`${locale}/:categorySlug/:collectionSlug/:seasonSlug/:prodSlug`}
/>
<Blog path={`${locale}/blog`} />
<Article path={`${locale}/blog/:articleSlug`} />
<NotFound default />
</Router>
</Layout>
</BlogState>
</BGTState>
)
}
as you can see, I have different routers that load a specific component based on the url.
I have prefixed each path with the current locale to match the correct path.
This mechanism is working fine for the home page only, but for the other links doesn't work. Infact, if I visit something like:
http://localhost:3001/en/category-home/prod-foo
which must load the Collection component, the site simply redirect to:
http://localhost:3001/en
and display the Home component again.
What I did wrong?
UPDATE
Page Structure:
As you can see I have just the index.js which handle all requests as I configured in the gatby-node.js.
If I remove the localization plugin, at least using this configuration:
{
resolve: `gatsby-plugin-intl`,
options: {
// Directory with the strings JSON
path: `${__dirname}/src/languages`,
// Supported languages
languages: ["it", "en", "ci", "fr"],
// Default site language
defaultLanguage: `it`,
// Redirects to `it` in the route `/`
//redirect: true,
// Redirect SEO component
redirectComponent: require.resolve(
`${__dirname}/src/components/redirect.js`
),
},
},
and I don't prefix the url with intl.locale, everything is working fine. But adding redirect: true in the plugin configuration, and prefixing the link with the locale, the site redirect me to the home component.
If you are creating a SPA (Single Page Application, notice the single) you won't have any created pages but index. You are trying yo access to a /category page that's not created because of:
if (page.path === "/") {
page.matchPath = "/*"
createPage(page)
}
That's why your routes don't work (or in other words, only the home page works).
Adapt the previous condition to your needs to allow creating more pages based on your requirements.
I'm using Gatsby and I want build a single page site, so without
create pages. For achieve this I edited gatsby-node.js with the
following code:
It's a non-sense trying to build a SPA application with Gatsby (without creating pages) but then complaining because there's not collection page created.
Make sure that you understand what you are doing, it seems clearly that you need to create dynamically pages for each collection, season, and product so your approach to create SPA won't work for your use-case.
It's possible to keep just index.js without overcomplicating thing? I
just want to understand why my code isn't working 'cause I've passed
the correct url... Removing the localization Gatsby works, so I
suspect there is a localization problem
The only way that http://localhost:3001/category-home/prod-foo (removing the localization) could be resolved is by creating a folder structure such /pages/category-home/prod-foo.js (since Gatsby extrapolates the folder structure as URLs), so, if you want to use localization using your approach, add a structure such en/pages/category-home/prod-foo.js and es/pages/category-home/prod-foo.js (or the whatever locale), and so on. In my opinion, this is overcomplexitying stuff since, for every category, you'll need to create 2 (even more depending on the locales) files.
Gatsby allows you to create dynamic pages and interpolate the locale automatically using built-in plugins on the process, creating each file for the specifically defined locales.
I am using the electron-react-boilerplate and want to open a component in a new BrowserWindow. There are multiple questions and answers on how to do this, but none of them are working after packaging the app.
Questions / Answers I've Found:
How to handle multiple windows in Electron application with React.JS?
electron-react-boilerplate :sub window on clicking a button
https://stackoverflow.com/a/47926513/3822043
In my component I have tried to use the following lines to open a new window to a different route.
wind.loadURL(`file://${__dirname}/app.html#/video`)
wind.loadURL(`file://${Path.join(__dirname, '../build/app.html#/video')}`)
wind.loadURL(`file://${Path.join(__dirname, '../build/index.html#/video')}`)
The first one works when running yarn dev, but not in production. They all throw ERR_FILE_NOT_FOUND for the respective paths.
This is how my routes are set up:
export default function Routes() {
return (
<App>
<HashRouter>
<Route exact path={routes.HOME} component={HomePage} />
<Route path={routes.VIDEO} component={VideoPage} />
</HashRouter>
</App>
);
}
Is there an easy way to allow routing when opening a new BrowserWindow using React's router?
Great timing. I was in the same boat the past few days, just figured it out. Except, I didn't change to HashRouter like you did. Rather I left all the routing stuff as the default electron-react-boilerplate comes with, like ConnectedRouter. Maybe either way works.
https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/1853#issuecomment-674569009
__dirname only works in dev. I used DebugTron to check what URLs were being loaded for each resource, and it was file://path/to/app.asar/something. Then I figured out how to get the path to the asar. This worked for me in both dev and prod, regardless of where the application is located. You also need to set nodeIntegration: true. Tested on macOS.
const electron = require("electron")
//...
win.loadURL(`file://${electron.remote.app.getAppPath()}/app.html#/yourroutename`)
Fuller example in case anyone is also wondering how to load another page and pass arguments to it:
import routes from '../constants/routes.json'
const electron = require("electron")
// ...
var win = new BrowserWindow({
width: 400, height: 400,
webPreferences: { nodeIntegration: true }
})
win.loadURL(`file://${electron.remote.app.getAppPath()}/app.html#${routes["ROOM"]}?invitationCode=${encodeURIComponent(code)}`)
win.show()
and in the component the route loads:
const queryString = require('query-string')
// ...
constructor(props) {
super(props)
const params = queryString.parse(location.hash.split("?")[1])
this.invitationCode = params.invitationCode
}
I am currently trying to code split for react server side rendering.
Everything works fine except the refreshing part. When I refresh the page, Everything shows in server side. However, the split second right before client side takes over the lazy loading component is gone then it show up when client side start rendering again.
"webpack": "^4.4.0",
"mini-css-extract-plugin": "^0.4.0",
react-loadable.json part
{
"undefined": [
{
"id": 2,
"name": null,
"file": "styles.css",
"publicPath": "/dist/styles.css"
}
...
]
}
webpack chunk option for style
styles: {
name: 'styles',
test: /.css$/,
chunks: 'all',
enforce: true
},
Server.js react-loadable setup part
let modules = []
const context = {}
const htmlRoot = (
<Provider store={store}>
<StaticRouter location={urlPath} context={context}>
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
<AppRoot />
</Loadable.Capture>
</StaticRouter>
</Provider>
)
const bundles = getBundles(stats, modules)
console.log(bundles, modules)
Even though all the pages are loaded correctly, the bundles variables are always empty array. Anyone know how to fix this problem? or what might cause this problem?
Your problem is that you define your htmlRoot, but you don't render it before calling getBundles. Loadable.Capture collects the bundles when the app (and so itself) is rendered, that's why your modules array is empty. Call getBundles after you rendered the app (e.g. ReactDOMServer.renderToString) and the modules array should be populated.
I also found that there are some undefined entries in react-loadable.json, but they don't cause any problems for react-loadable.
I wonder what type of navigation works well with login authentication? Right now i use conditional rendering for certain pages or components to display and through
if (this.state.loggedIn) {
return <UI loggedIn={this.state.loggedIn} showUser=
{this.state.showUser} logout={this.logout.bind(this)} />;
};
i can render something after the validation. What would it look like if i wanted to render a couple of more different pages? Should i put a state on each page that will change on onclicks and cause the app to render desired page?
Thank you lads
This is an issue which nearly every modern application must tackle. Because of this, many libraries have already solved these issues for you. Take this code for example which uses react-router:
In my example I am showing you what the routes would look like in a routes.js file and then a separate file for what the acl would look like. The acl is a function which is passed into the onEnter of each route you want to protect. You can call it anything you like.
routes.js
import React from 'react';
import { hashHistory, Router, Route, IndexRoute } from 'react-router';
import { acl } from './util/acl-util';
import AppContainer from './containers/app-container';
import DashboardPage from './pages/dashboard-page';
export default class Routes extends React.Component {
render() {
return (
<Router history={hashHistory}>
<Route path="/" component={AppContainer}>
{/* NON-AUTH ROUTES */}
<Route
path="login"
components={{
main: LoginPage,
aside: null,
header: this.getHeader,
}}
/>
{/* AUTH-REQUIRED ROUTES */}
<Route
onEnter={acl}
path="dashboard"
components={{ main: DashboardPage }}
/>
</Router>
);
}
}
acl-util.js
import { hasAuth } from './auth-util';
export function acl(nextState, replace) {
const { pathname, search } = nextState.location;
if (!hasAuth(theState)) {
window.alert(
'Please Log in!'
);
replace(`/login?loginRedirect=${encodeURIComponent(pathname + search)}`);
}
}
I threw this example together from cutting out part of my code that won't apply directly to this concept - and therefore this code won't run as is. You'll need to define your pages, and set up a store etc.
You'd need to define a hasAuth function which can look into your state and determine whether a user is authenticated. For my hasAuth function I am looking for a jwt token and parsing the date, if the date is still in the future, I know they are still authed and any subsequent rest api calls will work.
I know you weren't asking for a certain library, but I recommend this because the app I took this code from has dozens of routes and the acl function also implements a role matrix which looks at what a user can and cannot do based on their jwt token. Our application is pretty massive and this approach keeps it organized.
Without having something like react-router, you're right, you'd need to manually manage which page is showing and manually check for auth state in each component or make a parent component to do it. In my example the "parent component to manage it" is react-router and my onEnter method called acl. In traditional applications acl stands for access control list - you can expand the code in whichever way you like.
edit:
as someone mentioned in a comment about . Your frontend application is only as secure as the backend service it is grabbing data from or posting data to. In my example, the react code attempts to mirror the auth state in the jwt token. But, at the end of the day, your real security will only be provided by your back end services. Just because the frontend thinks a user can be logged in, shouldn't mean the backend should assume they are - you need backend authentication since all frontend application state can be modified by technical users.