Skip to main content

​
Find your Project ID

To copy your Project ID, navigate to the Tunnel Dashboard, select your project, and go to Settings to copy your project ID.

​
Add the Tunnel Toolbar to your app

To enable Tunnel in your app, add the <TunnelToolbar /> component to your app. For now, we have specialized SDKs for React and Next.js apps, but if you’re using another framework, you can still use Tunnel by adding the <script> tag to your app.
  • React
  • Next.js (/app)
  • Next.js (/pages)
  • Other frameworks
1

Install the Tunnel React SDK

For full documentation, see our React SDK docs.
npm install @tunnel/react
2

Add the Tunnel Toolbar to your app

To enable Tunnel in your app, render the <TunnelToolbar /> component in your app.
​
projectId
required
The <TunnelToolbar /> component requires a projectId prop. You can find your Project ID in the Tunnel Dashboard by navigating to Projects > Your Project > Settings.
App.jsx
import { TunnelToolbar } from '@tunnel/react';

export default function App() {
  return (
    <Steps>
      <div>
        {process.env.NODE_ENV !== "development" && (
          <TunnelToolbar
            projectId={process.env.TUNNEL_PROJECT_ID}
          />
        )};
        {/* ... */}
      </div>
    <Step>
  );
}
The snippet above only renders the Tunnel Toolbar in development. Depending on your use case, you will want to update the conditional to render the toolbar in specific environments (development, staging, production) or for specific users (everyone, certain customers, or just employees).

​
Deploy!

You’re all set! Now you can start using Tunnel in your app. Deploy your app to a preview environment to see the Tunnel Toolbar in action.