I am trying to implement Micro Frontend Architecture where the html/css/js application is the main application and the React application must be embedded inside it.
I don’t want to implement it using iframes.
const App = () => {
const navigate=useNavigate();
const location=useLocation();
const logout=()=>{
localStorage.removeItem("name");
Cookies.remove("token");
localStorage.removeItem("groupId");
navigate("/");
}
return (
<>
{location.pathname!=="/" && location.pathname!=="/register" &&
<>
<button onClick={logout}>Logout</button>
<select name='mytenants' id='mytenants'>
</select>
</>// marked
}
<Routes>
<Route path="/" element={<Login></Login>}></Route>
<Route path="/message" element={<ProtectedRoute><WebSocketComponent></WebSocketComponent></ProtectedRoute>}></Route>
<Route path="/register" element={<SignUp></SignUp>}></Route>
<Route path='/message/:reciver' element={<ProtectedRoute><WebSocketComponent></WebSocketComponent></ProtectedRoute>}></Route>
<Route path="/message/group" element={<ProtectedRoute><GroupChat></GroupChat></ProtectedRoute>}></Route>
<Route path="/message/group/:group" element={<ProtectedRoute><GroupChat></GroupChat></ProtectedRoute>}></Route>
<Route path="/registeruser" element={<ProtectedRoute><RegisterUser></RegisterUser></ProtectedRoute>}></Route>
</Routes>
</>
);
};
export default App;
This is my App.js of my react application.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
This is my Index.js
I tryed to wrap the App.js using the Web Component and the use it in my html/css/js application but it didn’t work out.
class ReactMicroFrontend extends HTMLElement
{
connectedCallback()
{
const shadowRoot=this.attachShadow({mode:"open"});
const mountPoint=document.createElement('root');
shadowRoot.appendChild(mountPoint);
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
,
mountPoint
);
}
disconnectedCAllback()
{
ReactDOM.unmountComponentAtNode(this.shadowRoot.querySelector('root'));
}
}
customElements.define('react-microfrontend', ReactMicroFrontend);
This was the wrapper component.
I don’t want to use any frameworks like Single-SPA to implement it.
I want to implement it using plain javascript.
Is there any possible way to achieve it?