Sample Code - Micro Frontends in Action

This is the example code that goes along with the Manning book Micro Frontends in Action.

Hosted examples

You can interact with the running examples here:
https://the-tractor.store 🚜

Local machine

Prerequisites

1. Clone this git repository or download & extract the zip to your local machine.

2. Make sure you have Node.js (v12 or newer) installed.

   $ node -v
   v14.4.0
   

3. Go into the main directory and install all required dependencies.

   cd micro-frontends-in-action-code
   npm install
   

4. Install Nginx on your machine. The nginx executable only has to be present - no configuration required.

   • macOS (via Homebrew): brew install nginx
   • Debian/Ubuntu: sudo apt-get install nginx
   • Windows: Binaries included in this repository. No installation required.

   Five examples require Nginx:

   • 04_routing
   • 05_ssi
   • 06_timeouts_down
   • 16_universal
   • 18_asset_registration_include

Running the code

All examples involve starting up multiple applications which are owned by different teams. There is an NPM run for each directory. You can start examples like this: npm run [name_of_example].

The following command will start example #5:

npm run 05_ssi

The script starts all applications and shows a combined log output.
NOTE: Nginx stdout do not work on Windows.

It waits until the servers are ready and opens the example page in your default browser.

You can stop the example by hitting [CMD] + C in your terminal.

NOTE: The code should run on all platforms. However, if you're having troubles feel free to create an issue.

Folder structure and ports

Each example has its own folder (e.g. 05_ssi). Each example folder contains a subfolder that contains the actual application (e.g. nginx, decide, inspire).

Different port numbers are used to indicate ownership. This following table shows which teams owns which application. Make sure ports 3000 to 3003 are not allocated by another process on your machine.

List of all examples

Here is a list of all run commands with a reference to the chapter they belong to.