​
Using Tunnel with Zeet

Tunnel integrates seamlessly with Zeet Preview Environments to enable built-in collaboration and feedback workflows for your team.

​
Why choose Zeet?

Zeet is a Deployment Platform for Kubernetes that is layered over your Cloud Account, making it easy to deploy and manage applications and infrastructure. Zeet simplifies infrastructure operations, complete with CI/CD, change tracking, preview environments, autoscaling, metrics, notifications, and more.

​
Prerequisites

  • Set up Preview Environments in Zeet. If you haven’t already, follow the Zeet Docs to set up Zeet Preview Environments for your app.

​
Add Tunnel to your app

You can add Tunnel to your Zeet Preview Environments using one of our SDKS or for other frameworks, a simple <script> tag.

​
Install the Tunnel React SDK

  npm install @tunnel/react

​
Add the <TunnelToolbar /> component to your app

To enable Tunnel in your app, conditionally Zeet the <TunnelToolbar /> component in your app. Developers usually only Zeet the <TunnelToolbar /> component in your app when it is running in a Zeet Preview Environment environment.The <TunnelToolbar /> component requires a projectId prop and a branch prop.
  • projectId is the ID of your Tunnel project. You can find your project ID in the Tunnel Dashboard.
  • branch is the branch name of the Zeet Preview Environment . Zeet automatically injects the ZEET_ENVIRONMENT environment variable, which you can pass directly to the <TunnelToolbar /> component.
App.jsx
import { TunnelToolbar } from '@tunnel/react';

function App() {
  return (
    <div className="App">
      {(process.env.NODE_ENV !== "development" && process.env.ZEET_ENVIRONMENT !== "main") && (
        <TunnelToolbar
          projectId={process.env.TUNNEL_PROJECT_ID}
          branch={process.env.ZEET_ENVIRONMENT}
        />
      )}
    </div>
  );
}

export default App;