Skip to content

Commit 6c3795e

Browse files
ScriptedAlchemyScriptedAlchemy
committed
update express example
1 parent 679e278 commit 6c3795e

38 files changed

+361
-759
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,5 @@ buildServer
122122
**/cypress/screenshots/**
123123
**/cypress/results/**
124124
**/cypress/report/**
125+
/federated-express-routes/host/build/
126+
/federated-express-routes/remote/build/

‎checkChangedWorkspaces.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
const { exec } = require("child_process");
2-
exec("npx lerna ls --all --json", (error, stdout, stderr) => {
2+
exec("yarn list", (error, stdout, stderr) => {
33
if (error) {
44
console.log(`error: ${error.message}`);
55
return;
66
}
77

88
try {
99
const allPackages = JSON.parse(stdout);
10-
exec("npx lerna ls --all --since=origin/master --json", (error, stdout, stderr) => {
10+
exec("yarn list:changed", (error, stdout, stderr) => {
1111
if (error) {
1212
console.log(`error: ${error.message}`);
1313
return;

‎native-federation-core-microfrontend

‎nextjs-v13/checkout/next.config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ const NextFederationPlugin = require('@module-federation/nextjs-mf');
33
module.exports = {
44
webpack(config, options) {
55
const { webpack } = options;
6-
Object.assign(config.experiments, { topLevelAwait: true });
76
if (!options.isServer) {
87
//config.cache=false
98
config.plugins.push(
@@ -20,6 +19,9 @@ module.exports = {
2019
'./pages-map': './pages-map.js',
2120
},
2221
shared: {},
22+
extraOptions: {
23+
debug: true,
24+
}
2325
}),
2426
);
2527
}

‎nextjs-v13/checkout/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"start": "next start"
99
},
1010
"dependencies": {
11-
"@module-federation/nextjs-mf": "6.0.1",
11+
"@module-federation/nextjs-mf": "^7.0.2",
1212
"next": "13.3.1",
1313
"nextjs-shared": "file:../shared",
1414
"react": "18.2.0",

‎nextjs-v13/checkout/pages/[...slug].js

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
import dynamic from 'next/dynamic';
2-
const page = import('../realPages/[...slug]');
3-
const Page = dynamic(() => import('../realPages/[...slug]'));
4-
Page.getInitialProps = async ctx => {
5-
const getInitialProps = (await page).default?.getInitialProps;
6-
if (getInitialProps) {
7-
return getInitialProps(ctx);
8-
}
9-
return {};
10-
};
11-
export default Page;
1+
import { createFederatedCatchAll } from 'nextjs-shared';
2+
3+
export default createFederatedCatchAll();

‎nextjs-v13/checkout/pages/_app.js

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
1-
import dynamic from 'next/dynamic';
2-
const page = import('../realPages/_app');
3-
const AppPage = dynamic(() => import('../realPages/_app'));
4-
const Page = props => {
5-
return <AppPage {...props} />;
6-
};
7-
Page.getInitialProps = async ctx => {
8-
const getInitialProps = (await page).default?.getInitialProps;
9-
if (getInitialProps) {
10-
return getInitialProps(ctx);
1+
import App from 'next/app';
2+
import {lazy} from 'react'
3+
const Nav = process.browser ? lazy(
4+
() => {
5+
const mod = import('home/nav').catch(console.error);
6+
return mod;
117
}
8+
) : ()=>null
9+
10+
function MyApp({ Component, pageProps }) {
11+
return (
12+
<>
13+
<Nav />
14+
<Component {...pageProps} />
15+
</>
16+
);
17+
}
18+
MyApp.getInitialProps = async ctx => {
19+
const appProps = await App.getInitialProps(ctx);
20+
return appProps;
1221
};
13-
export default Page;
22+
23+
export default MyApp;

‎nextjs-v13/checkout/pages/checkout.js

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,44 @@
1-
import dynamic from 'next/dynamic';
2-
const page = import('../realPages/checkout');
1+
import React from 'react';
2+
import Head from 'next/head';
33

4-
const Page = dynamic(() => import('../realPages/checkout'));
5-
Page.getInitialProps = async ctx => {
6-
const getInitialProps = (await page).default?.getInitialProps;
7-
if (getInitialProps) {
8-
return getInitialProps(ctx);
9-
}
10-
return {};
4+
const Checkout = props => (
5+
<div>
6+
<Head>
7+
<title>checkout</title>
8+
<link rel="icon" href="/favicon.ico" />
9+
</Head>
10+
11+
<div className="hero">
12+
<h1>checkout page</h1>
13+
<h3 className="title">This is a federated page owned by localhost:3000</h3>
14+
<span>
15+
{' '}
16+
Data from federated <pre>getInitalProps</pre>
17+
</span>
18+
<br />
19+
<pre>{JSON.stringify(props, null, 2)}</pre>
20+
</div>
21+
<style jsx>{`
22+
.hero {
23+
width: 100%;
24+
color: #333;
25+
}
26+
.title {
27+
margin: 0;
28+
width: 100%;
29+
padding-top: 80px;
30+
line-height: 1.15;
31+
font-size: 20px;
32+
}
33+
.title,
34+
.description {
35+
text-align: center;
36+
}
37+
`}</style>
38+
</div>
39+
);
40+
Checkout.getInitialProps = async () => {
41+
const swapi = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
42+
return swapi;
1143
};
12-
export default Page;
44+
export default Checkout;

‎nextjs-v13/checkout/pages/index.js

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
1+
import { useEffect,lazy } from 'react';
2+
import { useRouter } from 'next/router';
13
import dynamic from 'next/dynamic';
2-
const page = import('../realPages/index');
3-
4-
const Page = dynamic(() => import('../realPages/index'));
4+
const Home = process.browser ? lazy(()=>import('home/home')) : ()=>null;
5+
const Page = props => {
6+
const router = useRouter();
7+
useEffect(() => {
8+
if (props.needsPush) {
9+
// since this plugin only supports client side, we need next to re-push the route, causing get initial props to run again - this time its the federated one and not the ssr'd placeholder
10+
router.push(router.route);
11+
}
12+
}, []);
13+
if (props.needsPush) {
14+
return null;
15+
}
16+
return <Home {...props} />;
17+
};
518
Page.getInitialProps = async ctx => {
6-
const getInitialProps = (await page).default?.getInitialProps;
7-
if (getInitialProps) {
8-
return getInitialProps(ctx);
19+
if (process.browser) {
20+
const page = (await import('home/home')).default;
21+
console.log('running get initial props client side');
22+
if (page.getInitialProps) {
23+
return page.getInitialProps(ctx);
24+
}
925
}
10-
return {};
26+
return {
27+
needsPush: true,
28+
};
1129
};
1230
export default Page;

‎nextjs-v13/checkout/pages/shop/mybag.js

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,39 @@
1-
import dynamic from 'next/dynamic';
2-
const page = import('../../realPages/shop/mybag');
1+
import React from 'react';
2+
import Head from 'next/head';
33

4-
const Page = dynamic(() => import('../../realPages/shop/mybag'));
5-
Page.getInitialProps = async ctx => {
6-
const getInitialProps = (await page).default?.getInitialProps;
7-
if (getInitialProps) {
8-
return getInitialProps(ctx);
9-
}
10-
return {};
4+
const MyBag = props => (
5+
<div>
6+
<Head>
7+
<title>My Bag</title>
8+
<link rel="icon" href="/favicon.ico" />
9+
</Head>
10+
11+
<div className="hero">
12+
<h1>my bag page</h1>
13+
<h3 className="title">This is a federated page, consumed by localhost:3001</h3>
14+
<br />
15+
</div>
16+
<style jsx>{`
17+
.hero {
18+
width: 100%;
19+
color: #333;
20+
}
21+
.title {
22+
margin: 0;
23+
width: 100%;
24+
padding-top: 80px;
25+
line-height: 1.15;
26+
font-size: 20px;
27+
}
28+
.title,
29+
.description {
30+
text-align: center;
31+
}
32+
`}</style>
33+
</div>
34+
);
35+
MyBag.getInitialProps = async () => {
36+
const swapi = await fetch('https://swapi.dev/api/people/1').then(res => res.json());
37+
return swapi;
1138
};
12-
export default Page;
39+
export default MyBag;

‎nextjs-v13/checkout/realPages/[...slug].js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎nextjs-v13/checkout/realPages/_app.js

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎nextjs-v13/checkout/realPages/checkout.js

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎nextjs-v13/checkout/realPages/index.js

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎nextjs-v13/checkout/realPages/shop/mybag.js

Lines changed: 0 additions & 39 deletions
This file was deleted.

0 commit comments

Comments
 (0)