Skip to content

Commit 100111a

Browse files
jherrjherr
authored
Bunch of small fixes for the plugin (#50)
* Bunch of small fixes for the plugin * Unbumping versions * Fixing tests * Adding a changeset
1 parent 7f3c711 commit 100111a

File tree

14 files changed

+135
-93
lines changed

14 files changed

+135
-93
lines changed

‎.changeset/nasty-pants-dance.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@module-federation/dashboard": patch
3+
"@module-federation/dashboard-plugin": patch
4+
---
5+
6+
Removing the metadata requirement

‎dashboard-example/dsl/webpack.config.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,6 @@ module.exports = {
7171
},
7272
remote: "http://localhost:3002/remoteEntry.js",
7373
},
74-
reportFunction: (data) => {
75-
console.log("afterDone", data);
76-
},
7774
}),
7875
],
7976
};

‎dashboard-example/home/webpack.config.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,6 @@ module.exports = {
7575
},
7676
remote: "http://localhost:3001/remoteEntry.js",
7777
},
78-
reportFunction: (data) => {
79-
console.log("afterDone", data);
80-
},
8178
}),
8279
],
8380
};

‎dashboard-example/nav/webpack.config.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,6 @@ module.exports = {
7474
},
7575
remote: "http://localhost:3003/remoteEntry.js",
7676
},
77-
reportFunction: (data) => {
78-
console.log("afterDone", data);
79-
},
8077
}),
8178
],
8279
};

‎dashboard-example/search/webpack.config.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,6 @@ module.exports = {
7575
},
7676
remote: "http://localhost:3004/remoteEntry.js",
7777
},
78-
reportFunction: (data) => {
79-
console.log("afterDone", data);
80-
},
8178
}),
8279
],
8380
};

‎dashboard-example/utils/webpack.config.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ module.exports = {
4040
shared: require("./package.json").dependencies,
4141
}),
4242
new DashboardPlugin({
43-
filename: "dashboard.json",
4443
dashboardURL: "http://localhost:3000/api/update",
4544
metadata: {
4645
source: {
@@ -49,9 +48,6 @@ module.exports = {
4948
},
5049
remote: "http://localhost:3005/remoteEntry.js",
5150
},
52-
reportFunction: (data) => {
53-
console.log("afterDone", data);
54-
},
5551
}),
5652
],
5753
};

‎dashboard-fe/.fm-dashboard/apps.db‎

Lines changed: 9 additions & 5 deletions
Large diffs are not rendered by default.

‎dashboard-fe/README.md‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44

55
To run the dashboard and test it out use this command:
66

7-
```bash
8-
docker run -p 3000:3000 -it scriptedalchemy/mf-dashboard:latest
7+
```shell script
8+
> docker run -p 3000:3000 -it scriptedalchemy/mf-dashboard:latest
99
```
1010

1111
This will create temporary database inside the docker container in its `/data` directory. This command
1212

13-
```bash
14-
mkdir dashboard-data
15-
docker run -p 3000:3000 \
13+
```shell script
14+
> mkdir dashboard-data
15+
> docker run -p 3000:3000 \
1616
--mount type=bind,source="$(pwd)"/dashboard-data,target=/data \
1717
-t scriptedalchemy/mf-dashboard:latest
1818
```
@@ -21,20 +21,55 @@ This will create a sub-directory called `dashboard-data` and then store the Dash
2121

2222
You should then be able to connect to the dashboard at [http://localhost:3000](http://localhost:3000).
2323

24+
## Connecting the plugin
25+
26+
Bring the plugin into the project.
27+
28+
```shell script
29+
> yarn add @module-federation/dashboard-plugin -D
30+
```
31+
32+
Add this to the top of the Webpack configuration file.
33+
34+
```js
35+
const DashboardPlugin = require("@module-federation/dashboard-plugin");
36+
```
37+
38+
Add the `DashboardPlugin` to the `plugins` array.
39+
40+
```js
41+
plugins: [
42+
...
43+
new DashboardPlugin({
44+
dashboardURL: "http://localhost:3000/api/update",
45+
}),
46+
];
47+
```
48+
49+
More information on the plugin is [available on NPM](https://www.npmjs.com/package/@module-federation/dashboard-plugin).
50+
2451
## API
2552

2653
There are two endpoints. The primary GraphQL endpoint is on `/api/graphql`. And the upload endpoint for the plugin is in `/api/update`.
2754

2855
## Developing
2956

57+
The Module Federation Dashboard is a [NextJS application](https://nextjs.org/) that runs it's own GraphQL endpoint to serve data to the frontend code.
58+
59+
Install the dependencies.
60+
3061
```bash
3162
yarn
3263
```
3364

65+
Start up the development server.
66+
3467
```bash
3568
yarn dev
3669
```
3770

71+
Build the production server and start it.
72+
3873
```bash
3974
yarn build
4075
yarn start

‎dashboard-fe/pages/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -440,7 +440,7 @@ const Home = () => {
440440
Modules then you can import their metadata into this dashboard using
441441
the{" "}
442442
<a
443-
href="https://npmjs.com/package/@module-federation/dashboard-plugin"
443+
href="https://www.npmjs.com/package/@module-federation/dashboard-plugin"
444444
target="_blank"
445445
>
446446
@module-federation/dashboard-plugin

‎dashboard-plugin/FederationDashboardPlugin.js‎

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -161,46 +161,50 @@ class FederationDashboardPlugin {
161161
chunkDependencies,
162162
};
163163

164-
const graphData = convertToGraph(rawData);
165-
166-
const dashData = (this._dashData = JSON.stringify(graphData));
167-
168-
if (this._options.filename) {
169-
const hashPath = path.join(stats.outputPath, this._options.filename);
170-
fs.writeFile(hashPath, dashData, { encoding: "utf-8" }, () => {});
164+
let graphData = null;
165+
try {
166+
graphData = convertToGraph(rawData);
167+
} catch (err) {
168+
console.warn("Error during dashboard data processing");
169+
console.warn(err);
171170
}
172171

173-
const statsPath = path.join(stats.outputPath, "stats.json");
174-
fs.writeFile(
175-
statsPath,
176-
JSON.stringify(stats),
177-
{ encoding: "utf-8" },
178-
() => {}
179-
);
172+
if (graphData) {
173+
const dashData = (this._dashData = JSON.stringify(graphData));
180174

181-
if (this._options.dashboardURL) {
182-
new Promise((resolve) => {
183-
fetch(this._options.dashboardURL, {
184-
method: "POST",
185-
body: dashData,
186-
headers: {
187-
Accept: "application/json",
188-
"Content-type": "application/json",
189-
},
190-
})
191-
.then((resp) => resp.json())
192-
.then(resolve)
193-
.catch(() => {
194-
console.warn(
195-
`Error posting data to dashboard URL: ${this._options.dashboardURL}`
196-
);
197-
resolve();
198-
});
199-
});
200-
}
175+
if (this._options.filename) {
176+
const hashPath = path.join(stats.outputPath, this._options.filename);
177+
fs.writeFile(hashPath, dashData, { encoding: "utf-8" }, () => {});
178+
}
201179

202-
if (this._options.reportFunction) {
203-
// this._options.reportFunction(this._dashData);
180+
const statsPath = path.join(stats.outputPath, "stats.json");
181+
fs.writeFile(
182+
statsPath,
183+
JSON.stringify(stats),
184+
{ encoding: "utf-8" },
185+
() => {}
186+
);
187+
188+
if (this._options.dashboardURL) {
189+
new Promise((resolve) => {
190+
fetch(this._options.dashboardURL, {
191+
method: "POST",
192+
body: dashData,
193+
headers: {
194+
Accept: "application/json",
195+
"Content-type": "application/json",
196+
},
197+
})
198+
.then((resp) => resp.json())
199+
.then(resolve)
200+
.catch(() => {
201+
console.warn(
202+
`Error posting data to dashboard URL: ${this._options.dashboardURL}`
203+
);
204+
resolve();
205+
});
206+
});
207+
}
204208
}
205209
});
206210
}

0 commit comments

Comments
 (0)