This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* 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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>Feed me!</title> | |
</head> | |
<body> | |
<h1>Welcome to Feed me!</h1> | |
<iframe id="micro-frontend-container"></iframe> | |
<script type="text/javascript"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* 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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createGlobalStyle } from 'styled-components'; | |
const GlobalStyle = createGlobalStyle` | |
.banner { | |
background: #f5f5da; | |
padding: 30px; | |
text-align: center; | |
border-radius: 20px; | |
} |
NewerOlder