Get started

In this section we will walk you through what you will need to start using Zephyr and enjoy its benefits by deploying an application through Zephyr and modifying configuration. We will start with installing and creating your account, then create a standalone React app. At the end of this guide, you will have your first React app deployed to Zephyr with Rspack as bundler and use our version control feature to rollback your application.

If you are curious to read more before about us, you can dive into our recipes (for more frameworks and bundlers) and features. Below guide is written based on Google chrome thus other browser's behavior might differ.

INFO

Our chrome extension is only supported on Chromium based browsers. See a list of supported browser below.

Installation and setup

1. Install Chrome Extension

Head to Chrome Web Store to install our chrome extension - Zephyr Mission Control. Click on Add to Chrome and confirm with Add extension. After you finish remember to pin the extension by clicking on on extension management tab to provide you a quicker access to Zephyr's side panel.

2. Log in

Once you click on the side panel will pop up and prompt you to log in (if you are using Microsoft Edge you will need to click on Open Side Panel).

What happens when you log in?

While we are loggin you in, we are storing your authorization information locally under ~/.zephyr in your root directly. Whenever you want to clean up your local profile information (they are JWT claims for each of the project you deployed through Zephyr), you can enter your root directory in terminal and run:

rm rf ~/.zephyr

Now you have created an account and the side panel is empty - hold up! We will get into how to use our dashboard in a bit. Let's deploy an app through Zephyr so you can see a live example of how to use our side panel.

3. Create a react app

Prerequisites
  • npm >=10
  • node >=20

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

nvm use 20

Once the prerequisites are fulfilled, we can follow Nx guide to create a standalone React app:

Terminal
npx create-nx-workspace@latest my-first-mf-app --preset=react-standalone

The creation process will ask you:

Need to install the following packages: [email protected] Ok to proceed? (y)

Press

y +
Enter
and then choose the following highlighted options.

Choose Rspack as bundler option.

NX Let's create a new workspace [https://nx.dev/getting-started/intro] ? Which bundler would you like to use? … Vite [ https://vitejs.dev/ ] Webpack [ https://webpack.js.org/ ] Rspack [ https://www.rspack.dev/ ]

Choose None.

Which bundler would you like to use? · rspack ? Test runner to use for end to end (E2E) tests … Playwright [ https://playwright.dev/ ] Cypress [ https://www.cypress.io/ ] None

When you are prompted to choose styling solution - choose Tailwind.

? Default stylesheet format … CSS SASS(.scss) [ https://sass-lang.com ] LESS [ https://lesscss.org ] tailwind [ https://tailwindcss.com ] styled-components [ https://styled-components.com ] emotion [ https://emotion.sh ] styled-jsx [ https://www.npmjs.com/package/styled-jsx ]

Choose Skip for now when you are asked to choose CI.

? Set up CI with caching, distribution and test deflaking … (it's free and can be disabled any time) Yes, for GitHub Actions with Nx Cloud Yes, for CircleCI with Nx Cloud Skip for now

Choose Skip for now when you are asked for remote caching option

? Would you like remote caching to make your build faster? (it's free and can be disabled any time) Yes Skip for now

You can see the code up to this stage here:

. If you want to use our examples to try a deployment, remember to fork it.

Why fork it

When you are trying to deploy an application, Zephyr will figure out if you have write_access based on which organization the repository belong to. Thus if you fork it, it will be under your organization and you will be able to deploy.

4. Adding Zephyr

Open the project folder we created with code editor of your choice. Within current working directory, install Zephyr's plugin by running:

Terminal
npm i zephyr-webpack-plugin

After install the plugin, open the file rspack.config.ts in project root and replace the original configuration as below

rspack.config.js
const { composePlugins, withNx, withReact } = require('@nx/rspack'); module.exports = composePlugins(withNx(), withReact(), (config) => { return config; }); const rspack = require('@rspack/core') const refreshPlugin = require('@rspack/plugin-react-refresh') const { withZephyr } = require('zephyr-webpack-plugin'); const isDev = process.env.NODE_ENV === 'development' /** * @type {import('@rspack/cli').Configuration} */ module.exports = withZephyr()({ context: __dirname, entry: { main: './src/main.tsx', }, // devServer: { // historyApiFallback: true, // port: 8080, // }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'] }, module: { rules: [ { test: /\.svg$/, type: 'asset', }, { test: /\.scss$/, use: [ { loader: 'postcss-loader', options: { postcssOptions: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, }, }, ], type: 'css', }, { test: /\.(jsx?|tsx?)$/, use: [ { loader: 'builtin:swc-loader', options: { sourceMap: true, jsc: { parser: { syntax: 'typescript', tsx: true, }, transform: { react: { runtime: 'automatic', development: isDev, refresh: isDev, }, }, }, env: { targets: [ 'chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14', ], }, }, }, ], }, ], }, plugins: [ new rspack.container.ModuleFederationPlugin({ name: 'create_mf_app_rspack', filename: 'remoteEntry.js', exposes: {}, shared: { react: { eager: true }, 'react-dom': { eager: true }, 'react-router-dom': { eager: true }, }, }), new rspack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), }), new rspack.ProgressPlugin({}), new rspack.HtmlRspackPlugin({ template: './src/index.html', }), isDev ? new refreshPlugin() : null, ].filter(Boolean), })

Now you are all set! Go back to the terminal in current project and run

Terminal
nx build

You will see the terminal output like so - your deployed URL is before the final emitting process:

Terminal
nx build NX Its time to update Nx 🎉 Your repository uses a higher version of Nx (19.2.2) than your global CLI version (18.1.2) For more information, see https://nx.dev/more-concepts/global-nx > nx run my-first-mf-app:build:production [zephyr] You are already logged in ━━━━━━━━━━━━━━━━━━━━━━━━━ (70%) sealing chunk ids [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[70]: uploading missing assets to zephyr (queued 1 out of 2) [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[70]: uploaded local snapshot in 263ms [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[70]: uploaded missing assets to zephyr (1 assets in 144ms, 236.95kb) [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[70]: deploying to https://userName_69-_my-first-mf-app_source-my-f-53eac2-ze.valorkin.dev [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[70]: deploying to https://userName_70-_my-first-mf-app_source-my-f-38438b-ze.valorkin.dev [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[70]: deploying to https://_my-first-mf-app_source-my-first-mf-app-username-ze.valorkin.dev ━━━━━━━━━━━━━━━━━━━━━━━━━ (98%) emitting emit [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[70]: build deployed in 774ms ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit PublicPath: auto asset index.html 362 bytes [emitted] asset main.js 237 KiB [emitted] (name: main) Entrypoint main 237 KiB = main.js runtime modules 6 modules + 24 modules Rspack 0.6.5 compiled successfully in 1.35 s (036ed42385758a40269f) ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— NX Successfully ran target build for project my-first-mf-app (2s)

Press

Command
and left click on the URL at the same time to open your deployed URL in your default browser. Meanwhile open your side panel by clicking on . Note that this URL is alive as long you don't delete your account and you can share it with anyone to preview it.

Every application you have deployed on Zephyr (under the same account) will be displayed under Name, categorized by repository name and their package name. Click on the dropdown menu under Version you will only the initial version of your app.

5. Deploy a new version

Now you have deployed the first version, let's add modify the app and deploy a new version. Open the file src/app/app.tsx and change the content of your home page:

src/app/app.tsx
import NxWelcome from './nx-welcome'; export function App() { return ( <div> <NxWelcome title="my-first-mf-app" /> </div> <div className="min-w-screen h-screen flex items-center justify-center bg-black "> <a href="https://zephyr-cloud.io" target="_blank" rel="noreferrer" className="py-8 px-8 absolute bg-gradient-to-r z-20 w-[400px] flex justify-center rounded-lg from-[#111830] via-sky-950 to-teal-950" > <p className="text-white z-10 text-xl font-semibold tracking-wide"> My First App deployed to Zephyr! </p>{' '} </a> </div> ); } export default App;

If the styling is acting weird let's do a quick fix by serving Tailwind from CDN.

src/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>MyFirstMfApp</title> <base href="/" /> <script src="https://cdn.tailwindcss.com"></script> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> </head> <body> <div id="root"></div> </body> </html>

If you run a nx serve you will see your app changed to:

Save the file and go back to the terminal to deploy the new version of your application - run:

Terminal
nx build

You will see the new version of your app both in the console output and under Version dropdown in on Chrome Extension.

Terminal
nx build NX Its time to update Nx 🎉 Your repository uses a higher version of Nx (19.2.2) than your global CLI version (18.1.2) For more information, see https://nx.dev/more-concepts/global-nx > nx run my-first-mf-app:build:production [zephyr] You are logged in ━━━━━━━━━━━━━━━━━━━━━━━━━ (62%) building builtin:swc-loader??ruleSet[1].rules[2].use[0]!/username/my-first-mf-app/node_modules/scheduler/ [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[71]: uploading missing assets to zephyr (queued 2 out of 2) [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[71]: uploaded local snapshot in 217ms [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[71]: uploaded missing assets to zephyr (2 assets in 342ms, 212.50kb) [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[71]: deploying to https://account_71-_my-first-mf-app_source-my-f-4b579f-ze.valorkin.dev [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[71]: deploying to https://account_70-_my-first-mf-app_source-my-f-38438b-ze.valorkin.dev [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[71]: deploying to https://_my-first-mf-app_source-my-first-mf-app-username-ze.valorkin.dev ━━━━━━━━━━━━━━━━━━━━━━━━━ (98%) emitting emit [zephyr]: [_my-first-mf-app_source.my-first-mf-app.username](account)[71]: build deployed in 1033ms ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit PublicPath: auto asset index.html 398 bytes [emitted] asset main.js 212 KiB [emitted] (name: main) Entrypoint main 212 KiB = main.js runtime modules 6 modules + 23 modules Rspack 0.6.5 compiled successfully in 5.60 s (ecb32c555d4d1978eae7) ————————————————————————————————————————————————————————————————————————————————— NX Successfully ran target build for project my-first-mf-app (6s)

Now the latest version of your app is deployed. You can check the source code till this stage here:

Version name

The names of your versions are generated by Zephyr. The first part of the name is the branch name, serialised version of your email, followed by the version number.

6. Rollback to previous version

The first option in the dropdown menu under Version is the latest deployment of your app. In the dropdown menu you will see more previous version of your app.

But if you want to rollback to the previous version of your deployed application, you can click on one of the options and that version will show up in the browser, once you confirm that you want to push it to production you can click on Publish updates at the bottom of the side panel.

7. Check your projects on dashboard

If you want to see all your projects and their versions, sign in on dashboard and you will see all your projects and their dependencies.

Browser Support

While the extension may also function on other Chromium-based browsers such as Microsoft Edge, Brave, Vivaldi, and Opera, please be aware that these are not officially supported. For best user experience, we highly recommend you to use Google Chrome. We are not responsible for any issues that may arise, and currently, we do not provide support for these platforms.
BrowserSupported
Google Chrome
Arc
Opera
Microsoft Edge
Firefox
Safari