Documentation Index
Fetch the complete documentation index at: https://docs.tunnel.dev/llms.txt
Use this file to discover all available pages before exploring further.
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.
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
Install the Tunnel React SDK
For full documentation, see our React SDK docs.npm install @tunnel/react
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).
Install the Tunnel Next.js SDK
Add the Tunnel Toolbar to your app
To enable Tunnel in your app, render the <TunnelToolbar /> component in your app. The <TunnelToolbar /> component is a React component that requires a projectId prop.The ID of the project to link to. You can find your Project ID in the Tunnel
Dashboard by navigating to Projects >
Your Project > Settings. import { TunnelToolbar } from "@tunnel/nextjs";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
{process.env.NODE_ENV !== "development" && (
<TunnelToolbar
projectId={process.env.NEXT_PUBLIC_TUNNEL_PROJECT_ID}
/>
)}
</body>
</html>
);
}
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).
Install the Tunnel Next.js SDK
Add the Tunnel Toolbar component to your app
To enable Tunnel in your app, render the <TunnelToolbar /> component in your _app.jsx file. The <TunnelToolbar /> component is a React component that requires a projectId prop.The ID of the project to link to. You can find your Project ID in the Tunnel Dashboard by navigating to Projects > Your Project > Settings. import { TunnelToolbar } from '@tunnel/nextjs';
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
{(process.env.NODE_ENV !== "development") && (
<TunnelToolbar
projectId={process.env.NEXT_PUBLIC_TUNNEL_PROJECT_ID}
/>
)}
);
}
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).
Add the Tunnel `<script>` tag to your app
To enable Tunnel in your app, render the <script> tag.The Tunnel <script> tag requires a data-project-id attribute. You can find your Project ID in the Tunnel Dashboard by navigating to Projects > Your Project > Settings. <script
src="https://tunnelapp.dev/__tunnel/script.js"
data-project-id="PROJECT_ID"
></script>
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.
