#Get started

#What do you want to start with?

1. Add Zephyr to your existing project

   Available for Webpack, Rspack and Vite

2. Fork our examples

   With pre-configured application, available in both standalone applications and micro-frontends.

3. Start from scratch

   Using React and Rspack

#Start from scratch

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's managed cloud with Rspack as bundler and use our version control feature to preview all versions that's deployed.

If you are curious to read more about us, you can dive into our architecture, recipes (for more frameworks and bundlers) and features. Below guide is written based on Google Chrome thus other browser's behavior might differ (see a list of supported browsers)

#Setup

#1. Create a react app

nvm use 20

Once the prerequisites are fulfilled, we can start scaffolding our application in the terminal:

pnpm create rspack@latest

The creation process will ask you for project folder name and project template, we will be choosing react in this example:

.../Library/pnpm/store/v3/tmp/dlx-74427  |  +20 ++
.../Library/pnpm/store/v3/tmp/dlx-74427  | Progress: resolved 20, reused 20, downloaded 0, added 20, done
✔ Project folder … rspack-project
? Project template › - Use arrow-keys. Return to submit.
❯    react
    react-ts
    vue
    vue-ts

Press

cd rspack-project
pnpm i

Follow the console output to open the app in browser running on localhost.

#2. Adding Zephyr

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

pnpm add zephyr-webpack-plugin@latest

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

1import { defineConfig } from '@rspack/cli';
2import { rspack } from '@rspack/core';
3import * as RefreshPlugin from '@rspack/plugin-react-refresh';
4import { withZephyr } from 'zephyr-webpack-plugin';
5
6const isDev = process.env.NODE_ENV === 'development';
7
8// Target browsers, see: https://github.com/browserslist/browserslist
9const targets = ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];
10
11export default withZephyr()({
12  context: __dirname,
13  entry: {
14    main: './src/main.tsx',
15  },
16  resolve: {
17    extensions: ['...', '.ts', '.tsx', '.jsx'],
18  },
19  module: {
20    rules: [
21      {
22        test: /\.svg$/,
23        type: 'asset',
24      },
25      {
26        test: /\.(jsx?|tsx?)$/,
27        use: [
28          {
29            loader: 'builtin:swc-loader',
30            options: {
31              jsc: {
32                parser: {
33                  syntax: 'typescript',
34                  tsx: true,
35                },
36                transform: {
37                  react: {
38                    runtime: 'automatic',
39                    development: isDev,
40                    refresh: isDev,
41                  },
42                },
43              },
44              env: { targets },
45            },
46          },
47        ],
48      },
49    ],
50  },
51  // @ts-expect-error Below are non-blocking error and we are working on improving them
52  plugins: [
53    new rspack.HtmlRspackPlugin({
54      template: './index.html',
55    }),
56    isDev ? new RefreshPlugin() : null,
57  ].filter(Boolean),
58  optimization: {
59    minimizer: [
60      // @ts-expect-error
61      new rspack.SwcJsMinimizerRspackPlugin(),
62      // @ts-expect-error
63      new rspack.LightningCssMinimizerRspackPlugin({
64        minimizerOptions: { targets },
65      }),
66    ],
67  },
68  experiments: {
69    css: true,
70  },
71});

#3. Git configuration

The next step is configure the git configuration for your project.

• 1. Create a new repository on Github

Click here to create a new repository named rspack-project on Github. Choosing either Private or Public won't affect our deployment. And then click on Create repository.

• 2. Configure remote origin url

On the next page where your repository has been created on Github, copy paste the command lines under ...or create a new repository on the command line and execute them in terminal within the project.

#4. First build and deploy

After we finished configuring the project, within your terminal run:

pnpm run build

If you haven't register an account with us, or you haven't sign in for a while, your default browser will pop up and prompt you to sign up to our dashboard. If you already have an account or signed in recently, the browser will notify that you already signed in.

Within the terminal you should see your deployed URL. Press

#Chrome Extension

You can check the application you just deployed in our chrome extension and you can preview every version of the application you deploy.

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.

Once you click on the side panel will pop up and prompt you to log in. You might need to right click on the extension and choose Open Side Panel if you are using it for the first time.

rm rf ~/.zephyr

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 see the versions of your app. Items under Tags denotate the tag rules of this application, both auto generated by us or set up by you.

#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.jsx to change the content of your website:

import React from "react";
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
	const [count, setCount] = useState(0);

	return (
		<div className="App">
			<div>
				<a href="https://reactjs.org" target="_blank" rel="noreferrer">
					<img src={reactLogo} className="logo react" alt="React logo" />
				</a>
			</div>
			<h1>Rspack + React + Zephyr</h1>
			<div className="card">
				<button onClick={() => setCount(count => count + 1)}>
					count is {count}
				</button>
				<p>
					Edit <code>src/App.jsx</code> and save to test HMR
				</p>
			</div>
			<p className="read-the-docs">
				Click on the Rspack and React logos to learn more
			</p>
		</div>
	);
}

export default App;

Next in your terminal run:

pnpm run build

The console output will return the latest deployed URL. On Chrome ChromeExtension, the latest deployed version will be under Version dropdown in as the first option. You should see the app's heading is changed to Rspack + React + Zephyr

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

#6. Using Chrome Extension

Once you have deployed a new version of your application, the latest deployed version will show up in browser as soon as you select it under Name.

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

More detailed explaination on how to use our dashboard is coming soon.