Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,48 @@
# micro-frontend-with-single-spa

This project demonstrates the implementation of micro-frontends using Single-SPA, a framework for building modular frontend applications. Micro-frontends allow you to decompose a monolithic frontend into smaller, independent applications that can be developed, deployed, and scaled individually, improving development efficiency and team autonomy.

## Installation

Before installing the dependencies, ensure you have Node.js (version 14 or higher) and npm (version 6 or higher) installed on your system. You can download Node.js from the official website at nodejs.org.

To install the project dependencies, run the following command in your terminal:

```
npm i
npm install
```

This command will read the package.json file and install all the necessary dependencies, including Single-SPA core modules, React, Vue, and other related libraries required for running the micro-frontends.

## Running the app

To run the app, run the start script:
Single-SPA enables the orchestration of multiple JavaScript applications on a single page, allowing each micro-frontend to be loaded independently while sharing the same DOM.

To start the development server and run the application, execute the start script as follows:

```
npm start
```

Now, you can visit the following URLs:
Once the server is running, you can navigate to the application through the following URLs, each serving different views of the micro-frontend architecture:

```
# renders both apps
# Main dashboard: renders both React and Vue apps side by side
http://localhost:8080/

# renders only react
# React-specific route: renders only the React micro-frontend
http://localhost:8080/react

# renders only vue
# Vue-specific route: renders only the Vue micro-frontend
http://localhost:8080/vue
```

The application is configured to run on port 8080 by default. If this port is in use, you may need to stop other services or modify the webpack configuration to use a different port.

## Blog reference

For a comprehensive understanding of micro-frontends, their benefits, and implementation strategies, refer to our in-depth blog post:

[Micro-Frontend—Why and How?](https://www.syncfusion.com/blogs/post/micro-frontend-why-and-how.aspx)

This article covers architectural patterns, best practices for micro-frontend design, and practical examples using Single-SPA with various frontend frameworks.