Leonardo Cristofani leocristofani

Senior Front-end Engineer

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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / 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')
	},
	// ...