GitHub - ec965/micro-frontends-astro: Demo of a micro frontend application with...
source link: https://github.com/ec965/micro-frontends-astro
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Micro Frontends with Astro
This is a demo of a SolidJS and React mixed micro-frontend application using Astro as the base MPA framework. You can view a live demo at https://ec965.github.io/micro-frontends-astro.
The routes behind /react
are managed by the React app while the /solid
routes are managed by the SolidJS app.
Astro Setup
Using Multiple Frameworks
When using multiple frameworks with Astro, you must explicitly define which framework to use for each component. For example, to tell both TypeScript and Astro that the component is a React component, you should put the following at the top of the file.
/** @jsxImportSource react */
import React from "react";
For SolidJS, this would look like:
/** @jsxImportSource solid-js */
import "solid-js";
Configure Dynamic Routing
In order to get Astro to always bring us to our framework's application Root, we must configure our routing tree using a spread.
pages
| - solid
| | - [...route].astro
| - react
| - [...route].astro
Then at the top of the [...route].astro
file, define all the routes of the App.
export function getStaticPaths() {
// we need to define all the possible solid routes so astro knows to redirect here
// our app has 2 routes, the root page and the page1 page
return [{ params: { route: undefined } }, { params: { route: "page1" } }];
}
See the Astro docs on Dynamic routes for more information.
Skipping SSR
Client side routing doesn't work with SSR.
We can skip Astro's SSR by using the client:only
directive on our application root components.
<Layout title="React">
<h1>Astro title</h1>
<React client:only="react" />
</Layout>
React
The component in /src/component/React.tsx
is the React Application.
Routing is handled by react-router-dom.
Navigation between React routes must use the <Link/>
component from react-router.
Navigation to the Solid App routes or the default Astro routes can be done using the regular <a/>
anchor tag.
Solid
The component in /src/component/Solid.tsx
is the React Application.
Routing is handled by @solidjs/router.
Navigation between Solid routes can be done with either the provided <Link/>
component or with <a/>
anchor tags.
In order to navigate from the Solid App to the React App or Astro routes, we must use some custom JS
to force @solidjs/router to relinquish control of browser routing.
// need to do some JS hacks to get solid router to hand routing back to the browser
function GoToReact() {
return <a href="javascript:window.location.href='/react'">Go To React</a>;
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK