Zephyr Cloud Docs
Zephyr Cloud →
Zephyr Cloud →

React + Vite

Source

This guide will show you how to create a simple React app using Vite for bundling, and how to configure it with the Zephyr plugin in vite.config.ts.

Prerequisites

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 install vite-plugin-zephyr@latest
npm run dev

Add Zephyr configuration

You should see the website running on localhost. Open vite.config.ts in your editor and add the following modifications:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { withZephyr } from 'vite-plugin-zephyr'; // Add this line

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    withZephyr(), // Add this line
  ],
});
WARNING

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

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

npm run build

You should see something similar to the following build output below. The highlighted lines include your deployed URL:

INFO

The first time you initiate a build with Zephyr, it will prompt you to log in by directing you to the Zephyr website. This login is required only on your first build; subsequent builds will not require a login.

We may require you to log in again if you removed your Zephyr configuration file ~/.zephyr locally.

$ react-vite-ts@0.0.0 build
$ tsc && vite build

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/troubleshooting.html#vite-cjs-node-api-deprecated 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 https://t_main_id-react-vite-t-309c6c-ze.valorkin.dev
[zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: deploying to https://id_78-react-vite-ts-re-6d13dd-ze.valorkin.dev
[zephyr]: [react-vite-ts.react-vite-ts.username](id)[78]: deploying to https://react-vite-ts-react-vite-ts-username-ze.valorkin.dev
[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 to see your application under the dropdown menu:

You can access this application as well as all the previous versions anytime you use on Zephyr Cloud Chrome extension!