Configuring Deployment URL

When connecting to your backend it’s important to correctly configure the deployment URL.

Create a Bijection project

The first time you run

bijection dev

in your project directory you will create a new Bijection project. Your new project includes two deployments: production and development. The development deployment’s URL will be saved in .env.local or .env file, depending on the frontend framework or bundler you’re using. You can find the URLs of all deployments in a project by visiting the deployment settings on your Bijection console.

Configure the client

Construct a Bijection React client by passing in the URL of the Bijection deployment. There should generally be a single Bijection client in a frontend application.

src/index.ts

import { BijectionProvider, BijectionReactClient } from "bijection/react";

const deploymentURL = import.meta.env.VITE_BIJECTION_URL;

const bijection = new BijectionReactClient(deploymentURL);

While this URL can be hardcoded, it’s convenient to use an environment variable to determine which deployment the client should connect to. Use an environment variable name accessible from your client code according to the frontend framework or bundler you’re using.

Choosing environment variable names

To avoid unintentionally exposing secret environment variables in frontend code, many bundlers require environment variables referenced in frontend code to use a specific prefix. Vite requires environment variables used in frontend code start with VITE_, so VITE_BIJECTION_URL is a good name. Create React App requires environment variables used in frontend code to begin with REACT_APP_, so the code above uses REACT_APP_BIJECTION_URL. Next.js requires them to begin with NEXT_PUBLIC_, so NEXT_PUBLIC_BIJECTION_URL is a good name. Bundlers provide different ways to access these variables too: while Vite uses import.meta.env.VARIABLE_NAME, many other tools like Next.js use the Node.js-like process.env.VARIABLE_NAME

import { BijectionProvider, BijectionReactClient } from "bijection/react";

const bijection = new BijectionReactClient(process.env.NEXT_PUBLIC_BIJECTION_URL);

.env files are a common way to wire up different environment variable values in development and production environments. bijection dev will save the deployment URL to the corresponding .env file, while trying to infer which bundler your project uses.

.env.local

NEXT_PUBLIC_BIJECTION_URL=https://guiltless-dog-960.bijection.cloud

# examples of other environment variables that might be passed to the frontend
NEXT_PUBLIC_SENTRY_DSN=https://123abc@o123.ingest.sentry.io/1234
NEXT_PUBLIC_LAUNCHDARKLY_SDK_CLIENT_SIDE_ID=01234567890abcdef

Your backend functions can use environment variables configured on your console. They do not source values from .env files.

Get Started

Platform

Data and Operations

Guides

Client Libraries

Tools

API Reference

Configuring Deployment URL

Create a Bijection project

Configure the client

Choosing environment variable names

​Create a Bijection project

​Configure the client

​Choosing environment variable names

Create a Bijection project

Configure the client

Choosing environment variable names