Potsawee Vechpanich puttpotsawee

## MicroFrontend.js
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);
    };

## index.js
/**
 *
 * App
 *
 * This component is the skeleton around the actual pages, and should only
 * contain code that should be seen on all pages. (e.g. navigation bar)
 */

import React from 'react';
import { Router, Route } from 'react-router-dom';

## runtime-integration-web-component.html
<html>
  <head>
    <title>Feed me!</title>
  </head>
  <body>
    <h1>Welcome to Feed me!</h1>

    <!-- These scripts don't render anything immediately -->
    <!-- Instead they each define a custom element type -->
    <script src="https://browse.example.com/bundle.js"></script>

## runtime-integration-javascript.html
<html>
  <head>
    <title>Feed me!</title>
  </head>
  <body>
    <h1>Welcome to Feed me!</h1>

    <!-- These scripts don't render anything immediately -->
    <!-- Instead they attach entry-point functions to `window` -->
    <script src="https://browse.example.com/bundle.js"></script>

## runtime-integration-iframe.html
<html>
  <head>
    <title>Feed me!</title>
  </head>
  <body>
    <h1>Welcome to Feed me!</h1>

    <iframe id="micro-frontend-container"></iframe>

    <script type="text/javascript">

## startscript.sh
git clone git@github.com:react-boilerplate/react-boilerplate.git dog
cd dog
rm -rf .git
cd ..
cp -r dog cat
cp -r dog container
cd dog
npm i react-redux@7.1.0 cors
cd ../cat
npm i react-redux@7.1.0 cors

## index.js
/**
 *
 * App
 *
 * This component is the skeleton around the actual pages, and should only
 * contain code that should be seen on all pages. (e.g. navigation bar)
 */

import React from 'react';
import { ConnectedRouter } from 'connected-react-router';

## app.js
/**
 * app.js
 *
 * This is the entry file for the application, only setup and boilerplate
 * code.
 */

// Needed for redux-saga es6 generator support
import '@babel/polyfill';

## paths.js
const path = require('path');
const fs = require('fs');
const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');

// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebook/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// We use `PUBLIC_URL` environment variable or "homepage" field to infer

## global-styles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  .banner {
    background: #f5f5da;
    padding: 30px;
    text-align: center;
    border-radius: 20px;
  }
	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);
	};
	/**
	*
	* App
	*
	* This component is the skeleton around the actual pages, and should only
	* contain code that should be seen on all pages. (e.g. navigation bar)
	*/

	import React from 'react';
	import { Router, Route } from 'react-router-dom';
	<html>
	<head>
	<title>Feed me!</title>
	</head>
	<body>
	<h1>Welcome to Feed me!</h1>

	<!-- These scripts don't render anything immediately -->
	<!-- Instead they each define a custom element type -->
	<script src="https://browse.example.com/bundle.js"></script>
	git clone git@github.com:react-boilerplate/react-boilerplate.git dog
	cd dog
	rm -rf .git
	cd ..
	cp -r dog cat
	cp -r dog container
	cd dog
	npm i react-redux@7.1.0 cors
	cd ../cat
	npm i react-redux@7.1.0 cors
	/**
	* app.js
	*
	* This is the entry file for the application, only setup and boilerplate
	* code.
	*/

	// Needed for redux-saga es6 generator support
	import '@babel/polyfill';
	const path = require('path');
	const fs = require('fs');
	const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');

	// Make sure any symlinks in the project folder are resolved:
	// https://github.com/facebook/create-react-app/issues/637
	const appDirectory = fs.realpathSync(process.cwd());
	const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

	// We use `PUBLIC_URL` environment variable or "homepage" field to infer
	import { createGlobalStyle } from 'styled-components';

	const GlobalStyle = createGlobalStyle`
	.banner {
	background: #f5f5da;
	padding: 30px;
	text-align: center;
	border-radius: 20px;
	}