Skip to content

Commit 8302c3d

Browse files
ryok90ryok90
authored
chore: add and adjust README files (#106)
1 parent 6606235 commit 8302c3d

File tree

24 files changed

+1781
-529
lines changed

24 files changed

+1781
-529
lines changed

‎examples/angular-vite/README.md‎

Lines changed: 51 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,61 @@
1-
# Angular Vite Zephyr Template
1+
# Angular + Vite
22

3-
A minimal application that uses Angular + Vite + Zephyr for development and building.
3+
An Angular application built with Vite bundler, showcasing fast development experience with modern tooling and Zephyr Cloud integration.
44

5-
## Setup
5+
## Technology Stack
66

7-
```bash
8-
npm install
9-
```
7+
- **Framework**: Angular 19
8+
- **Bundler**: Vite 5
9+
- **Language**: TypeScript
10+
- **Development**: Hot Module Replacement (HMR)
11+
- **Build Plugin**: @analogjs/vite-plugin-angular
12+
- **Deployment**: Zephyr Cloud (via vite-plugin-zephyr)
1013

11-
## Development
14+
## Prerequisites
1215

13-
```bash
14-
npm run dev
15-
```
16+
- Node.js (version 16 or higher)
17+
- pnpm (recommended) or npm
1618

17-
Navigate to http://localhost:5173 to see the running application
19+
## Getting Started
1820

19-
## Build
21+
1. **Install dependencies**
22+
```bash
23+
pnpm install
24+
```
2025

21-
```bash
22-
npm run build
23-
```
26+
2. **Start development server**
27+
```bash
28+
pnpm dev
29+
```
30+
31+
Navigate to `http://localhost:5173` to see the running application
2432

25-
## Preview
33+
3. **Build for production**
34+
```bash
35+
pnpm build
36+
```
2637

27-
```bash
28-
npm run preview
29-
```
38+
4. **Preview production build**
39+
```bash
40+
pnpm preview
41+
```
42+
43+
## Zephyr Cloud Integration
44+
45+
This example is configured to deploy to Zephyr Cloud automatically when built. The `vite-plugin-zephyr` handles the deployment process seamlessly.
46+
47+
## About Zephyr Cloud
48+
49+
Zephyr Cloud is a micro-frontend deployment platform that provides:
50+
- **Auto-deployment**: Seamless deployment from your build process
51+
- **Live preview links**: Instant preview URLs for your applications
52+
- **SemVer versioning**: Semantic versioning for your frontend modules
53+
- **Rollback capabilities**: Easy rollback to previous versions
54+
- **Enterprise-scale orchestration**: Built for composable frontend systems
55+
56+
## Learn More
57+
58+
- [Angular Documentation](https://angular.io/)
59+
- [Vite Documentation](https://vitejs.dev/)
60+
- [AnalogJS Vite Plugin](https://analogjs.org/)
61+
- [Zephyr Cloud Documentation](https://docs.zephyr-cloud.io)

‎examples/create-default-webpack-mf/README.md‎

Lines changed: 84 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,91 @@
1-
# Module Federation
1+
# Webpack Module Federation Example
22

3-
## How to use
3+
A basic Module Federation setup with two React applications demonstrating micro-frontend architecture using Webpack 5.
44

5-
Run the following commands in the root directory.
5+
## Technology Stack
66

7-
```bash
8-
yarn
9-
yarn start
10-
```
11-
Both `app1` and `app2` are independently deployed apps:
7+
- **Framework**: React 18
8+
- **Architecture**: Module Federation
9+
- **Bundler**: Webpack 5
10+
- **Language**: JavaScript
11+
- **Deployment**: Zephyr Cloud
12+
- **Development**: Webpack Dev Server
1213

13-
- `app1`: http://localhost:3001
14-
- `app2`: http://localhost:3002
14+
## Prerequisites
1515

16-
To be able to use this example, build app2. Then find it in https://app.zephyr-cloud.io and set link to 'remoteEntry.js' file. Link should be set in variable app2Url (/app1/src/index.js).
16+
- Node.js (version 16 or higher)
17+
- pnpm (recommended) or yarn/npm
1718

18-
Check out this link below for more examples:
19+
## Getting Started
1920

20-
[https://github.com/module-federation/module-federation-examples](https://github.com/module-federation/module-federation-examples)
21+
1. **Install dependencies**
22+
```bash
23+
pnpm install
24+
```
25+
26+
2. **Start development servers**
27+
```bash
28+
pnpm start
29+
```
30+
31+
This starts both applications concurrently:
32+
- **app1** (Host): http://localhost:3001
33+
- **app2** (Remote): http://localhost:3002
34+
35+
Or start them individually:
36+
```bash
37+
cd app1 && pnpm start # Host on port 3001
38+
cd app2 && pnpm start # Remote on port 3002
39+
```
40+
41+
3. **Build for production**
42+
```bash
43+
pnpm build
44+
```
45+
46+
## Project Structure
47+
48+
This example consists of two federated applications:
49+
50+
- **`app1/`** - Host application that consumes remotes
51+
- **`app2/`** - Remote application that exposes components
52+
53+
## Zephyr Cloud Integration
54+
55+
To use this example with Zephyr Cloud:
56+
57+
1. Build and deploy `app2` to Zephyr Cloud
58+
2. Copy the deployment URL for the `remoteEntry.js` file
59+
3. Update the `app2Url` variable in `/app1/src/index.js` with the Zephyr Cloud URL
60+
4. Build and deploy `app1`
61+
62+
## Module Federation Configuration
63+
64+
Each application has its own `webpack.config.js` with Module Federation plugin configuration:
65+
66+
- **app1**: Configured as a host to consume remote modules
67+
- **app2**: Configured as a remote to expose components
68+
69+
## About Module Federation
70+
71+
Module Federation enables:
72+
- **Independent deployment**: Each micro-frontend can be deployed separately
73+
- **Runtime composition**: Applications are composed at runtime, not build time
74+
- **Shared dependencies**: Efficient sharing of common libraries
75+
- **Technology diversity**: Different teams can use different tech stacks
76+
77+
## About Zephyr Cloud
78+
79+
Zephyr Cloud is a micro-frontend deployment platform that provides:
80+
- **Auto-deployment**: Seamless deployment from your build process
81+
- **Live preview links**: Instant preview URLs for your applications
82+
- **SemVer versioning**: Semantic versioning for your frontend modules
83+
- **Rollback capabilities**: Easy rollback to previous versions
84+
- **Enterprise-scale orchestration**: Built for composable frontend systems
85+
86+
## Learn More
87+
88+
- [Module Federation Documentation](https://module-federation.io/)
89+
- [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/)
90+
- [Module Federation Examples](https://github.com/module-federation/module-federation-examples)
91+
- [Zephyr Cloud Documentation](https://docs.zephyr-cloud.io)

‎examples/create-default-webpack-mf/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
"name": "create-default-webpack-mf",
33
"version": "0.0.1",
44
"scripts": {
5+
"start": "concurrently \"pnpm --filter=./app2 start\" \"pnpm --filter=./app1 start\"",
56
"build": "pnpm --filter=./app2 build && pnpm --filter=./app1 build"
7+
},
8+
"devDependencies": {
9+
"concurrently": "^8.2.2"
610
}
711
}

‎examples/create-mf-app-rspack/README.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# React + Rspack + Module Federation Application
2+
3+
A React application built with Rspack bundler demonstrating Module Federation capabilities with fast builds and modern development experience.
4+
5+
## Technology Stack
6+
7+
- **Framework**: React with TypeScript
8+
- **Architecture**: Module Federation
9+
- **Bundler**: Rspack
10+
- **Language**: TypeScript
11+
- **Deployment**: Zephyr Cloud
12+
13+
## Prerequisites
14+
15+
- Node.js (version 16 or higher)
16+
- pnpm (recommended) or npm
17+
18+
## Getting Started
19+
20+
1. **Install dependencies**
21+
```bash
22+
pnpm install
23+
```
24+
25+
2. **Start development server**
26+
```bash
27+
pnpm dev
28+
```
29+
30+
The application will be available at `http://localhost:3000`
31+
32+
3. **Build for production**
33+
```bash
34+
pnpm build
35+
```
36+
37+
## Module Federation Configuration
38+
39+
This application is configured as a Module Federation container with:
40+
- **Name**: `create_mf_app_rspack`
41+
- **Remote Entry**: `remoteEntry.js`
42+
- **Shared Dependencies**: React, React-DOM, React-Router-DOM (all eager loaded)
43+
44+
The application uses the `zephyr-rspack-plugin` for seamless integration with Zephyr Cloud deployment.
45+
46+
## Zephyr Cloud Integration
47+
48+
This example is configured to deploy to Zephyr Cloud automatically when built. The Zephyr plugin handles Module Federation deployment, ensuring proper remote entry generation and dependency sharing. After running the build command, your application will be deployed and a preview URL will be provided.
49+
50+
## About Zephyr Cloud
51+
52+
Zephyr Cloud is a micro-frontend deployment platform that provides:
53+
- **Auto-deployment**: Seamless deployment from your build process
54+
- **Live preview links**: Instant preview URLs for your applications
55+
- **SemVer versioning**: Semantic versioning for your frontend modules
56+
- **Rollback capabilities**: Easy rollback to previous versions
57+
- **Enterprise-scale orchestration**: Built for composable frontend systems
58+
59+
## Learn More
60+
61+
- [Rspack Documentation](https://rspack.dev/)
62+
- [React Documentation](https://reactjs.org/)
63+
- [Zephyr Cloud Documentation](https://docs.zephyr-cloud.io)

0 commit comments

Comments
 (0)