Zephyr Cloud Examples

This repository contains projects demonstrating how to deploy applications to Zephyr Cloud. A selection of bundlers, frameworks, and patterns are used.

Each example project comes with Zephyr Cloud enabled. Once you've forked this repository, you can clone it and follow the instructions to build and deploy to your Zephyr Cloud account.

• angular-vite
  A React application with Module Federation, using Rspack as the bundler.
• create-default-webpack-mf
  A React application with Module Federation, using Rspack as the bundler.
• create-mf-app-rspack
  A React application using Rspack as the bundler.
• create-nx-rspack-workpace-mf
  A monorepo using Nx, React, Module Federation, and Rspack as the bundler.
• create-nx-workspace-mf
  A monorepo using Nx, React, Module Federation, and Webpack as the bundler.
• modernjs-app
  A ModernJS app with React and Rspack as the bundler.
• ng-nx
  A monorepo using Nx, Angular v15, and Webpack as the bundler.
• parce-react
  A parcel and react application.
• qwik-1.5
  A Qwik v1.5 app using Vite as the bundler.
• react-airbnb-clone
  An AirBnb clone using React, Module Federation and Rspack as the bundler.
• react-rollup-ts
  A React and rollup application.
• react-rspack-tractor-2.0
  A monorepo using pnpm workspace, React, and Rspack as the bundler.
• react-tractor-sample
  A monorepo using Nx, React, and Webpack as the bundler.
• react-vite-mf
  A monorepo using pnpm workspace, Module Federation, React, and Vite as the bundler.
• react-vite-nx
  A monorepo using Nx, React, and Vite as the bundler.
• react-vite-ts
  A React application built in TypeScript, using Vite as the bundler.
• rolldown-react
  A React app with Rolldown as the bundler.
• rspack-project
  A simple Rspack application using React.
• solid
  An application using SolidJS.
• turbo-rspack-mf
  A monorepo using Turborepo, React, and Rspack as the bundler.

Deploying an example project

After cloning your fork of this repository locally, follow these steps:

1. Install dependencies

   pnpm i

2. Change directory to the example codebase
   For example, if you want to run the create-default-webpack-mf example:

   cd ./examples/create-default-webpack-mf

3. Build the project

   pnpm build

After you build the project, it will be deployed to your Zephyr Cloud account. For more information on using Zephyr Cloud, visit the official documentation.

Contributors

TODO:

• Remove @rspack/plugin-minify in favor of terser-webpack-plugin
• Move to consistent build command
• Create testing matrix that can run with every canary of plugins

Status

✅ angular-vite
✅ create-default-webpack-mf
✅ create-mf-app-rspack
✅ create-nx-rspack-workspace-mf
✅ create-nx-workspace-mf
✅ nx-ng
❌ qwik-1.5 - rework plugin support
✅ react-airbnb-clone
✅ react-rollup-ts
✅ react-rspack-tractor-2.0
✅ react-tractor-sample
✅ react-vite-mf
❌ react-vite-nx - @nx/vite plugin dependency issue
✅ react-vite-ts
✅ rspack-project
✅ solid
✅ svelte
✅ turbo-rspack-mf