feat: add step 4 exercises, code and slides #27
Conversation
|
|
||
| # Running Demo | ||
|
|
||
| Make sure that you have installed all dependencies by running `yarn install` from the **root folder of the workshop**! |
There was a problem hiding this comment.
can we use plain npm instead of yarn?
Just to reduce the amount of software needed to run this workshop. Does it gives any benefit in this context?
There was a problem hiding this comment.
For now for easier handling of monorepo inside of monorepo cases as well as incremental approach of this workshop we should stick with yarn (it handles it a bit better) but I agree that down the line maybe we should try to simplify this and revert to plain npm at some point but that will take some additional work. At least we are not using docker in this workshop which makes it much lighter than some other ones.
| shared: { | ||
| react: { | ||
| requiredVersion: | ||
| require('./package.json').dependencies.react, |
There was a problem hiding this comment.
can we require the package.json just once?
There was a problem hiding this comment.
maybe doing something like this on top of this file:
const packageJsonDependencies = require('./package.json').dependencies
| } | ||
| return config | ||
| }, | ||
| // your original next.config.js export |
There was a problem hiding this comment.
I think this comment is useless now
| @@ -754,6 +754,100 @@ module.exports = { | |||
|
|
|||
| --- | |||
|
|
|||
| # Step 4: Setting up Shared Modules Example | |||
There was a problem hiding this comment.
Are we planning to write somewhere that currently MF does not support Next's app directory structure?
There was a problem hiding this comment.
interesting, could you elaborate a little bit? is there a link I can take a look at?
| const HtmlWebpackPlugin = require('html-webpack-plugin') | ||
| const ModuleFederationPlugin = | ||
| require('webpack').container.ModuleFederationPlugin | ||
| const deps = require('./package.json').dependencies |
| "lint": "next lint" | ||
| }, | ||
| "dependencies": { | ||
| "@module-federation/nextjs-mf": "5.2.1", |
There was a problem hiding this comment.
This version of the plugin is too old, the newest one is 7.0.6
There was a problem hiding this comment.
good point. I tried 7.0.6 initially while working on a different exercise, but something wasn't working out of the box, so we used a different version in all the exercises. since the plugin is still somewhat experimental, I created a separate ticket to upgrade across all the exercises: #32
| import LayoutBox from '../components/nextjs-layout-box' | ||
| import Table from '../components/nextjs-table' | ||
|
|
||
| const Nav = dynamic(() => import('remote/Nav'), { |
There was a problem hiding this comment.
Note for the future: next's dynamic should be replaced with plain react's dynamic import on the new versions of the plugin (I'm sure about this for v7, I don't remember if it's the same for v6)
There was a problem hiding this comment.
good to know, thanks!
| "version": "1.0.0", | ||
| "private": true, | ||
| "dependencies": { | ||
| "react": "18.1.0", |
There was a problem hiding this comment.
Is it intended to use two different react versions? On next we are using version 18.2.0
There was a problem hiding this comment.
good catch! I changed it to test the singleton warning, but forgot to change back. 😬 thanks! 🙏
| > | ||
| <ul> | ||
| { links.map((link, i) => ( | ||
| <li key={i} style={{display: "inline-block", padding: "10px 20px" }}> |
There was a problem hiding this comment.
ok, this is just an example, but using an index as a key is not the best
There was a problem hiding this comment.
I agree, but as noticed it is just for this example purposes.
| shared: { | ||
| react: { | ||
| requiredVersion: | ||
| require('./package.json').dependencies.react, |
There was a problem hiding this comment.
import the package json only once pls
| "version": "1.0.0", | ||
| "private": true, | ||
| "dependencies": { | ||
| "react": "18.1.0", |
There was a problem hiding this comment.
good catch! I changed it to test the singleton warning, but forgot to change back. 😬 thanks! 🙏
| import LayoutBox from '../components/nextjs-layout-box' | ||
| import Table from '../components/nextjs-table' | ||
|
|
||
| const Nav = dynamic(() => import('remote/Nav'), { |
There was a problem hiding this comment.
good to know, thanks!
| @@ -754,6 +754,100 @@ module.exports = { | |||
|
|
|||
| --- | |||
|
|
|||
| # Step 4: Setting up Shared Modules Example | |||
There was a problem hiding this comment.
interesting, could you elaborate a little bit? is there a link I can take a look at?
| "lint": "next lint" | ||
| }, | ||
| "dependencies": { | ||
| "@module-federation/nextjs-mf": "5.2.1", |
There was a problem hiding this comment.
good point. I tried 7.0.6 initially while working on a different exercise, but something wasn't working out of the box, so we used a different version in all the exercises. since the plugin is still somewhat experimental, I created a separate ticket to upgrade across all the exercises: #32
No description provided.