fix(rollup-federation-demo): created single point to start (#2708)

Author: lexasq

rollup-federation-demo/README.md

@@ -6,7 +6,9 @@ This example demos consumption of federated modules from a Rollup bundle. `rollu
 
 # Running Demo
 
-Run `yarn start`. This will build and serve both `webpack-spa` and `rollup-spa` on ports 8081 and 8082 respectively.
+Run `yarn install` this will install dependencies for all 3 apps and root.
+Run `yarn start`. This will build and serve all three `webpack-spa`, `rollup-spa`  and `rs-sidecar` on ports 8081, 8082, 8080 respectively.
 
+- SIDECAR (rollup-spa): [localhost:8080](http://localhost:8080/)
 - REMOTE (webpack-spa): [localhost:8081](http://localhost:8081/)
 - HOST (rollup-spa): [localhost:8082](http://localhost:8082/)

rollup-federation-demo/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "./rollup-spa",
+      "./rs-sidecar",
+      "./webpack-spa"
+    ]
+  },
+  "scripts": {
+    "start": "concurrently 'yarn --cwd rollup-spa start' 'yarn --cwd rs-sidecar start;' 'yarn --cwd webpack-spa start'"
+  },
+  "devDependencies": {
+    "concurrently": "7.3.0"
+  }
+}

rollup-federation-demo/rollup-spa/.gitignore

@@ -0,0 +1 @@
+vendor

rollup-federation-demo/rollup-spa/index.html

@@ -15,8 +15,8 @@
     <script type="systemjs-importmap">
       {
         "imports": {
-          "react": "./node_modules/react/umd/react.production.min.js",
-          "react-dom": "./node_modules/react-dom/umd/react-dom.production.min.js",
+          "react": "./vendor/react.production.min.js",
+          "react-dom": "./vendor/react-dom.production.min.js",
           "rwebpackremote": "http://localhost:8081/remoteEntry.js",
           "rollup_spa": "http://localhost:8080/remoteEntry.js",
           "main": "./dist/index.js"

rollup-federation-demo/rollup-spa/package.json

@@ -25,6 +25,7 @@
     "npm-run-all": "4.1.5",
     "rollup": "2.79.0",
     "rollup-plugin-babel": "4.4.0",
+    "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-inject-process-env": "1.3.1",
     "serve": "13.0.4"
   }

rollup-federation-demo/rollup-spa/rollup.config.js

@@ -3,6 +3,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import injectProcessEnv from 'rollup-plugin-inject-process-env';
 import federation from '@module-federation/rollup-federation';
+import copy from 'rollup-plugin-copy'
 
 import pkg from './package.json';
 
@@ -23,23 +24,29 @@ export default {
     }),
     commonjs({
       transformMixedEsModules: true,
-      include: ['node_modules/*'],
+      include: ['node_modules/*', '../node_modules/*'],
     }),
     babel(),
+    // This hack is required to have rollup inside yarn worskpaces since it can't properly resolve dependencies from
+    // parent folder.
+    copy({
+      targets: [
+        {src: [
+            '../node_modules/react/umd/react.development.js',
+            '../node_modules/react/umd/react.production.min.js',
+            '../node_modules/react-dom/umd/react-dom.development.js',
+            '../node_modules/react-dom/umd/react-dom.production.min.js'
+          ],
+          dest: 'vendor'
+        }
+      ]
+    }),
     federation({
       remotes: {
         foo_app1: 'rwebpackremote',
         foo_rollup_spa: 'rollup_spa',
       },
       shared: {
-        react: {
-          singleton: true,
-          requiredVersion: pkg.dependencies.react,
-        },
-        'react-dom': {
-          singleton: true,
-          requiredVersion: pkg.dependencies['react-dom'],
-        },
       },
     }),
   ],