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

# Coherence

> Using Tunnel with Coherence

<Frame>
  <img src="https://mintcdn.com/tunnel-19/Qm8ku7d_KmF5-Ni4/assets/screenshots/recommended/deployment-platforms/coherence/tunnel.png?fit=max&auto=format&n=Qm8ku7d_KmF5-Ni4&q=85&s=8cbc920d09afb2dcf4af4b1849f5d98f" width="1434" height="807" data-path="assets/screenshots/recommended/deployment-platforms/coherence/tunnel.png" />
</Frame>

# What is Coherence?

[Coherence](https://withcoherence.com) provides automated environments for developing, testing, and deploying your app in the cloud. With a minimal yaml file, it spins up full-stack environments with automated build pipelines using cloud-native services.

## Why choose Coherence?

With Coherence, you can easily provision automated environments for developing, testing, and deploying your app in the cloud, with:

* Preview Deployments, Managed CI/CD, and Production Hosting
* Your AWS/GCP account and credits
* No vendor lock-in

# Using Tunnel with Coherence

Tunnel integrates seamlessly with [Coherence Branch Previews](https://docs.withcoherence.com/docs/overview/what-is-coherence) to enable built-in collaboration and feedback workflows for your team.

## Prerequisites

* Set up preview environments in Coherence. If you haven't already, follow the [Coherence Docs](https://docs.withcoherence.com/) to set up Coherence Branch Previews for your app.

## Add Tunnel to your app

You can add Tunnel to your Coherence Branch Previews using one of our [SDKS](/sdks) or for other frameworks, a simple `<script>` tag.

<Tabs>
  <Tab title="React">
    ### Install the Tunnel React SDK

    <CodeGroup>
      ```shell npm theme={null}
        npm install @tunnel/react
      ```

      ```shell yarn theme={null}
        yarn add @tunnel/react
      ```

      ```shell pnpm theme={null}
        pnpm add @tunnel/react
      ```
    </CodeGroup>

    ### Add the `<TunnelToolbar />` component to your app

    To enable Tunnel in your app, conditionally render the `<TunnelToolbar />` component in your app. Developers usually only render the `<TunnelToolbar />` component in your app when it is running in a Coherence Branch Preview 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](https://tunnel.dev/redirect-to/default).
    * `branch` is the branch name of the Coherence Branch Preview. Coherence automatically injects the `COHERENCE_ENVIRONMENT_NAME` environment variable, which you can pass directly to the `<TunnelToolbar />` component.

    ```jsx App.jsx theme={null}
    import { TunnelToolbar } from '@tunnel/react';

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

    export default App;
    ```
  </Tab>

  <Tab title="Next.js (/app)">
    ### Install the Tunnel Next SDK

    <CodeGroup>
      ```shell npm theme={null}
        npm install @tunnel/nextjs
      ```

      ```shell yarn theme={null}
        yarn add @tunnel/nextjs
      ```

      ```shell pnpm theme={null}
        pnpm add @tunnel/nextjs
      ```
    </CodeGroup>

    ### Add the `<TunnelToolbar />` component to your app

    To enable Tunnel in your app, conditionally render the `<TunnelToolbar />` component in your app. Developers usually only render the `<TunnelToolbar />` component in your app when it is running in a Coherence Branch Preview 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](https://tunnel.dev/redirect-to/default).
    * `branch` is the branch name of the Coherence Branch Preview. Coherence automatically injects the `COHERENCE_ENVIRONMENT_NAME` environment variable, which you can pass directly to the `<TunnelToolbar />` component.

    ```jsx layout.jsx theme={null}
    import { TunnelToolbar } from '@tunnel/nextjs';

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            {children}
            {(process.env.NODE_ENV !== "development" && process.env.COHERENCE_ENVIRONMENT_NAME !== "main") && (
              <TunnelToolbar
                projectId={process.env.NEXT_PUBLIC_TUNNEL_PROJECT_ID}
                branch={process.env.NEXT_PUBLIC_COHERENCE_ENVIRONMENT_NAME}
              />
            )}
          </body>
        </html>
      );
    }
    ```
  </Tab>

  <Tab title="Next.js (/app)">
    ### Install the Tunnel Next SDK

    <CodeGroup>
      ```shell npm theme={null}
        npm install @tunnel/nextjs
      ```

      ```shell yarn theme={null}
        yarn add @tunnel/nextjs
      ```

      ```shell pnpm theme={null}
        pnpm add @tunnel/nextjs
      ```
    </CodeGroup>

    ### Add the `<TunnelToolbar />` component to your app

    To enable Tunnel in your app, conditionally render the `<TunnelToolbar />` component in your app. Developers usually only render the `<TunnelToolbar />` component in your app when it is running in a Coherence Branch Preview 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](https://tunnel.dev/redirect-to/default).
    * `branch` is the branch name of the Coherence Branch Preview. Coherence automatically injects the `COHERENCE_ENVIRONMENT_NAME` environment variable, which you can pass directly to the `<TunnelToolbar />` component.

    ```javascript _app.jsx theme={null}
      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}
                branch={process.env.NEXT_PUBLIC_COHERENCE_ENVIRONMENT_NAME}
              />
            )}
        );
      }
    ```
  </Tab>

  <Tab title="Other frameworks">
    ### Add the `<script>` tag to your app

    To enable Tunnel in your app, add the `<script>` tag to your app. Developers usually only add the `<script>` tag in your app when it is running in a Coherence Branch Preview environment.

    The `<script>` tag requires a `data-project-id` attribute and a `data-branch` attribute.

    * `data-project-id` is the ID of your Tunnel project. You can find your project ID in the [Tunnel Dashboard](https://tunnel.dev/).
    * `data-branch` is the branch name of the Coherence Branch Preview. Coherence automatically injects the `COHERENCE_ENVIRONMENT_NAME` environment variable, which you can pass directly to the `<script>` tag.

    ```html index.html theme={null}
    <script
      src="https://tunnelapp.dev/__tunnel/script.js"
      data-project-id="PROJECT_ID"
      data-branch="COHERENCE_ENVIRONMENT_NAME"
    ></script>
    ```
  </Tab>
</Tabs>