Docs
Get Started
Learning
Zephyr Cloud →
Get Started
Learning
Zephyr Cloud →

Add Zephyr to existing application

Prerequisites

If you don't have nvm to manage your node version yet, head to the official nvm guide to install it.

nvm use 20

Integrating Zephyr into an Existing Application

If you already have an application and wish to enhance it with Zephyr Cloud, we have designed the integration process to be as straightforward as possible. Here's how you can seamlessly incorporate Zephyr into your existing setup:

1. Add Zephyr as a dependency

Install the package via NPM:

Rspack
webpack
Terminal
npm i zephyr-webpack-plugin@latest --save

2. Setting Up

Wrap your existing configuration settings with the necessary modifications.

With Nx
Without Nx

For Nx projects that utilize compose plugins, integrating Zephyr is straightforward and requires adding just one more plugin. To ensure proper functionality, Zephyr should be positioned as the last plugin in the composition.

Here is how you can configure it in your webpack.config.js:

webpack.config.js
+ const {withZephyr} = require('zephyr-webpack-plugin');
export default composePlugins(
    withNx(),
    withReact(),
    withModuleFederation(config),
+   withZephyr(),
    (config)=>{
    return config;
  }
);

Building the Application

Initiate the build process for your application to activate Zephyr. This action will automatically launch your default browser and prompt you for login credentials.

Once logged in, you can begin developing with Zephyr.

Read more about Vite in React + Vite and Vite + Rspack + Webpack with Module Federation.