Skip to content

Instantly share code, notes, and snippets.

:octocat:
👍

Rumesh Eranga Hapuarachchi rehrumesh

:octocat:
👍
View GitHub Profile
@rehrumesh
rehrumesh / asset-manifest.json
Created Jul 14, 2020
asset manifest with chunking
View asset-manifest.json
{
"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",
View package.json
"scripts": {
"start": "PORT=3002 react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
View .env
REACT_APP_DOGS_HOST=http://localhost:3001
REACT_APP_CATS_HOST=http://localhost:3002
@rehrumesh
rehrumesh / index.js
Created Jul 5, 2020
Updated index.js of Cats micro frontend
View index.js
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
rehrumesh / App.js
Created Jul 5, 2020
Updated App.js with microfrontend support
View App.js
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
rehrumesh / setupProxy.js
Created Jul 5, 2020
Enabling proxy for react micro frontend
View setupProxy.js
module.exports = (app) => {
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
next();
});
};
View config-overrides.js
module.exports = {
webpack: (config, env) => {
config.optimization.runtimeChunk = false;
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
config.output.filename = "static/js/[name].js";
View 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);
};
@rehrumesh
rehrumesh / App.css
Created Jul 5, 2020
App.css of Container
View App.css
.banner {
background: #f5f5da;
padding: 30px;
text-align: center;
border-radius: 20px;
}
.banner-title {
color: #2d3d29;
}
@rehrumesh
rehrumesh / App.js
Last active Jul 5, 2020
App.js of Container
View App.js
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 (
You can’t perform that action at this time.