Add Zephyr to existing application

Quick Start Examples

For developers initiating new applications, we recommend starting with the following introductory examples:

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:

Terminal
npm i zephyr-webpack-plugin --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.