JenniferFuBook

import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { unregister } from './registerServiceWorker';

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

JenniferFuBook

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

// render micro frontend function
window.renderCreatereactapp = (containerId, history) => {
  ReactDOM.render(
    <App history={history}/>,

JenniferFuBook

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

JenniferFuBook

import React from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import AppHeader from './AppHeader';
import MicroFrontend from './MicroFrontend';
import About from './About';

const {
  REACT_APP_BROWSE_HOST: browseHost,
  REACT_APP_RESTAURANT_HOST: restaurantHost,
  REACT_APP_CREATEREACTAPP_HOST: createreactappHost,

JenniferFuBook

REACT_APP_BROWSE_HOST=http://localhost:3001
REACT_APP_RESTAURANT_HOST=http://localhost:3002
REACT_APP_CREATEREACTAPP_HOST=http://localhost:4000
REACT_APP_CONTENT_HOST=http://localhost:5000

JenniferFuBook

REACT_APP_BROWSE_HOST=https://browse.demo.microfrontends.com
REACT_APP_RESTAURANT_HOST=https://order.demo.microfrontends.com
REACT_APP_CREATEREACTAPP_HOST=https://createreactapp.demo.microfrontends.com
REACT_APP_CONTENT_HOST=https://content.demo.microfrontends.com

JenniferFuBook

  
import React from 'react';
import { NavLink } from 'react-router-dom';
import './AppHeader.css';

const AppHeader = () => (
  <header>
    <div className="center-column">
      <h1>🍽 Feed me</h1>
    </div>

JenniferFuBook

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={`${process.env.REACT_APP_CONTENT_HOST}${logo}`} className="App-logo" alt="logo" />
        <p>

JenniferFuBook

import React from 'react';

class MicroFrontend extends React.Component {
  componentDidMount() {
    const { name, host, document } = this.props;
    const scriptId = `micro-frontend-script-${name}`;

    if (document.getElementById(scriptId)) {
      this.renderMicroFrontend();
      return;

JenniferFuBook

import React from 'react';
import { NavLink, BrowserRouter, Route, Switch } from 'react-router-dom';
import MicroFrontend from './MicroFrontend';

const { REACT_APP_CREATEREACTAPP_HOST: createreactappHost } = process.env;

const CreateReactApp = ({ history }) => (
  <MicroFrontend
    history={history}
    host={createreactappHost}