Quick Start
Get started with Tunnel
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.
Install the Tunnel React SDK
For full documentation, see our React SDK docs.
Add the Tunnel Toolbar to your app
To enable Tunnel in your app, render the <TunnelToolbar />
component in your app.
The <TunnelToolbar />
component requires a projectId
prop. You can find
your Project ID in the Tunnel Dashboard by navigating to
Projects > Your Project >
Settings.
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.