leocristofani

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

<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

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

class ErrorBoundary extends Component {
  //...
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }
  render() {
    return this.state.hasError
      ? (
        <div>
          <p className="alert alert-warning">

leocristofani

class SongsContainer extends Component {
  render() {
    // ...
    return (
      <ErrorBoundary>
        <Songs artist={artist} songs={songs} />
      </ErrorBoundary>
    );
  }
}

leocristofani

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

// ...
class ArtistsListItem extends React.Component {
  onClick = (e) => {
    //...
    window.dispatchEvent(
      new CustomEvent(ARTISTS_SELECT_ARTIST, { detail: { artist: name } })
    );
  }
  render() {
    // ...

leocristofani

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

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

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