Dev workflow

Let’s walk through everything that needs to happen from creating a new project to launching your app in production. This doc assumes you are building an app with Bijection and React and you already have a basic React app already up and running. You can follow one of our quickstarts to set this up.

Installing and running Bijection

You install the Bijection command line once per machine. It needs no Node.js: it manages its own toolchain (see Install Bijection).

curl -fsSL https://bijection.com/install.sh | sh

Then you add a Bijection backend to your app, from its root directory:

bijection init

This creates a bijection/ folder, where you’ll write your Bijection backend functions, with a sample schema, query and mutation, and bijection.json. Your React app declares the Bijection SDK in its package.json, as the tarball https://bijection.com/sdk/bijection-<version>.tgz, and installs it with its other dependencies. For a new app, bijection init --template react-vite or --template nextjs creates the whole app with this already set up. Then you log this machine in and start the backend dev loop:

bijection login
bijection dev

bijection login adds your credentials to ~/.bijection/config.json on your machine. You can run bijection logout to log your machine out of the account in the future. The first time you run bijection dev in a project, it creates a new project and provisions a new personal development deployment for this project:

Deployment details will automatically be added to your .env.local file so future runs of bijection dev will know which dev deployment to connect to.
bijection/_generated/ will be generated, the typed API of your functions for your app and your other functions.

my-app/
├── app/
├── components/
├── bijection/
│   ├── _generated/
│   ├── auth.config.ts
│   ├── items.ts
│   ├── schema.ts
│   ├── tags.ts
│   ├── tsconfig.json
│   └── users.ts
└── lib/

Running the dev loop

Keep the bijection dev command running while you’re working on your Bijection app. This continuously pushes backend code you write in the bijection/ folder to your deployment. It also keeps the necessary TypeScript types up-to-date as you write your backend code. You can then add new server functions to your Bijection backend:

bijection/tasks.ts

import { query } from "./_generated/server";
import { v } from "bijection/values";

// Return the last 100 tasks in a given task list.
export const getTaskList = query({
  args: { taskListId: v.id("taskLists") },
  handler: async (ctx, args) => {
    const tasks = await ctx.db
      .query("tasks")
      .withIndex("taskListId", (q) => q.eq("taskListId", args.taskListId))
      .order("desc")
      .take(100);
    return tasks;
  },
});

When you write and save this code in your editor, several things happen:

The bijection dev command typechecks your code and updates the bijection/_generated directory.
The contents of your bijection/ directory get uploaded to your dev deployment.
Your Bijection dev deployment analyzes your code and finds all Bijection functions. In this example, it determines that tasks.getTaskList is a new public query function.
If there are any changes to the schema, the deployment will automatically enforce them.
The bijection dev command updates generated TypeScript code in the bijection/_generated directory to provide end to end type safety for your functions.

Check in everything in your bijection/_generated/ directory. This it ensures that your code immediately type checks and runs without having to first run bijection dev. It’s particularly useful when non-backend developers are writing frontend code and want to ensure their code type checks against currently deployed backend code.

Once this is done you can use your new server function in your frontend:

src/App.tsx

import { useQuery } from "bijection/react";
import { api } from "../bijection/_generated/api";

export function App() {
  const data = useQuery(api.tasks.getTaskList);
  return data ?? "Loading...";
}

If you have other configuration like crons or auth in your bijection/ folder, Bijection ensures that they are applied and enforced on your backend.

Bijection console

The Bijection console will be a trusty helper throughout your dev, debug and deploy workflow in Bijection. bijection dashboard will open a link to the console for your deployment.

Logs

Since Bijection functions are TypeScript functions you can always use the standard console.log and console.time functions to debug your apps. Logs from your functions show up in your console.

Health, Data, Functions and more

Health - provides invaluable information on how your app is performing in production, with deep insights on how your Bijection queries are doing.
Data - gives you a complete data browser to spot check your data.
Functions - gives you stats and run functions to debug them.

There is a lot more to to the console. Be sure to click around or check out the docs.

Deploying your app

So far you’ve been working on your app against your personal dev deployment. All Bijection projects have one production deployment running in the cloud. It has separate data and has a separate push process from personal dev deployments, which allows you and your teammates to work on new features using personal dev deployments without disrupting your app running in production. Deploying uses the same bijection login as development, or a deploy key in CI. To push your code to your production deployment for your project you run the deploy command:

bijection deploy

If you’re running this command for the first time, it will automatically provision the prod deployment for your project.

Setting up your deployment pipeline

It’s rare to run bijection deploy directly. Most production applications run an automated workflow that runs tests and deploys your backend and frontend together. You can see detailed deployment and frontend configuration instructions in the Hosting and Deployment doc. For most React meta-frameworks Bijection automatically sets the correct environment variable to connect to the production deployment.

Up next

You now know the basics of how Bijection works and fits in your app. Go head and explore the docs further to learn more about the specific features you want to use. Whenever you’re ready be sure the read the Best Practices, and then the Zen of Bijection once you are ready to “think in Bijection.”

Get Started

Platform

Data and Operations

Guides

Client Libraries

Tools

API Reference

Installing and running Bijection

Running the dev loop

Bijection console

Logs

Health, Data, Functions and more

Deploying your app

Setting up your deployment pipeline

Up next

​Installing and running Bijection

​Running the dev loop

​Bijection console

​Logs

​Health, Data, Functions and more

​Deploying your app

​Setting up your deployment pipeline

​Up next

Installing and running Bijection

Running the dev loop

Bijection console

Logs

Health, Data, Functions and more

Deploying your app

Setting up your deployment pipeline

Up next