Skip to content

Using systemjs as module loader #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
internettrans wants to merge 8 commits into
base: master
Choose a base branch
from
Draft

Using systemjs as module loader #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b587475
SystemJS version
Mar 17, 2020
0fdd090
Working
Mar 17, 2020
0676291
Self review
Mar 17, 2020
1997785
It's working!
Mar 17, 2020
24034e7
Self review
Mar 17, 2020
7072d34
Self review
Mar 17, 2020
f313f4c
Anthony's feedback
Mar 17, 2020
7196aa6
update the other index.html files so that navigating directly to 3002…
frehner Apr 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/01-host/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@
"scripts": {
"start": "webpack --watch",
"build": "webpack --mode production",
"serve": "serve dist -p 3001"
"serve": "serve dist -p 3001 -s"
},
"devDependencies": {
"copy-webpack-plugin": "^5.1.1"
}
}
18 changes: 16 additions & 2 deletions packages/01-host/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://localhost:3002/remoteEntry.js"></script>
<script src="http://localhost:3003/remoteEntry.js"></script>
<script type="systemjs-importmap">
{
"imports": {
Copy link
Copy Markdown
Author

@internettrans internettrans Mar 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The import map

Copy link
Copy Markdown

@ericzorn93 ericzorn93 Feb 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we need an org name here in the app names

Copy link
Copy Markdown

@frehner frehner Feb 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

org names are a best practice but are not required.

Copy link
Copy Markdown

@ericzorn93 ericzorn93 Feb 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, just wondering

"app_one": "http://localhost:3001/remoteEntry.js",
"app_two": "http://localhost:3002/remoteEntry.js",
"app_three": "http://localhost:3003/remoteEntry.js",
"app_one/": "http://localhost:3001/",
"app_two/": "http://localhost:3002/",
"app_three/": "http://localhost:3003/"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/systemjs/dist/system.js"></script>
<script>
Copy link
Copy Markdown

@bh3605 bh3605 Jul 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't you also need to call System.import('app_one')? How is the remoteEntry file being loaded?

System.import('app_one/main.js')
</script>
</body>
</html>
13 changes: 13 additions & 0 deletions packages/01-host/public/serve.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "Access-Control-Allow-Origin",
Copy link
Copy Markdown
Author

@internettrans internettrans Mar 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cors is needed for dynamically injected scripts from systemjs

"value": "*"
}
]
}
]
}
20 changes: 13 additions & 7 deletions packages/01-host/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
entry: "./src/index",
Expand All @@ -13,7 +13,8 @@ module.exports = {
},

output: {
publicPath: "http://localhost:3001/"
publicPath: "http://localhost:3001/",
libraryTarget: "system"
Copy link
Copy Markdown

@bradydowling bradydowling Apr 3, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Compiles code to System.register format, see https://single-spa.js.org/docs/recommended-setup/#systemjs or https://single-spa.js.org/docs/recommended-setup/#systemjs for details.

},

resolve: {
Expand All @@ -28,14 +29,19 @@ module.exports = {
options: {
presets: [require.resolve("@babel/preset-react")]
}
},
{
parser: {
Copy link
Copy Markdown

@bh3605 bh3605 Jul 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this section needed?

system: false
}
}
]
],
},

plugins: [
new ModuleFederationPlugin({
name: "app_one",
library: { type: "var", name: "app_one" },
library: { type: "system" },
Copy link
Copy Markdown

@frehner frehner Mar 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, silly me. removing the name removes the named portion of the module. that makes sense.

Copy link
Copy Markdown
Author

@internettrans internettrans Mar 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah haha I ran into the same problem with the named register but then found this way of removing the name

filename: "remoteEntry.js",
remotes: {
app_two: "app_two",
Expand All @@ -46,8 +52,8 @@ module.exports = {
},
shared: ["react", "react-dom","react-router-dom"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html"
})
new CopyPlugin([
Copy link
Copy Markdown
Author

@internettrans internettrans Mar 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the copy plugin to ensure serve.json is in the dist directory (so that cors works)

{ from: 'public', to: '.' }
])
]
};
2 changes: 1 addition & 1 deletion packages/02-material-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@
"scripts": {
"start": "webpack --watch",
"build": "webpack --mode production",
"serve": "serve dist -p 3002"
"serve": "serve dist -p 3002 -s"
Copy link
Copy Markdown
Author

@internettrans internettrans Mar 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

-s puts serve into single page app mode - always returns index.html

}
}
17 changes: 16 additions & 1 deletion packages/02-material-ui/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://localhost:3001/remoteEntry.js"></script>
<script type="systemjs-importmap">
{
"imports": {
"app_one": "http://localhost:3001/remoteEntry.js",
"app_two": "http://localhost:3002/remoteEntry.js",
"app_three": "http://localhost:3003/remoteEntry.js",
"app_one/": "http://localhost:3001/",
"app_two/": "http://localhost:3002/",
"app_three/": "http://localhost:3003/"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/systemjs/dist/system.js"></script>
<script>
System.import('app_two/main.js')
</script>
</body>
</html>
13 changes: 13 additions & 0 deletions packages/02-material-ui/public/serve.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
}
]
}
14 changes: 7 additions & 7 deletions packages/02-material-ui/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
entry: "./src/index",
Expand All @@ -13,7 +13,8 @@ module.exports = {
},

output: {
publicPath: "http://localhost:3002/"
publicPath: "http://localhost:3002/",
libraryTarget: "system"
},

resolve: {
Expand All @@ -35,7 +36,7 @@ module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "app_two",
library: { type: "var", name: "app_two" },
library: { type: "system" },
filename: "remoteEntry.js",
exposes: {
Dialog: "./src/Dialog"
Expand All @@ -45,9 +46,8 @@ module.exports = {
},
shared: ["react", "react-dom","react-router-dom"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
chunks: ["main"]
Copy link
Copy Markdown
Author

@internettrans internettrans Mar 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to inject any scripts into html file anymore

})
new CopyPlugin([
{ from: 'public', to: '.' }
])
]
};
2 changes: 1 addition & 1 deletion packages/03-styled-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@
"scripts": {
"start": "webpack --watch",
"build": "webpack --mode production",
"serve": "serve dist -p 3003"
"serve": "serve dist -p 3003 -s"
}
}
18 changes: 18 additions & 0 deletions packages/03-styled-components/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="systemjs-importmap">
{
"imports": {
"app_one": "http://localhost:3001/remoteEntry.js",
"app_two": "http://localhost:3002/remoteEntry.js",
"app_three": "http://localhost:3003/remoteEntry.js",
"app_one/": "http://localhost:3001/",
"app_two/": "http://localhost:3002/",
"app_three/": "http://localhost:3003/"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/systemjs/dist/system.js"></script>
<script>
System.import('app_three/main.js')
</script>
</body>
</html>
13 changes: 13 additions & 0 deletions packages/03-styled-components/public/serve.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
}
]
}
13 changes: 7 additions & 6 deletions packages/03-styled-components/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
entry: "./src/index",
Expand All @@ -13,7 +13,8 @@ module.exports = {
},

output: {
publicPath: "http://localhost:3003/"
publicPath: "http://localhost:3003/",
libraryTarget: "system"
},

resolve: {
Expand All @@ -35,15 +36,15 @@ module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "app_three",
library: { type: "var", name: "app_three" },
library: { type: "system" },
filename: "remoteEntry.js",
exposes: {
Button: "./src/Button"
},
shared: ["react", "react-dom"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html"
})
new CopyPlugin([
{ from: 'public', to: '.' }
])
]
};
Loading