Setup vite react typescript app for single spa microfrontend
In modern web development, Micro Frontends is an architectural style that allows independent, self-contained front-end applications to be developed, deployed, and maintained. One popular tool for implementing micro frontends in JavaScript is Single-SPA. Single-SPA enables you to combine multiple applications, written with different frameworks, into a single cohesive user interface.
In this guide, we will walk through the steps to set up a Vite.js project to work with Single-SPA. Vite is a fast build tool that provides a modern development experience, which is a great choice when working with Single-SPA because of its speed and simplicity.
Note: You can create a new vite project or an existing project to set it up for single spa application.
Prerequisties: A single spa root application setup
Step 0.Create a new vitejs project using the command below. (optional)
If you want to start a new vite project, run the below command in terminal create a new vitejs project.
npm create vite@latest
Step 1. Install the below dependencies to configure the project as a single spa application.
npm i vite-plugin-single-spa single-spa-react single-spa
Step 2. Create a file spa.tsx inside the src folder and paste the below code.
This code exposes the lifecycles methods of react app to the single-spa.
import React from 'react';
import ReactDOMClient from 'react-dom/client';
import singleSpaReact from 'single-spa-react';
import App from './App';
import { cssLifecycleFactory } from 'vite-plugin-single-spa/ex';
const lc = singleSpaReact({
React,
ReactDOMClient,
rootComponent: App,
errorBoundary(err: any, _info: any, _props: any) {
return <div>Error: {err}</div>
}
});
// IMPORTANT: The argument passed here depends on the file name. (the file we created here is spa.tsx)
const cssLc = cssLifecycleFactory('spa');
export const bootstrap = [cssLc.bootstrap, lc.bootstrap];
export const mount = [cssLc.mount, lc.mount];
export const unmount = [cssLc.unmount, lc.unmount];
Step 2. Edit the vite.config.ts file
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';
// add this line to import the installed plugin
import vitePluginSingleSpa from "vite-plugin-single-spa"
// update the configuration as shown below
export default defineConfig({
plugins: [react(),vitePluginSingleSpa({
type: "mife",
serverPort: 5173,
spaEntryPoints: "src/spa.tsx", //path to the spa.tsx file
}),],
build: {
target: 'esnext', // Ensure modern output
rollupOptions: {
input:"src/main.tsx", //path to the main entry file of the vite app
output: {
format: 'system',
},
preserveEntrySignatures: 'strict'
},
},
})
The configuration to setup vite app as a single spa application is complete.
Next Steps:
To run the vite app for the single spa, you will need to first build the app each time any change made in the app.
To run the app, enter the following commands in terminal.
npm run build // to build the react app
npm run dev //to start the app
Note: npm run dev will run the app as standalone as well as a single spa application which the most recent build created using npm run build command.
Add the vite react application to the root single spa application.
Open the index.ejs file make the below mentioned changes
<% if (isLocal) { %>
<script type="systemjs-importmap">
{
"imports": {
"react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js",
"@single-spa/welcome": "https://unpkg.com/single-spa-welcome@2.0.0/dist/single-spa-welcome.js",
"@org_name/root-config": "//localhost:9000/vibeconn-root-config.js",
// register the react vite app in single spa root
"@org_name/vite-react-app":"//localhost:5173/dist/spa.js"
}
}
</script>
<% } %>
Hence, in few easy steps, your vite react app is now ready to be served as a single spa app as well as standalone app.
