React + Vite

In this React + Vite simple app, we will walk you from creating a simple react app with Vite till configure it with Zephyr plugin in vite.config.ts.


Generating a Vite + React project

# npm, in npm 7+ double dash is needed npm create vite@latest react-vite-ts -- --template react-ts

and then run commands to make sure you have necessary dependencies installed.

cd react-vite-ts npm install npm run dev

Add Zephyr configuration

You should see the website lives in localhost. Open the vite.config.ts in your editor and add below modification:

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import { withZephyr } from 'vite-plugin-zephyr' // export default defineConfig({ plugins: [react(), withZephyr() ], })

Before you run a build to deploy your app, remember to initialise a git repository in current folder.

With git config initialised, linked to remote origin and additional configuration, you are ready to deploy:

npm run build

You will see the build output like so and the highlighted lines include your deployed URL:

> [email protected] build > tsc && vite build The CJS build of Vite's Node API is deprecated. See for more details. vite v5.2.13 building for production... ✓ 34 modules transformed. dist/index.html 0.46 kB │ gzip: 0.30 kB dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB dist/assets/index-DiwrgTda.css 1.39 kB │ gzip: 0.72 kB dist/assets/index-DVoHNO1Y.js 143.36 kB │ gzip: 46.09 kB ✓ built in 423ms [zephyr] You are already logged in [zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: uploaded local snapshot in 156ms [zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: uploading missing assets to zephyr (queued 4 out of 4) [zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: uploaded missing assets to zephyr (4 assets in 1009ms, 145.84kb) [zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: deploying to [zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: deploying to [zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: deploying to [zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: build deployed in 1067ms

Chrome Extension

On your browser, click on Zephyr Cloud Chrome Extension Logo, you can see your application is under the dropdown menu:

You can access this application as well as all the underlying versions anytime whenver you click on Zephyr Cloud chrome extension.