aleph.js Micro Frontends with Aleph idea

I've read about this feature think this would be a great feature addition to Aleph:

https://medium.com/the-hamato-yogi-chronichels/lets-build-micro-frontends-with-nextjs-and-module-federation-b48c2c916680

https://github.com/vercel/next.js/issues/6040#issuecomment-490723276

Mar 24 '21 20:03 aadamsx

I see a chance, that something similar to module federation will be much easier and more elegant to implement with Deno and Aleph than with Node, Webpack 5 and NextJS 10.

I wonder if there could be an export_map.json in the future, that uses Deno to bundle modules on component-level (React components).

Jun 12 '21 11:06 hastebrot

@hastebrot interest, i think this can be done very easy in deno since we use es modules via url, export_map.json looks great! at next stage we are going to support Vue, that can give us a good view about micro frontends

Jun 13 '21 00:06 ije

if you compare this to single-spa where they also use import-maps for microfrontends.

For example: here the my-deno-lib is exposing a component Thing

{
  "imports": {
    "~/": "./",
    "aleph/": "https://deno.land/x/[email protected]/",
    "aleph/types": "https://deno.land/x/[email protected]/types.ts",
    "framework": "https://deno.land/x/[email protected]/framework/core/mod.ts",
    "framework/react": "https://deno.land/x/[email protected]/framework/react/mod.ts",
    "react": "https://esm.sh/[email protected]",
    "react-dom": "https://esm.sh/[email protected]",
    "my-deno-lib": "https://unpkg.com/[email protected]/dist/my-deno-lib.esm.js"
  },
  "scopes": {}
}

And can be used like this

import { useDeno } from 'framework/react'
import React from 'react'
import Logo from '~/components/logo.tsx'
import useCounter from '~/lib/useCounter.ts'
import { Thing } from 'my-deno-lib';

export default function Home() {
  const [count, isSyncing, increase, decrease] = useCounter()
  const version = useDeno(() => Deno.version.deno)

  return (
    <div className="page">
      <head>
        <title>Hello World - Aleph.jss</title>
        <link rel="stylesheet" href="../style/index.css" />
      </head>
      <p className="logo"><Logo /></p>
      <h1>Welcome to use <strong>Aleph.js</strong>!</h1>
      <Thing />
...
    </div>
  )
}

The problem currently is that I cannot get the import-maps to work dynamically . This is I should require to restart the server to make a change in the import map. Also HMR currently does not pick up new version updates in the import maps.

It potentially works as Microfrontends now however we do need a rebuild. However if the import-maps can be made part of the HMR and be provided externally that will be ideal

#To Reproduce

Use the repo https://github.com/tsukhu/hello-deno
The run the app using aleph dev

See the library component in dark blue

Change the library component to version 0.1.2 in the import-map

{
  "imports": {
    "~/": "./",
    "aleph/": "https://deno.land/x/[email protected]/",
    "aleph/types": "https://deno.land/x/[email protected]/types.ts",
    "framework": "https://deno.land/x/[email protected]/framework/core/mod.ts",
    "framework/react": "https://deno.land/x/[email protected]/framework/react/mod.ts",
    "react": "https://esm.sh/[email protected]",
    "react-dom": "https://esm.sh/[email protected]",
    "my-deno-lib": "https://unpkg.com/[email protected]/dist/my-deno-lib.esm.js"
  },
  "scopes": {}
}

You should see the component with a green background. But it does not work , until you clean up in dev mode or rebuild in production mode

Jul 01 '21 07:07 tsukhu

aleph.js aleph.js copied to clipboard

Micro Frontends with Aleph idea

aleph.js
aleph.js copied to clipboard