Vite plugin for Zephyr
npm install vite-plugin-zephyrA Vite plugin for deploying applications with Zephyr Cloud. This plugin integrates with Vite's build process to enable seamless deployment of your applications with Module Federation support. Read more from our documentation here.
The fastest way to get started is to use create-zephyr-apps to generate a new Vite application with Zephyr integration and there are various vite examples available:
``bash`
npx create-zephyr-apps@latest
`bashnpm
npm install --save-dev vite-plugin-zephyr
Usage
$3
Add the plugin to your Vite configuration:
`javascript
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { withZephyr } from 'vite-plugin-zephyr';export default defineConfig({
plugins: [react(), withZephyr()],
build: {
target: 'chrome89',
},
});
`$3
For microfrontend applications using Module Federation:
`javascript
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { withZephyr, type ModuleFederationOptions } from 'vite-plugin-zephyr';const mfConfig = {
name: 'my-app',
remotes: {
shared: 'shared@http://localhost:3001/remoteEntry.js',
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true },
},
};
export default defineConfig({
plugins: [
react(),
withZephyr({ mfConfig })
],
build: {
target: 'chrome89',
},
});
`$3
`typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { withZephyr, type ModuleFederationOptions } from 'vite-plugin-zephyr';const mfConfig: ModuleFederationOptions = {
name: 'host-app',
remotes: {
'remote-app': 'remoteApp@http://localhost:3001/remoteEntry.js',
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true },
},
};
export default defineConfig({
plugins: [react(), withZephyr({ mfConfig })],
build: {
target: 'chrome89',
},
});
`Features
- 🚀 Seamless deployment during Vite build
- 🏗️ Module Federation support via @module-federation/vite
- 📦 Asset optimization and caching
- 🔧 Zero-config setup for simple applications
- 📊 Build analytics and monitoring
- 🌐 Global CDN distribution
- ⚡ Hot module replacement in development
Module Federation Support
This plugin uses the official vite plugin from Module Federation under the hood, providing:
- Host Applications: Consume remote modules from other applications
- Remote Applications: Expose modules for consumption by host applications
- Shared Dependencies: Efficient sharing of common libraries
- Dynamic Imports: Runtime loading of remote modules
Getting Started
1. Install the plugin in your Vite project
2. Add it to your Vite configuration
3. Configure Module Federation (if needed) for microfrontends
4. Build your application with
vite build
5. Your app will be automatically deployed to Zephyr CloudBuild Scripts
Add these scripts to your
package.json:`json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
``- Vite 4.x or higher
- Node.js 18 or higher
- Zephyr Cloud account (sign up at zephyr-cloud.io)
Check out our examples directory for complete working examples:
- vite-react-ts - Basic React + TypeScript setup
- vite-react-mf - Module Federation setup with host and remote
We welcome contributions! Please read our contributing guidelines for more information.
Licensed under the Apache-2.0 License. See LICENSE for more information.