Quick Start

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.

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.

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

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.

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>
  );
}

Install the Tunnel Next.js SDK

For full documentation, see our Next.js SDK docs.

npm install @tunnel/nextjs

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.

projectId

required

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.

App.jsx

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>
  );
}

Install the Tunnel Next.js SDK

For full documentation, see our Next.js SDK docs.

npm install @tunnel/nextjs

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.

projectId

required

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.

_app.jsx

  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}
          />
        )}
    );
  }

Add the Tunnel `<script>` tag to your app

To enable Tunnel in your app, render the <script> tag.

data-project-id

required

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.

index.html

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

Getting Started

Integrations

Recommended

Find your Project ID

Deploy!

Getting Started

Integrations

Recommended

​Find your Project ID

​Add the Tunnel Toolbar to your app

​Deploy!

Find your Project ID

Add the Tunnel Toolbar to your app

Deploy!