Docs
Get Started
Learning
Zephyr Cloud →
Get Started
Learning
Zephyr Cloud →

React + Vite

Source

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.

Prerequisites

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

nvm use 20

Generating a Vite + React project

Terminal
# 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.

Terminal
cd react-vite-ts
npm install && npm install vite-plugin-zephyr@latest
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:

vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { withZephyr } from 'vite-plugin-zephyr'; // [!code ++]

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    withZephyr(), // [!code ++]
  ],
});
WARNING

Remember to initialize a git repository in current folder, before you npm run build to deploy your app.

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

Terminal
npm run build

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

1$ [email protected] build
2$ tsc && vite build
3
4The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
5vite v5.2.13 building for production...
6✓ 34 modules transformed.
7dist/index.html                   0.46 kB │ gzip:  0.30 kB
8dist/assets/react-CHdo91hT.svg    4.13 kB │ gzip:  2.05 kB
9dist/assets/index-DiwrgTda.css    1.39 kB │ gzip:  0.72 kB
10dist/assets/index-DVoHNO1Y.js   143.36 kB │ gzip: 46.09 kB
11✓ built in 423ms
12[zephyr] You are already logged in
13[zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: uploaded local snapshot in 156ms
14[zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: uploading missing assets to zephyr (queued 4 out of 4)
15[zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: uploaded missing assets to zephyr (4 assets in 1009ms, 145.84kb)
16[zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: deploying to https://t_main_id-react-vite-t-309c6c-ze.valorkin.dev
17[zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: deploying to https://id_78-react-vite-ts-re-6d13dd-ze.valorkin.dev
18[zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: deploying to https://react-vite-ts-react-vite-ts-username-ze.valorkin.dev
19[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.