> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bijection.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dev workflow

> Development workflow from project creation to production deployment

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](/quickstart/overview) 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](/get-started/install)).

```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
curl -fsSL https://bijection.com/install.sh | sh
```

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

```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
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:

```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
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:

1. 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.
2. `bijection/_generated/` will be generated, the typed API of your functions
   for your app and your other functions.

```text theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
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:

```typescript bijection/tasks.ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
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:

1. The `bijection dev` command typechecks your code and updates the
   `bijection/_generated` directory.
2. The contents of your `bijection/` directory get uploaded to your dev deployment.
3. 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.
4. If there are any changes to the [schema](/database/schemas), the
   deployment will automatically enforce them.
5. The `bijection dev` command updates generated TypeScript code in the
   `bijection/_generated` directory to provide end to end type safety for your
   functions.

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

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

```typescript src/App.tsx theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
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](/scheduling/cron-jobs) or
[auth](/auth/overview) in your `bijection/` folder, Bijection ensures that they
are applied and enforced on your backend.

## Bijection console

The [Bijection console](/dashboard/deployments/deployments) 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](/dashboard/deployments/logs).

### Health, Data, Functions and more

* [Health](/dashboard/deployments/health) - provides invaluable information
  on how your app is performing in production, with deep insights on how your
  Bijection queries are doing.
* [Data](/dashboard/deployments/data) - gives you a complete data browser to
  spot check your data.
* [Functions](/dashboard/deployments/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](/dashboard/overview).

## 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](/cli/deploy-key-types) in CI.

To push your code to your production deployment for your project you run the
deploy command:

```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
bijection deploy
```

<Info>
  If you're running this command for the first time, it will automatically
  provision the prod deployment for your project.
</Info>

### 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](/production/hosting/hosting) doc. For most React
meta-frameworks Bijection
[automatically sets the correct environment variable](/production/hosting/vercel#how-it-works)
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](/understanding/best-practices/best-practices), and then the
[Zen of Bijection](/understanding/zen) once you are ready to "think in Bijection."