Skip to content

Instantly share code, notes, and snippets.

View leocristofani's full-sized avatar

Leonardo Cristofani leocristofani

View GitHub Profile
@leocristofani
leocristofani / cognito.yaml
Created February 3, 2019 20:14 — forked from singledigit/cognito.yaml
Create a Cognito Authentication Backend via CloudFormation
AWSTemplateFormatVersion: '2010-09-09'
Description: Cognito Stack
Parameters:
AuthName:
Type: String
Description: Unique Auth Name for Cognito Resources
Resources:
# Creates a role that allows Cognito to send SNS messages
SNSRole:
@leocristofani
leocristofani / index.html
Created December 19, 2018 13:12
Micro-frontends - embedded styles
<link href="http://localhost:3001/public/embed/index.f175bcb....css" rel="stylesheet" />
<link href="http://localhost:3003/public/embed/index.3775bcg....css" rel="stylesheet" />
<link href="http://localhost:3005/public/embed/index.5575bcf....css" rel="stylesheet" />
@leocristofani
leocristofani / parent.js
Created December 19, 2018 13:08
Micro-frontends in practice - passing authentication token to embedded micro-frontends from parent
import React from 'react';
import MicroFrontends from './microfrontends';
import './app.css';
export default function App() {
return (
<div className="app">
<header className="app__header">
<h1 className="app__logo">Mi<strong>Songs</strong></h1>
@leocristofani
leocristofani / error_boundary.js
Last active December 19, 2018 13:05
Micro-frontends in practice - handling errors with a React 16 Error Boundary component
class ErrorBoundary extends Component {
//...
componentDidCatch(error, info) {
this.setState({ hasError: true });
}
render() {
return this.state.hasError
? (
<div>
<p className="alert alert-warning">
@leocristofani
leocristofani / SongsContainer.js
Last active December 19, 2018 13:02
Micro-frontends in practice - wrapping outer most component with an error boundary
class SongsContainer extends Component {
render() {
// ...
return (
<ErrorBoundary>
<Songs artist={artist} songs={songs} />
</ErrorBoundary>
);
}
}
@leocristofani
leocristofani / SongsContainer.js
Created December 19, 2018 12:58
Micro-frontends in practice - communication between services via custom DOM events - subscribe
class SongsContainer extends React.Component {
componentDidMount() {
window.addEventListener(ARTISTS_SELECT_ARTIST, this.fetchSongs);
this.fetchSongs({ detail: { artist: this.state.artist } });
}
componentWillMount() {
window.removeEventListener(ARTISTS_SELECT_ARTIST, this.fetchSongs);
}
}
@leocristofani
leocristofani / artists_list_item.js
Created December 19, 2018 12:43
Micro-frontends in practice - communication between services via custom DOM events - publish
// ...
class ArtistsListItem extends React.Component {
onClick = (e) => {
//...
window.dispatchEvent(
new CustomEvent(ARTISTS_SELECT_ARTIST, { detail: { artist: name } })
);
}
render() {
// ...
@leocristofani
leocristofani / load_scripts.js
Created December 19, 2018 12:37
Micro-frontends in practice - load embed scripts from a micro-frontend
export function loadScript(url, name) {
let promise;
if (_scriptCache.has(url)) {
promise = _scriptCache.get(url);
} else {
promise = new Promise((resolve, reject) => {
let script = document.createElement('script');
script.onerror = event => reject(new Error(`Failed to load '${url}'`));
script.onload = resolve;
@leocristofani
leocristofani / server.js
Created December 19, 2018 12:34
Micro-frnotends in practice - expose path to embed files
/*
* Generates { js: 'path/to/index.[hash].js', css: 'path/to/index.[hash].css' }
* based on files available in /public/embed directory
*/
function getPathToEmbedAssets() {}
/**
* Exposes paths to embed assets
*/
app.get('/api/embed-assets', (req, res) => {
@leocristofani
leocristofani / webpack.embed.js
Last active September 2, 2024 03:38
Micro-frontend in practice - Expose library as UMD from Webpack
module.exports = {
mode: 'production',
entry: `../client/src/embed.js`,
output: {
library: 'Artists',
libraryTarget: 'umd',
filename: 'index.[hash].js',
path: path.resolve(__dirname, '../server/public/embed')
},
// ...