Skip to content

Commit 1200345

Browse files
naltatisnaltatis
committed
🐝 better readme
1 parent 89ab728 commit 1200345

3 files changed

Lines changed: 71 additions & 151 deletions

File tree

‎README.md‎

Lines changed: 71 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -2,184 +2,104 @@
22

33
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).
44

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

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

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

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

14-
Ether way, you need to install the npm dependencies in the root folder before running the commands.
13+
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.
1514

16-
```
17-
npm install
18-
```
19-
20-
In the examples different port numbers are used to indicate ownership. The following table shows which teams owns which application:
21-
22-
| Port | Team | Responsibility |
23-
| ------ | ------------- | -------------------------------------- |
24-
| `3000` | - shared - | infrastructure (web-server, app shell) |
25-
| `3001` | Team Decide | product page |
26-
| `3002` | Team Inspire | homepage, search, recommendations |
27-
| `3003` | Team Checkout | cart, checkout process |
28-
29-
### 1. Pages & Links
30-
31-
**in one terminal**
32-
33-
```
34-
npm run 01_pages_links
35-
```
36-
37-
**using separate terminals**
38-
39-
```
40-
npx mfserve --listen 3001 01_pages_links/team-decide
41-
npx mfserve --listen 3002 01_pages_links/team-inspire
42-
```
43-
44-
Go to http://localhost:3001/product/porsche in your browser.
45-
46-
### 2. Iframe
47-
48-
**in one terminal**
49-
50-
```
51-
npm run 02_iframe
52-
```
53-
54-
**using separate terminals**
55-
56-
```
57-
npx mfserve --listen 3001 02_iframe/team-decide
58-
npx mfserve --listen 3002 02_iframe/team-inspire
59-
```
60-
61-
Go to http://localhost:3001/product/porsche in your browser.
62-
63-
### 3. AJAX
64-
65-
**in one terminal**
66-
67-
```
68-
npm run 03_ajax
69-
```
70-
71-
**using separate terminals**
72-
73-
```
74-
npx mfserve --listen 3001 03_ajax/team-decide
75-
npx mfserve --listen 3002 --cors 03_ajax/team-inspire
76-
```
15+
2. Make sure you have [Node.js](https://nodejs.org/) (v12 or newer) installed.
7716

78-
Go to http://localhost:3001/product/porsche in your browser.
17+
```
18+
$ node -v
19+
v14.4.0
20+
```
7921

80-
### 3. Namespaced
22+
3. Go into the main directory and install all required dependencies.
8123

82-
**in one terminal**
24+
```
25+
cd micro-frontends-in-action-code
26+
npm install
27+
```
8328

84-
```
85-
npm run 04_namespaced
86-
```
87-
88-
**using separate terminals**
89-
90-
```
91-
npx mfserve --listen 3001 04_namespaced/team-decide
92-
npx mfserve --listen 3002 --cors 04_namespaced/team-inspire
93-
```
94-
95-
Go to http://localhost:3001/product/porsche in your browser.
96-
97-
### 5. Routing
98-
99-
**in one terminal (doesn't work on Windows, use the commands below)**
100-
101-
```
102-
npm run 04_routing
103-
```
29+
4. Install Nginx on your machine. The `nginx` executable only has to be present - no configuration required.
10430

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

107-
```
108-
# on unix
109-
nginx -c "`pwd`/04_routing/webserver/nginx.conf"
110-
# on windows
111-
cd nginx-1.15.12; .\nginx.exe -c ..\04_routing\webserver\nginx.conf
35+
Five examples require Nginx:
11236

113-
npx mfserve --listen 3001 04_routing/team-decide
114-
115-
npx mfserve --listen 3002 04_routing/team-inspire
116-
```
37+
- `04_routing`
38+
- `05_ssi`
39+
- `06_timeouts_down`
40+
- `16_universal`
41+
- `18_asset_registration_include`
11742

118-
Go to http://localhost:3000/product/porsche in your browser.
43+
### Running the code
11944

120-
### 6. SSI
45+
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]`.
12146

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

12449
```
12550
npm run 05_ssi
12651
```
12752

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

130-
```
131-
# on unix
132-
nginx -c "`pwd`/05_ssi/webserver/nginx.conf"
133-
# on windows
134-
cd nginx-1.15.12; .\nginx.exe -c ..\05_ssi\webserver\nginx.conf
56+
![console output](console.png)
13557

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

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

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

143-
### 7. Timeouts
64+
**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).
14465

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

147-
```
148-
npm run 06_timeouts
149-
npm run 06_timeouts_with_delay
150-
```
68+
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`).
15169

152-
**using separate terminals**
70+
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.
15371

154-
```
155-
# on unix
156-
nginx -c "`pwd`/06_timeouts/webserver/nginx.conf"
157-
# on windows
158-
cd nginx-1.15.12; .\nginx.exe -c ..\06_timeouts\webserver\nginx.conf
159-
160-
npx mfserve --listen 3001 06_timeouts/team-decide
161-
162-
# without delay
163-
npx mfserve --listen 3002 06_timeouts/team-inspire
164-
# with delay
165-
npx mfserve --listen 3002 --delay 1000 06_timeouts/team-inspire
166-
```
167-
168-
Go to http://localhost:3000/product/eicher in your browser.
169-
170-
### 8. Podium
171-
172-
**in one terminal**
173-
174-
```
175-
npm run 07_podium
176-
```
177-
178-
**using separate terminals**
179-
180-
```
181-
cd 07_podium/team-decide; npm install; npm start
182-
cd 07_podium/team-inspire; npm install; npm start
183-
```
72+
| Port | Team | Responsibility |
73+
| ------ | ------------- | -------------------------------------- |
74+
| `3000` | - shared - | infrastructure (web-server, app shell) |
75+
| `3001` | Team Decide | product page |
76+
| `3002` | Team Inspire | homepage, search, recommendations |
77+
| `3003` | Team Checkout | cart, checkout process |
18478

185-
Go to http://localhost:3001/product in your browser.
79+
## List of all examples
80+
81+
Here is a list of all run commands with a reference to the chapter they belong to.
82+
83+
| run script | name | chapter |
84+
| --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
85+
| `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) |
86+
| `npm run 02_iframe` | iFrames | [2](https://livebook.manning.com/book/micro-frontends-in-action/chapter-2/?a_aid=mfia&a_bid=5f09fdeb) |
87+
| `npm run 03_ajax` | Namespaces | [3](https://livebook.manning.com/book/micro-frontends-in-action/chapter-3/?a_aid=mfia&a_bid=5f09fdeb) |
88+
| `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) |
89+
| `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) |
90+
| `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) |
91+
| `npm run 07_podium` | Podium | [4](https://livebook.manning.com/book/micro-frontends-in-action/chapter-4/?a_aid=mfia&a_bid=5f09fdeb) |
92+
| `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) |
93+
| `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) |
94+
| `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) |
95+
| `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) |
96+
| `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) |
97+
| `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) |
98+
| `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) |
99+
| `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) |
100+
| `npm run 16_universal` | Universal Rendering | [8](https://livebook.manning.com/book/micro-frontends-in-action/chapter-8/?a_aid=mfia&a_bid=5f09fdeb) |
101+
| `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) |
102+
| `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) |
103+
| `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) |
104+
| `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) |
105+
| `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) |

‎browser.png‎

188 KB
Loading

‎console.png‎

269 KB
Loading

0 commit comments

Comments
 (0)