diff --git a/README.md b/README.md index b5b32dd..f7d82ed 100644 --- a/README.md +++ b/README.md @@ -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.