0

Is it even possible to have bi-directional single-spa project?

Let's say the host takes in two applications, one navbar written in react, and one dashboard written in vue. Now, the host easily can render each application by url pathname. But what if I want to work with the navbar, I still want to see how that affects the layout of the dashboard.

So, when working with the navbar, is it possible to use host as an entry point for rendering all other apps as well?

In react let's say I have the following:

import {  lazy } from "react";
import "./App.css";

const host = lazy(() => import("host/Host")) as unknown;

function App() {
  host
  return (
    <div>Layout</div>
  );
}

export default App;

And in my host-app:

import { registerApplication, start } from "single-spa";

registerApplication(
  "layout",
  () => import("layout/App"),
  (location) => location.pathname.startsWith("/")
);

registerApplication(
  "dashboard",
  () => import("dashboard/App"),
  (location) => location.pathname.startsWith("/")
);

start();

I am only able to render them by host, not bi-directional.

Erlend Betting
  • 1
  • 1
  • I'm not sure what "by host" is. I also don't think I understand what "bi-directional" is either. I'll take a guess: Are you trying to make the react project load the root (layout) project? I guess I need a more detailed explanation on the terms. – José Ramírez Aug 19 '23 at 20:27
  • Yes. So bi-directional means that you should see all applications as one regardless of which application you are editing. E.g. you are changing the layout, you should be able to see how that affects all the other applications – Erlend Betting Aug 21 '23 at 07:50
  • That's not possible. That would create circular references. Work with your root open. Every time you make a change in the micro-frontend, the root updates if HMR is working fine. If you are using vite, use my plug-in: `vite-plugin-single-spa`. – José Ramírez Aug 21 '23 at 21:19

0 Answers0