refactor: CRA exemple without CRACO (#2028)

cra/README.md

@@ -9,5 +9,5 @@ This example demos a basic host application loading remote component.
 
 Run `yarn start`. This will build and serve both `host` and `remote` on ports 3001 and 3002 respectively.
 
-- [localhost:3001](http://localhost:3001/) (HOST)
+- [localhost:3001](http://localhost:3000/) (HOST)
 - [localhost:3002](http://localhost:3002/) (STANDALONE REMOTE)

cra/host/package.json

@@ -8,8 +8,8 @@
     "react-scripts": "5.0.1"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
+    "start": "node ./scripts/start.js",
+    "build": "node ./scripts/build.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -18,10 +18,6 @@
       "react-app"
     ]
   },
-  "devDependencies": {
-    "@craco/craco": "6.4.3",
-    "craco-module-federation": "1.1.0"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

cra/host/scripts/build.js

@@ -0,0 +1,3 @@
+process.env.NODE_ENV = 'production';
+require('./overrides/webpack-config');
+require('react-scripts/scripts/build');

cra/host/scripts/overrides/webpack-config.js

@@ -0,0 +1,16 @@
+const { ModuleFederationPlugin } = require('webpack').container;
+
+const webpackConfigPath = 'react-scripts/config/webpack.config';
+const webpackConfig = require(webpackConfigPath);
+
+const override = (config) => {
+  config.plugins.push(new ModuleFederationPlugin(require('../../modulefederation.config.js')));
+
+  config.output.publicPath = 'auto';
+
+  return config;
+};
+
+require.cache[require.resolve(webpackConfigPath)].exports = (env) => override(webpackConfig(env));
+
+module.exports = require(webpackConfigPath);

cra/host/scripts/start.js

@@ -0,0 +1,3 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+require('./overrides/webpack-config');
+require('react-scripts/scripts/start');

cra/remote/package.json

@@ -8,8 +8,8 @@
     "react-scripts": "5.0.1"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
+    "start": "PORT=3002 node ./scripts/start.js",
+    "build": "node ./scripts/build.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -18,10 +18,6 @@
       "react-app"
     ]
   },
-  "devDependencies": {
-    "@craco/craco": "6.4.3",
-    "craco-module-federation": "1.1.0"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

cra/remote/scripts/build.js

@@ -0,0 +1,3 @@
+process.env.NODE_ENV = 'production';
+require('./overrides/webpack-config');
+require('react-scripts/scripts/build');

cra/remote/scripts/overrides/webpack-config.js

@@ -0,0 +1,16 @@
+const { ModuleFederationPlugin } = require('webpack').container;
+
+const webpackConfigPath = 'react-scripts/config/webpack.config';
+const webpackConfig = require(webpackConfigPath);
+
+const override = (config) => {
+  config.plugins.push(new ModuleFederationPlugin(require('../../modulefederation.config.js')));
+
+  config.output.publicPath = 'auto';
+
+  return config;
+};
+
+require.cache[require.resolve(webpackConfigPath)].exports = (env) => override(webpackConfig(env));
+
+module.exports = require(webpackConfigPath);

cra/remote/scripts/start.js

@@ -0,0 +1,3 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+require('./overrides/webpack-config');
+require('react-scripts/scripts/start');