Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0254fc8

Browse files
authored
feat: add modernjs demo (#2961)
* feat: add basic modernjs demo * feat: add modernjs with medusa demo * chore: add readme and lock file * chore: update lock file * chore: translate README --------- Co-authored-by: zhanghang.heal <zhanghang.heal@bytedance.com>
1 parent 7be6b3f commit 0254fc8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+28183
-133
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@ https://scriptedalchemy.medium.com/
6969
- [x] [vue3-demo-federation-with-vite](./vue3-demo-federation-with-vite/README.md) &mdash; wepack and vite federation integrated projects, webpack/vite both play the role of host and remote
7070
- [x] [quasar-cli-vue3-webpack-javascript](./quasar-cli-vue3-webpack-javascript/README.md) &mdash; Module federation integration with Quasar apps running vue3 using quasar-cli (javascript)
7171
- [x] [UMD Federation](./umd-federation) &mdash; Support importing umd remote module
72+
- [x] [Modernjs](./modernjs) &mdash; Basic Module Federation Usage in Modern.js Framework
73+
- [x] [Modernjs Medusa](./modernjs-medusa) &mdash; Using Medusa in Modern.js Framework
7274

7375
**Module Federation Examples** covered by e2e tests with **Cypress** framework, more info about structure and configuration 👉 [here](./cypress/README.md) 👈
7476

‎modernjs-medusa/.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
registry=https://registry.yarnpkg.com

‎modernjs-medusa/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Modern.js Medusa Demo
2+
3+
# Setup
4+
5+
1. `yarn install`
6+
2. Login to medusa https://medusa.codes/
7+
3. Generate Read/Write Tokens and save https://app.medusa.codes/settings
8+
4. Copy Read/Write Tokens and add them to `.env` in the root of this directory.
9+
5. Run a build with yarn start, then go check medusa.
10+
11+
# Running Demo
12+
13+
Run `yarn build && yarn serve`
14+
15+
- [Host is on localhost:3001](http://localhost:3001/)
16+
- [Provider is on localhost:3002](http://localhost:3002/)
17+
18+
<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/shloeh7nuhonuhog/medusa.jpeg" width="800"/>

‎modernjs-medusa/host/.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: ['@modern-js'],
4+
};

‎modernjs-medusa/host/.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
lts/gallium
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
const pkg = require('./package.json');
4+
5+
module.exports = class AdaptMedusaPlugin {
6+
apply(compiler) {
7+
compiler.hooks.thisCompilation.tap('AdaptMedusaPlugin', compilation => {
8+
compilation.hooks.processAssets.tapPromise(
9+
{
10+
name: 'AdaptMedusaPlugin',
11+
stage: compilation.constructor.PROCESS_ASSETS_STAGE_ANALYSE,
12+
},
13+
async () => {
14+
fs.writeFileSync(
15+
path.resolve(__dirname, 'node_modules/.modern-js/package.json'),
16+
JSON.stringify(pkg, null, 2),
17+
);
18+
},
19+
);
20+
});
21+
}
22+
}

‎modernjs-medusa/host/README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Your App
2+
3+
## Setup
4+
5+
Install the dependencies:
6+
7+
```bash
8+
yarn install
9+
```
10+
11+
## Get Started
12+
13+
Start the dev server:
14+
15+
```
16+
yarn dev
17+
```
18+
19+
Enable optional features or add a new entry:
20+
21+
```
22+
yarn new
23+
```
24+
25+
Build the app for production:
26+
27+
```
28+
yarn build
29+
```
30+
31+
Preview the production build locally:
32+
33+
```
34+
yarn serve
35+
```
36+
37+
For more information, see the [Modern.js documentation](​https://modernjs.dev/en).
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import fs from 'fs';
2+
import appTools, { defineConfig } from '@modern-js/app-tools';
3+
import DashboardPlugin from '@module-federation/dashboard-plugin';
4+
import AdaptMedusaPlugin from './AdaptMedusaPlugin';
5+
6+
const tokens = fs
7+
.readFileSync(__dirname + '/../.env')
8+
.toString('utf-8')
9+
.split('\n')
10+
.map(v => v.trim().split('='));
11+
process.env.DASHBOARD_READ_TOKEN = tokens.find(([k]) => k === 'DASHBOARD_READ_TOKEN')[1];
12+
process.env.DASHBOARD_WRITE_TOKEN = tokens.find(([k]) => k === 'DASHBOARD_WRITE_TOKEN')[1];
13+
process.env.DASHBOARD_BASE_URL = tokens.find(([k]) => k === 'DASHBOARD_BASE_URL')[1];
14+
15+
const dashboardURL = `${process.env.DASHBOARD_BASE_URL}/update?token=${process.env.DASHBOARD_WRITE_TOKEN}`;
16+
17+
// https://modernjs.dev/en/configure/app/usage
18+
export default defineConfig({
19+
server: {
20+
port: 3001,
21+
},
22+
dev: {
23+
// set publicPath
24+
assetPrefix: 'http://localhost:3001/',
25+
},
26+
runtime: {
27+
router: true,
28+
},
29+
source: {
30+
// automatically generated asynchronous boundary via Dynamic Import, allowing the page code to consume remote modules generated by the module federation.
31+
enableAsyncEntry: true,
32+
},
33+
tools: {
34+
webpack: (config, { webpack, appendPlugins }) => {
35+
appendPlugins([
36+
new webpack.container.ModuleFederationPlugin({
37+
name: 'host',
38+
remotes: {
39+
provider: DashboardPlugin.clientVersion({
40+
currentHost: 'host',
41+
remoteName: 'provider',
42+
dashboardURL,
43+
}),
44+
},
45+
shared: {
46+
react: { singleton: true },
47+
'react-dom': { singleton: true },
48+
},
49+
}),
50+
new DashboardPlugin({
51+
versionStrategy: `${Date.now()}`,
52+
filename: 'dashboard.json',
53+
dashboardURL,
54+
metadata: {
55+
clientUrl: process.env.DASHBOARD_BASE_URL,
56+
baseUrl: 'http://localhost:3001',
57+
source: {
58+
url: 'https://github.com/module-federation/federation-dashboard/tree/master/modernjs/modernjs/host',
59+
},
60+
remote: 'http://localhost:3001/remoteEntry.js',
61+
},
62+
}),
63+
// DashboardPlugin will read package.json , but modern.js has temp entry which will cause dashboard-plugin/convertToGraph.js:118:43 has error
64+
new AdaptMedusaPlugin(),
65+
]);
66+
},
67+
},
68+
plugins: [appTools()],
69+
});

‎modernjs-medusa/host/package.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "modernjs-medusa-host",
3+
"version": "0.1.0",
4+
"scripts": {
5+
"reset": "npx rimraf ./**/node_modules",
6+
"dev": "modern dev",
7+
"build": "modern build",
8+
"start": "modern start",
9+
"serve": "modern serve",
10+
"new": "modern new",
11+
"lint": "modern lint",
12+
"prepare": "husky install",
13+
"upgrade": "modern upgrade"
14+
},
15+
"engines": {
16+
"node": ">=16.18.1"
17+
},
18+
"lint-staged": {
19+
"*.{ts,tsx}": [
20+
"node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
21+
],
22+
"*.{js,jsx,mjs,mjsx,cjs,cjsx}": [
23+
"node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
24+
]
25+
},
26+
"eslintIgnore": [
27+
"node_modules/",
28+
"dist/"
29+
],
30+
"dependencies": {
31+
"@modern-js/runtime": "2.13.4",
32+
"react": "~18.2.0",
33+
"react-dom": "~18.2.0"
34+
},
35+
"devDependencies": {
36+
"@modern-js/app-tools": "2.13.4",
37+
"@modern-js/eslint-config": "2.13.4",
38+
"@modern-js/tsconfig": "2.13.4",
39+
"@modern-js-app/eslint-config": "2.13.4",
40+
"@module-federation/dashboard-plugin": "^2.8.0-beta.6",
41+
"lint-staged": "~13.1.0",
42+
"prettier": "~2.8.1",
43+
"husky": "~8.0.1",
44+
"rimraf": "~3.0.2",
45+
"typescript": "~4.9.4",
46+
"@types/jest": "~29.2.4",
47+
"@types/node": "~16.11.7",
48+
"@types/react": "~18.0.26",
49+
"@types/react-dom": "~18.0.10"
50+
}
51+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// eslint-disable-next-line import/no-commonjs
2+
module.exports = {
3+
root: true,
4+
extends: ['@modern-js-app'],
5+
parserOptions: {
6+
tsconfigRootDir: __dirname,
7+
project: ['../tsconfig.json'],
8+
},
9+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /