Skip to content

Commit

Permalink
🐝 better readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@naltatis
naltatis committed Jul 6, 2020
1 parent 89ab728 commit 1200345
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 151 deletions.
222 changes: 71 additions & 151 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,184 +2,104 @@

This is the example code that goes along with the Manning book [Micro Frontends in Action](https://www.manning.com/books/micro-frontends-in-action?a_aid=mfia&a_bid=5f09fdeb).

Try the running examples at [https://the-tractor.store](https://the-tractor.store) 🚜
## Hosted examples

## Running the code locally
You can interact with the running examples here:<br> [https://the-tractor.store](https://the-tractor.store) 🚜

All examples involve starting up multiple applications which are owned by different teams. There are two ways of running these:
## Local machine

1. In **one terminal window** using `npm run [x_name]`
2. In **separate terminal windows** using the individual `npx ...` commands
### Prerequisites

Ether way, you need to install the npm dependencies in the root folder before running the commands.
1. Clone [this git repository](https://github.com/naltatis/micro-frontends-in-action-code) or [download & extract the zip](https://github.com/naltatis/micro-frontends-in-action-code/archive/master.zip) to your local machine.

```
npm install
```

In the examples different port numbers are used to indicate ownership. The following table shows which teams owns which application:

| Port | Team | Responsibility |
| ------ | ------------- | -------------------------------------- |
| `3000` | - shared - | infrastructure (web-server, app shell) |
| `3001` | Team Decide | product page |
| `3002` | Team Inspire | homepage, search, recommendations |
| `3003` | Team Checkout | cart, checkout process |

### 1. Pages & Links

**in one terminal**

```
npm run 01_pages_links
```

**using separate terminals**

```
npx mfserve --listen 3001 01_pages_links/team-decide
npx mfserve --listen 3002 01_pages_links/team-inspire
```

Go to http://localhost:3001/product/porsche in your browser.

### 2. Iframe

**in one terminal**

```
npm run 02_iframe
```

**using separate terminals**

```
npx mfserve --listen 3001 02_iframe/team-decide
npx mfserve --listen 3002 02_iframe/team-inspire
```

Go to http://localhost:3001/product/porsche in your browser.

### 3. AJAX

**in one terminal**

```
npm run 03_ajax
```

**using separate terminals**

```
npx mfserve --listen 3001 03_ajax/team-decide
npx mfserve --listen 3002 --cors 03_ajax/team-inspire
```
2. Make sure you have [Node.js](https://nodejs.org/) (v12 or newer) installed.

Go to http://localhost:3001/product/porsche in your browser.
```
$ node -v
v14.4.0
```

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

**in one terminal**
```
cd micro-frontends-in-action-code
npm install
```

```
npm run 04_namespaced
```

**using separate terminals**

```
npx mfserve --listen 3001 04_namespaced/team-decide
npx mfserve --listen 3002 --cors 04_namespaced/team-inspire
```

Go to http://localhost:3001/product/porsche in your browser.

### 5. Routing

**in one terminal (doesn't work on Windows, use the commands below)**

```
npm run 04_routing
```
4. Install Nginx on your machine. The `nginx` executable only has to be present - no configuration required.

**using separate terminals**
- _macOS (via [Homebrew](https://brew.sh)):_ `brew install nginx`
- _Debian/Ubuntu:_ `sudo apt-get install nginx`
- _Windows:_ Binaries included in this repository. No installation required.

```
# on unix
nginx -c "`pwd`/04_routing/webserver/nginx.conf"
# on windows
cd nginx-1.15.12; .\nginx.exe -c ..\04_routing\webserver\nginx.conf
Five examples require Nginx:

npx mfserve --listen 3001 04_routing/team-decide
npx mfserve --listen 3002 04_routing/team-inspire
```
- `04_routing`
- `05_ssi`
- `06_timeouts_down`
- `16_universal`
- `18_asset_registration_include`

Go to http://localhost:3000/product/porsche in your browser.
### Running the code

### 6. SSI
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]`.

**in one terminal (doesn't work on Windows, use the commands below)**
The following command will start example #5:

```
npm run 05_ssi
```

**using separate terminals**
The script **starts all applications** and **shows a combined log output**.<br>
_NOTE: Nginx stdout do not work on Windows_.

```
# on unix
nginx -c "`pwd`/05_ssi/webserver/nginx.conf"
# on windows
cd nginx-1.15.12; .\nginx.exe -c ..\05_ssi\webserver\nginx.conf
![console output](console.png)

npx mfserve --listen 3001 05_ssi/team-decide
It **waits until the servers are ready** and **opens the example page** in your default browser.

npx mfserve --listen 3002 05_ssi/team-inspire
```
![example running in your browser](browser.png)

Go to http://localhost:3000/product/porsche in your browser.
You can stop the example by hitting `[CMD]` + `C` in your terminal.

### 7. Timeouts
**NOTE:** The code should run on all platforms. However, if you're having troubles feel free to [create an issue](https://github.com/naltatis/micro-frontends-in-action-code/issues).

**in one terminal (doesn't work on Windows, use the commands below)**
## Folder structure and ports

```
npm run 06_timeouts
npm run 06_timeouts_with_delay
```
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`).

**using separate terminals**
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.

```
# on unix
nginx -c "`pwd`/06_timeouts/webserver/nginx.conf"
# on windows
cd nginx-1.15.12; .\nginx.exe -c ..\06_timeouts\webserver\nginx.conf
npx mfserve --listen 3001 06_timeouts/team-decide
# without delay
npx mfserve --listen 3002 06_timeouts/team-inspire
# with delay
npx mfserve --listen 3002 --delay 1000 06_timeouts/team-inspire
```

Go to http://localhost:3000/product/eicher in your browser.

### 8. Podium

**in one terminal**

```
npm run 07_podium
```

**using separate terminals**

```
cd 07_podium/team-decide; npm install; npm start
cd 07_podium/team-inspire; npm install; npm start
```
| Port | Team | Responsibility |
| ------ | ------------- | -------------------------------------- |
| `3000` | - shared - | infrastructure (web-server, app shell) |
| `3001` | Team Decide | product page |
| `3002` | Team Inspire | homepage, search, recommendations |
| `3003` | Team Checkout | cart, checkout process |

Go to http://localhost:3001/product in your browser.
## List of all examples

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

| run script | name | chapter |
| --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `npm run 01_pages_links` | Pages & Links | [2](https://livebook.manning.com/book/micro-frontends-in-action/chapter-2/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 02_iframe` | iFrames | [2](https://livebook.manning.com/book/micro-frontends-in-action/chapter-2/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 03_ajax` | Namespaces | [3](https://livebook.manning.com/book/micro-frontends-in-action/chapter-3/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 04_routing` | Server-side Routing | [3](https://livebook.manning.com/book/micro-frontends-in-action/chapter-3/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 05_ssi` | Server-side Integration | [4](https://livebook.manning.com/book/micro-frontends-in-action/chapter-4/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 06_timeouts_down`<br>`npm run 06_timeouts_short_delay`<br>`npm run 06_timeouts_long_delay` | Timeouts & Fallbacks | [4](https://livebook.manning.com/book/micro-frontends-in-action/chapter-4/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 07_podium` | Podium | [4](https://livebook.manning.com/book/micro-frontends-in-action/chapter-4/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 08_web_components` | Client-side Composition | [5](https://livebook.manning.com/book/micro-frontends-in-action/chapter-5/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 09_shadow_dom` | Style Isolation & ShadowDOM | [5](https://livebook.manning.com/book/micro-frontends-in-action/chapter-5/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 10_parent_child_communication` | Parent-Child Communication | [6](https://livebook.manning.com/book/micro-frontends-in-action/chapter-6/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 11_child_parent_communication` | Child-Parent Communication | [6](https://livebook.manning.com/book/micro-frontends-in-action/chapter-6/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 12_fragment_fragment_communication` | Fragment-Fragment Communication | [6](https://livebook.manning.com/book/micro-frontends-in-action/chapter-6/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 13_client_side_flat_routing` | Client-side Routing (Flat) | [7](https://livebook.manning.com/book/micro-frontends-in-action/chapter-7/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 14_client_side_two_level_routing` | Client-side Routing (Two-Tiered) | [7](https://livebook.manning.com/book/micro-frontends-in-action/chapter-7/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 15_single_spa` | Single SPA | [7](https://livebook.manning.com/book/micro-frontends-in-action/chapter-7/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 16_universal` | Universal Rendering | [8](https://livebook.manning.com/book/micro-frontends-in-action/chapter-8/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 17_asset_client_redirect` | Asset Client-side Redirect | [10](https://livebook.manning.com/book/micro-frontends-in-action/chapter-10/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 18_asset_registration_include` | Asset Registration Include | [10](https://livebook.manning.com/book/micro-frontends-in-action/chapter-10/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 19_shared_vendor_webpack_dll` | Shared Vendor Libraries via Webpack DLLPlugin | [11](https://livebook.manning.com/book/micro-frontends-in-action/chapter-11/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 20_shared_vendor_rollup_absolute_imports` | Shared Vendor Libraries via Rollup.js and Absolute ES Module Imports | [11](https://livebook.manning.com/book/micro-frontends-in-action/chapter-11/?a_aid=mfia&a_bid=5f09fdeb) |
| `npm run 21_local_development` | Local Development | [14](https://livebook.manning.com/book/micro-frontends-in-action/chapter-14/?a_aid=mfia&a_bid=5f09fdeb) |
Binary file added browser.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added console.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1200345

Please sign in to comment.