Skip to content

Latest commit

 

History

History
48 lines (33 loc) · 2.47 KB

README.md

File metadata and controls

48 lines (33 loc) · 2.47 KB
Raw

Code for my “Experiences, Not Apps” talk at the Chicago React Meetup, September 2023

Jump to code

Slides

Experiences Not Apps talk introduction slide

To Run

  1. Start the BFF/API server using the readme in bffs/products. (There's only one microfrontend right now, Products, so there's also only one BFF.)
  2. Figure out which sample you want to use, and run it using the readmes in single-spa or roll-your-own.

Quickstart

# Shell 1:
cd bffs/products; npm run dev

# Then, choose one of the following:

# RYO microfrontend, Shell 1:
cd roll-your-own/products; npm run dev
# RYO microfrontend, Shell 2 (this is the example article):
cd roll-your-own/products/example; npm run start

# Single-spa
cd single-spa/products; npm run start
cd single-spa/root-config; npm run start

Check it out

  • The BFF is a Node.js server that serves up the API and the microfrontend. It's not a microfrontend itself, but its types are in Typescript. If you update its openapi spec, you can regenerate them with npm run build-types in roll-your-own/products.
  • It's possible to include other microfrontends from root-configs - see the single-spa/root-config's import map for an example.
  • I changed the ProductsExperience microfrontend to be installed via a .hydrate() function, so that's how you'd bootstrap stuff. You can see this happening in the example index.html files.

TODOS

  • For the Roll-Your-Own implementation:
    • Hot reloading in dev (would use an esbuild plugin)
    • Experiment with SSR
  • For Frint
    • Actually make a demo 😉