Zen

Source string Source string

268/10000 · 268

The string is read only.

English Actions
ReactDOM.render(<App />, document.getElementById("root"));
This code imports React and ReactDOM libraries and renders the App component on the web page.
In the same `src` folder, create an `App.js` file with the following code:
// App.js
import React, { lazy, Suspense } from "react";
const ProductCatalog = lazy(() => import("productCatalog/ProductCatalog"));
const Cart = lazy(() => import("cart/Cart"));
const Checkout = lazy(() => import("checkout/Checkout"));
const Payment = lazy(() => import("payment/Payment"));
const App = () => {
return (
<div>
<h1>Module Federation + Composable Commerce</h1>
<Suspense fallback={<div>Loading...</div>}>
<ProductCatalog />
<Cart />
<Checkout />
<Payment />
</Suspense>
</div>
);
};
export default App;
This code imports React and its lazy and Suspense features, which allow loading components asynchronously. It also imports the remote modules from the containers using their names defined in the webpack configuration. It then renders each component on the web page using Suspense to handle loading states.
In your terminal or command-line interface, run `npm start` to start the development server and open your browser to `http://localhost:3000`. You should see a web page with a title and four loading messages.
Congratulations! You have successfully created a host application that consumes remote modules from different containers using Module Federation + Composable Commerce. The next steps are to create each container application and expose its PBC as a remote module. For simplicity, we will use React for each container application, but you can use any framework or library of your choice.
To create the Product Catalog container application, follow these steps:

Loading…

User avatar None

Source string added

  1. Module Federation Documentation
  2. Module Federation Documentation: Main Docs
  3. English
const App = () => {
return (
<div>
<h1>Module Federation + Composable Commerce</h1>
<Suspense fallback={<div>Loading...</div>}>
<ProductCatalog />
<Cart />
<Checkout />
<Payment />
</Suspense>
</div>
);
};
10 months ago
Browse all string changes

Things to check

Ellipsis

The string uses three dots (...) instead of an ellipsis character (…)

Reset

Glossary

English English
No related strings found in the glossary.

String information

Source string description
type: delimited block -
Flags
no-wrap, read-only
Source string location
src/en/modules/ROOT/pages/composable-commerce-PBC-edition.adoc:80
String age
10 months ago
Last updated
10 months ago
Source string age
10 months ago
Translation file
string 197