Scribd
Upload
4 views2 pages

Microfrontend Configuration Guide

The document contains configuration settings for a microfrontend application using Vite, React, and federation. It includes a Vite configuration that sets up plugins for React and remote module federation, as well as a PostCSS configuration for Tailwind CSS and Autoprefixer. Additionally, it defines two React components for authentication pages that lazily load remote components for sign-in and sign-up functionalities.

Uploaded by

thymai.1510
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views2 pages

Microfrontend Configuration Guide

The document contains configuration settings for a microfrontend application using Vite, React, and federation. It includes a Vite configuration that sets up plugins for React and remote module federation, as well as a PostCSS configuration for Tailwind CSS and Autoprefixer. Additionally, it defines two React components for authentication pages that lazily load remote components for sign-in and sign-up functionalities.

Uploaded by

thymai.1510
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

config microfe:

[Link]:
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({


plugins: [react(),
federation({
name: 'host',
remotes: {
remote: "[Link]
},
shared: ['react', 'react-dom']
})],
server: {
// this ensures that the browser opens upon server start
open: true,
// this sets a default port to 3000
port: 3000,
},
build: {
outDir: 'build'
}
})

[Link]
[Link] = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}

authPage:
import React, {lazy, Suspense} from 'react';

const SignInRemote = lazy(() => import('remote/SignInPage'));


const SignUpRemote=lazy(()=>import('remote/SignUpPage'))
const SignInPage = () => {
return (
<div>
<Suspense fallback="Loading...">
<SignInRemote/>
</Suspense>
</div>
);
};
const SignUpPage = () => {
return (
<div>
<Suspense fallback="Loading...">
<SignUpRemote></SignUpRemote>
</Suspense>
</div>
);
};
export{SignInPage,SignUpPage}

You might also like