rehrumesh

{
  "files": {
    "main.css": "/static/css/main.5f361e03.chunk.css",
    "main.js": "/static/js/main.81def56f.chunk.js",
    "main.js.map": "/static/js/main.81def56f.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.f9edd30b.js",
    "runtime-main.js.map": "/static/js/runtime-main.f9edd30b.js.map",
    "static/js/2.fd646533.chunk.js": "/static/js/2.fd646533.chunk.js",
    "static/js/2.fd646533.chunk.js.map": "/static/js/2.fd646533.chunk.js.map",
    "index.html": "/index.html",

rehrumesh

"scripts": {
   "start": "PORT=3002 react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
}

rehrumesh

REACT_APP_DOGS_HOST=http://localhost:3001
REACT_APP_CATS_HOST=http://localhost:3002

rehrumesh

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

window.renderCats = (containerId, history) => {
  ReactDOM.render(
    <App history={history} />,
    document.getElementById(containerId),

rehrumesh

import React, { useState } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { createBrowserHistory } from "history";
import MicroFrontend from "./MicroFrontend";

import "./App.css";

const defaultHistory = createBrowserHistory();

const {

rehrumesh

module.exports = (app) => {
  app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    next();
  });
};

rehrumesh

module.exports = {
  webpack: (config, env) => {
    config.optimization.runtimeChunk = false;
    config.optimization.splitChunks = {
      cacheGroups: {
        default: false,
      },
    };

    config.output.filename = "static/js/[name].js";

rehrumesh

import React, { useEffect } from "react";

function MicroFrontend({ name, host, history }) {
  useEffect(() => {
    const scriptId = `micro-frontend-script-${name}`;

    const renderMicroFrontend = () => {
      
      window[`render${name}`](`${name}-container`, history);
    };

rehrumesh

.banner {
  background: #f5f5da;
  padding: 30px;
  text-align: center;
  border-radius: 20px;
}

.banner-title {
  color: #2d3d29;
}

rehrumesh

import React, { useState } from "react";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import { createBrowserHistory } from "history";

import "./App.css";

const defaultHistory = createBrowserHistory();

function Header() {
  return (