puttpotsawee’s gists

puttpotsawee / MicroFrontend.js

Created June 25, 2021 12:41

Micro Frontend Component

	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);
	};

puttpotsawee / index.js

Created June 25, 2021 11:52

Micro Frontend App 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';

puttpotsawee / runtime-integration-web-component.html

Created April 30, 2021 12:49

Micro Frontend Runtime Integration via Web Component

	<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>

puttpotsawee / runtime-integration-javascript.html

Created April 30, 2021 12:25

Micro Frontend Runtime Integration via JavaScript

	<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>

puttpotsawee / runtime-integration-iframe.html

Created April 30, 2021 11:44

Run-time integration via iframes

	<html>
	<head>
	<title>Feed me!</title>
	</head>
	<body>
	<h1>Welcome to Feed me!</h1>

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

	<script type="text/javascript">

puttpotsawee / startscript.sh

Last active April 22, 2021 07:58

[MicroFrontend Workshop 1] Initialize Project

	git clone [email protected]:react-boilerplate/react-boilerplate.git dog
	cd dog
	rm -rf .git
	cd ..
	cp -r dog cat
	cp -r dog container
	cd dog
	npm i [email protected] cors
	cd ../cat
	npm i [email protected] cors

puttpotsawee / index.js

Last active April 21, 2021 14:11

[MicroFrontend Workshop 1] Container component

	/**
	*
	* 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';

puttpotsawee / app.js

Created April 21, 2021 11:13

[MicroFrontend Workshop 1] App Component

	/**
	* 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';

puttpotsawee / paths.js

Last active April 21, 2021 13:31

[MicroFrontend Workshop 1] Path File

	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

puttpotsawee / global-styles.js

Last active April 21, 2021 13:47

[MicroFrontend Workshop 1] Container App Part1

	import { createGlobalStyle } from 'styled-components';

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

Potsawee Vechpanich puttpotsawee