Skip to content

chore: add and adjust README files #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 26, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 51 additions & 19 deletions examples/angular-vite/README.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,61 @@
# Angular Vite Zephyr Template
# Angular + Vite

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

## Setup
## Technology Stack

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

## Development
## Prerequisites

```bash
npm run dev
```
- Node.js (version 16 or higher)
- pnpm (recommended) or npm

Navigate to http://localhost:5173 to see the running application
## Getting Started

## Build
1. **Install dependencies**
```bash
pnpm install
```

```bash
npm run build
```
2. **Start development server**
```bash
pnpm dev
```

Navigate to `http://localhost:5173` to see the running application

## Preview
3. **Build for production**
```bash
pnpm build
```

```bash
npm run preview
```
4. **Preview production build**
```bash
pnpm preview
```

## Zephyr Cloud Integration

This example is configured to deploy to Zephyr Cloud automatically when built. The `vite-plugin-zephyr` handles the deployment process seamlessly.

## About Zephyr Cloud

Zephyr Cloud is a micro-frontend deployment platform that provides:
- **Auto-deployment**: Seamless deployment from your build process
- **Live preview links**: Instant preview URLs for your applications
- **SemVer versioning**: Semantic versioning for your frontend modules
- **Rollback capabilities**: Easy rollback to previous versions
- **Enterprise-scale orchestration**: Built for composable frontend systems

## Learn More

- [Angular Documentation](https://angular.io/)
- [Vite Documentation](https://vitejs.dev/)
- [AnalogJS Vite Plugin](https://analogjs.org/)
- [Zephyr Cloud Documentation](https://docs.zephyr-cloud.io)
97 changes: 84 additions & 13 deletions examples/create-default-webpack-mf/README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,91 @@
# Module Federation
# Webpack Module Federation Example

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

Run the following commands in the root directory.
## Technology Stack

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

- `app1`: http://localhost:3001
- `app2`: http://localhost:3002
## Prerequisites

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).
- Node.js (version 16 or higher)
- pnpm (recommended) or yarn/npm

Check out this link below for more examples:
## Getting Started

[https://github.com/module-federation/module-federation-examples](https://github.com/module-federation/module-federation-examples)
1. **Install dependencies**
```bash
pnpm install
```

2. **Start development servers**
```bash
pnpm start
```

This starts both applications concurrently:
- **app1** (Host): http://localhost:3001
- **app2** (Remote): http://localhost:3002

Or start them individually:
```bash
cd app1 && pnpm start # Host on port 3001
cd app2 && pnpm start # Remote on port 3002
```

3. **Build for production**
```bash
pnpm build
```

## Project Structure

This example consists of two federated applications:

- **`app1/`** - Host application that consumes remotes
- **`app2/`** - Remote application that exposes components

## Zephyr Cloud Integration

To use this example with Zephyr Cloud:

1. Build and deploy `app2` to Zephyr Cloud
2. Copy the deployment URL for the `remoteEntry.js` file
3. Update the `app2Url` variable in `/app1/src/index.js` with the Zephyr Cloud URL
4. Build and deploy `app1`

## Module Federation Configuration

Each application has its own `webpack.config.js` with Module Federation plugin configuration:

- **app1**: Configured as a host to consume remote modules
- **app2**: Configured as a remote to expose components

## About Module Federation

Module Federation enables:
- **Independent deployment**: Each micro-frontend can be deployed separately
- **Runtime composition**: Applications are composed at runtime, not build time
- **Shared dependencies**: Efficient sharing of common libraries
- **Technology diversity**: Different teams can use different tech stacks

## About Zephyr Cloud

Zephyr Cloud is a micro-frontend deployment platform that provides:
- **Auto-deployment**: Seamless deployment from your build process
- **Live preview links**: Instant preview URLs for your applications
- **SemVer versioning**: Semantic versioning for your frontend modules
- **Rollback capabilities**: Easy rollback to previous versions
- **Enterprise-scale orchestration**: Built for composable frontend systems

## Learn More

- [Module Federation Documentation](https://module-federation.io/)
- [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/)
- [Module Federation Examples](https://github.com/module-federation/module-federation-examples)
- [Zephyr Cloud Documentation](https://docs.zephyr-cloud.io)
4 changes: 4 additions & 0 deletions examples/create-default-webpack-mf/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
"name": "create-default-webpack-mf",
"version": "0.0.1",
"scripts": {
"start": "concurrently \"pnpm --filter=./app2 start\" \"pnpm --filter=./app1 start\"",
"build": "pnpm --filter=./app2 build && pnpm --filter=./app1 build"
},
"devDependencies": {
"concurrently": "^8.2.2"
}
}
63 changes: 63 additions & 0 deletions examples/create-mf-app-rspack/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# React + Rspack + Module Federation Application

A React application built with Rspack bundler demonstrating Module Federation capabilities with fast builds and modern development experience.

## Technology Stack

- **Framework**: React with TypeScript
- **Architecture**: Module Federation
- **Bundler**: Rspack
- **Language**: TypeScript
- **Deployment**: Zephyr Cloud

## Prerequisites

- Node.js (version 16 or higher)
- pnpm (recommended) or npm

## Getting Started

1. **Install dependencies**
```bash
pnpm install
```

2. **Start development server**
```bash
pnpm dev
```

The application will be available at `http://localhost:3000`

3. **Build for production**
```bash
pnpm build
```

## Module Federation Configuration

This application is configured as a Module Federation container with:
- **Name**: `create_mf_app_rspack`
- **Remote Entry**: `remoteEntry.js`
- **Shared Dependencies**: React, React-DOM, React-Router-DOM (all eager loaded)

The application uses the `zephyr-rspack-plugin` for seamless integration with Zephyr Cloud deployment.

## Zephyr Cloud Integration

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.

## About Zephyr Cloud

Zephyr Cloud is a micro-frontend deployment platform that provides:
- **Auto-deployment**: Seamless deployment from your build process
- **Live preview links**: Instant preview URLs for your applications
- **SemVer versioning**: Semantic versioning for your frontend modules
- **Rollback capabilities**: Easy rollback to previous versions
- **Enterprise-scale orchestration**: Built for composable frontend systems

## Learn More

- [Rspack Documentation](https://rspack.dev/)
- [React Documentation](https://reactjs.org/)
- [Zephyr Cloud Documentation](https://docs.zephyr-cloud.io)
Loading
Loading