Skip to content

Commit

Permalink
docs: add frameworks
Browse files Browse the repository at this point in the history
  • Loading branch information
ScriptedAlchemy committed Apr 10, 2024
1 parent 4361caf commit 9a4a7dc
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 94 deletions.
174 changes: 83 additions & 91 deletions apps/website-new/docs/en/guide/framework/nextjs.mdx
Original file line number Diff line number Diff line change
@@ -1,98 +1,20 @@
import { Badge } from '@theme';

<div style={{float:"right"}}><Badge text="App Router Not Supported" type="danger" /></div>

# Next.js

This plugin enables Module Federation on Next.js

## Supports

- next ^14 || ^13 || ^12
- SSR included!
- Server-Side Rendering
- Pages router

I highly recommend referencing this application which takes advantage of the best capabilities:
https://github.com/module-federation/module-federation-examples

## This project supports federated SSR

## Whats shared by default?

Under the hood we share some next internals automatically
You do not need to share these packages, sharing next internals yourself will cause errors.

<details>
<summary> See DEFAULT_SHARE_SCOPE:</summary>

```ts
export const DEFAULT_SHARE_SCOPE: SharedObject = {
'next/dynamic': {
eager: false,
requiredVersion: false,
singleton: true,
import: undefined,
},
'next/head': {
eager: false,
requiredVersion: false,
singleton: true,
import: undefined,
},
'next/link': {
eager: true,
requiredVersion: false,
singleton: true,
import: undefined,
},
'next/router': {
requiredVersion: false,
singleton: true,
import: false,
eager: false,
},
'next/script': {
requiredVersion: false,
singleton: true,
import: undefined,
eager: false,
},
react: {
singleton: true,
requiredVersion: false,
eager: false,
import: false,
},
'react-dom': {
singleton: true,
requiredVersion: false,
eager: false,
import: false,
},
'react/jsx-dev-runtime': {
singleton: true,
requiredVersion: false,
import: undefined,
eager: false,
},
'react/jsx-runtime': {
singleton: true,
requiredVersion: false,
eager: false,
import: false,
},
'styled-jsx': {
requiredVersion: false,
singleton: true,
import: undefined,
eager: false,
},
'styled-jsx/style': {
requiredVersion: false,
singleton: true,
import: undefined,
eager: false,
},
};
```

</details>

## Requirement

I set `process.env.NEXT_PRIVATE_LOCAL_WEBPACK = 'true'` inside this plugin, but its best if its set in env or command line export.
Expand Down Expand Up @@ -314,13 +236,83 @@ class MyDocument extends Document {
Hot reloading Express.js required additional steps: https://github.com/module-federation/universe/blob/main/packages/node/README.md
## Contact
## Whats shared by default?
If you have any questions or need to report a bug
Under the hood we share some next internals automatically
You do not need to share these packages, sharing next internals yourself will cause errors.
<a href="https://twitter.com/ScriptedAlchemy">
{' '}
Reach me on Twitter @ScriptedAlchemy
</a>
<details>
<summary> Click to view `DEFAULT_SHARE_SCOPE`:</summary>
Or join this discussion thread: https://github.com/module-federation/module-federation-examples/discussions/978
```ts
export const DEFAULT_SHARE_SCOPE: SharedObject = {
'next/dynamic': {
eager: false,
requiredVersion: false,
singleton: true,
import: undefined,
},
'next/head': {
eager: false,
requiredVersion: false,
singleton: true,
import: undefined,
},
'next/link': {
eager: true,
requiredVersion: false,
singleton: true,
import: undefined,
},
'next/router': {
requiredVersion: false,
singleton: true,
import: false,
eager: false,
},
'next/script': {
requiredVersion: false,
singleton: true,
import: undefined,
eager: false,
},
react: {
singleton: true,
requiredVersion: false,
eager: false,
import: false,
},
'react-dom': {
singleton: true,
requiredVersion: false,
eager: false,
import: false,
},
'react/jsx-dev-runtime': {
singleton: true,
requiredVersion: false,
import: undefined,
eager: false,
},
'react/jsx-runtime': {
singleton: true,
requiredVersion: false,
eager: false,
import: false,
},
'styled-jsx': {
requiredVersion: false,
singleton: true,
import: undefined,
eager: false,
},
'styled-jsx/style': {
requiredVersion: false,
singleton: true,
import: undefined,
eager: false,
},
};
```
</details>
10 changes: 7 additions & 3 deletions apps/website-new/docs/en/guide/framework/vue.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
title: "Vue 2"
---

# Setting Up Module Federation in a Vue 2 Application

## Overview
Expand Down Expand Up @@ -67,7 +71,7 @@ module.exports = {
}
},
module: {
rules: [ // <4>
rules: [
{ test: /\.vue$/, loader: "vue-loader" },
{
test: /\.ts$/,
Expand Down Expand Up @@ -100,13 +104,13 @@ module.exports = {
}
]
},
plugins: [ // <5>
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css"
}),
],
devServer: { // <6>
devServer: {
static: {
directory: path.join(__dirname, "public")
},
Expand Down

0 comments on commit 9a4a7dc

Please sign in to comment.