Modernjs plugin for Zephyr
npm install zephyr-modernjs-pluginA Modern.js plugin for deploying applications with Zephyr Cloud. This plugin integrates seamlessly with Modern.js framework to enable application federation and deployment capabilities.
The fastest way to get started is to use create-zephyr-apps to generate a new Modern.js application with Zephyr integration:
``bash`
npx create-zephyr-apps@latest
For more information, please refer to our documentation for Modern.js and Zephyr integration.
`bashnpm
npm install --save-dev zephyr-modernjs-plugin
Usage
Add the plugin to your Modern.js configuration:
`typescript
// modern.config.ts
import { defineConfig } from '@modern-js/app-tools';
import { withZephyr } from 'zephyr-modernjs-plugin';export default defineConfig({
output: {
distPath: {
html: './',
},
},
html: {
outputStructure: 'flat',
},
source: {
mainEntryName: 'index',
},
runtime: {
router: true,
},
plugins: [
appTools({
bundler: 'rspack', // Set to 'webpack' to enable webpack
}),
withZephyr(), // Must be last
],
});
`Required Configuration
The plugin requires the following Modern.js configuration to work properly:
$3
`typescript
output: {
distPath: {
html: './', // HTML files at root of dist
},
}
`$3
`typescript
html: {
outputStructure: 'flat', // Flat structure for assets
}
`$3
`typescript
source: {
mainEntryName: 'index', // Main entry point name
}
`Bundler Support
The plugin works with both Webpack and Rspack bundlers:
$3
`typescript
plugins: [
appTools({
bundler: 'rspack',
}),
withZephyr(),
];
`$3
`typescript
plugins: [
appTools({
bundler: 'webpack',
}),
withZephyr(),
];
`Features
- š Seamless deployment during Modern.js build
- ā” Support for both Webpack and Rspack bundlers
- š¦ Automatic asset optimization
- šļø Application federation capabilities
- š§ Zero-config setup with required configuration
- š Build analytics and monitoring
- š Global CDN distribution
Project Structure
Your Modern.js project should follow this structure:
`
my-modernjs-app/
āāā src/
ā āāā routes/
ā ā āāā layout.tsx
ā ā āāā page.tsx
ā āāā index.ts
āāā modern.config.ts
āāā package.json
`Getting Started
1. Install the plugin in your Modern.js project
2. Add the required configuration to
modern.config.ts
3. Add the plugin to your plugins array (ensure it's last)
4. Build your application with npm run build
5. Your app will be automatically deployed to Zephyr CloudBuild Scripts
Add these scripts to your
package.json:`json
{
"scripts": {
"dev": "modern dev",
"build": "modern build",
"serve": "modern serve"
}
}
``- Modern.js 2.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:
- modern-js - Complete Modern.js setup with Zephyr
We welcome contributions! Please read our contributing guidelines for more information.
Licensed under the Apache-2.0 License. See LICENSE for more information.