​
What is Coherence?

Coherence 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 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 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 or for other frameworks, a simple <script> tag.

Install the Tunnel React SDK

  npm install @tunnel/react

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.
  • 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.
App.jsx
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;
Slack