Zephyr Cloud Docs
Zephyr Cloud →
Zephyr Cloud →

Add Zephyr to existing application

Quick Setup with Codemod
npm
yarn
pnpm
bun
npx with-zephyr

This detects your bundler and configures Zephyr automatically. Learn more →

For manual setup, continue below.

Prerequisites

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:

For Rspack:

npm i zephyr-rspack-plugin@latest --save

For webpack:

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:

+ 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.

INFO

The first time you initiate a build with Zephyr, it will prompt you to log in by directing you to the Zephyr website. This login is required only on your first build; subsequent builds will not require a login.

We may require you to log in again if you removed your Zephyr configuration file ~/.zephyr locally.

Once logged in, you can begin developing with Zephyr.

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