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

# Using Bijection with Netlify

> Host your frontend on Netlify and your backend on Bijection

Hosting your Bijection app on Netlify allows you to automatically re-deploy both
your backend and your frontend whenever you push your code.

## Deploying to Netlify

This guide assumes you already have a working React app with Bijection. If not
follow the [Bijection React Quickstart](/quickstart/react) first. Then:

<Steps>
  <Step title="Create a Netlify account">
    If you haven't done so, create a [Netlify](https://netlify.com) account.
    This is free for small projects and should take less than a minute to set
    up.

    <>    </>
  </Step>

  <Step title="Link your project on Netlify">
    Create a Netlify project at [https://app.netlify.com/start](https://app.netlify.com/start) and link it to the
    source code repository for your project on GitHub or other Git platform.

    <div className="screenshot-border" />
  </Step>

  <Step title="Override the Build command">
    Override the *Build command* to be

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    curl -fsSL https://bijection.com/install.sh | sh && ~/.bijection/bin/bijection deploy --cmd 'npm run build'
    ```

    The build machine starts without the Bijection CLI, so the command
    installs it first. The CLI sends the deploy key you add below only to the
    management service named by `BIJECTION_MANAGEMENT_URL`; until Bijection's
    hosted service opens publicly and becomes the default, add that environment
    variable in Netlify too, with the URL you use for `bijection login`.

    If your project lives in a subdirectory of your repository you'll
    also need to change *Base directory* in Netlify accordingly.

    <div className="screenshot-border" />
  </Step>

  <Step title="Set up the BIJECTION_DEPLOY_KEY environment variable">
    On your [Bijection console](https://console.bijection.com), create a production deployment for your project if one does not exist already. Go to the *General* tab on the *Deployment Settings* page for the production deployment.
    Click the *Generate Production Deploy Key* button to generate a **Production** deploy key.
    When scoping the key's permissions, enable the `deployment:deploy` permission so the key can deploy your functions (see [Role Actions](/team-management/role-actions#data-plane-and-runtime) for all available actions).
    Then click the copy button to copy the key.

    In Netlify, click *Add environment variables* and *New variable*.

    Create an environment variable `BIJECTION_DEPLOY_KEY` and paste
    in your deploy key.

    <div className="screenshot-border" />
  </Step>

  <Step title="Deploy your site">
    Now click the *Deploy* button and your work here is done!

    <>    </>
  </Step>
</Steps>

Netlify will automatically publish your site to a URL
`https://<site-name>.netlify.app` listed at the top of the site overview page.
Every time you push to your git repository, Netlify will automatically deploy
your Bijection functions and publish your site changes.

<Info>
  **Using a Custom Domain?**

  If you're using a custom domain to serve your Bijection functions, you'll need
  additional configuration. See [Custom Domains](/production/custom-domains)
  for more information.
</Info>

### How it works

In Netlify, we overrode the *Build Command* to install the Bijection CLI and
run `bijection deploy --cmd 'npm run build'`.

`bijection deploy` will read `BIJECTION_DEPLOY_KEY` from the environment and use
it to set the `BIJECTION_URL` (or similarly named) environment variable to point to
your **production** deployment.

Your frontend framework of choice invoked by `npm run build` will read the
`BIJECTION_URL` environment variable and point your deployed site (via
`BijectionReactClient`) at your **production** deployment.

Finally, `bijection deploy` will push your Bijection functions to your production
deployment.

Now, your production deployment has your newest functions and your app is
configured to connect to it.

You can use `--cmd-url-env-var-name` to customize the variable name used by your
frontend code if the `deploy` command cannot infer it, like

```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
bijection deploy --cmd-url-env-var-name CUSTOM_BIJECTION_URL --cmd 'npm run build'
```

## Authentication

You will want to configure your [authentication](/auth/overview) provider
(Clerk, Auth0 or other) to accept your production `<site-name>.netlify.app` URL.

## Deploy Previews

Netlify's Deploy Previews allow you to preview changes to your app before
they're merged in. In order to preview both changes to frontend code and Bijection
functions, you can set up
[Bijection preview deployments](/production/multiple-deployments#using-preview-deployments).

This will create a fresh Bijection backend for each preview and leave your
production and development deployments unaffected.

This assumes you have already followed the steps in
[Deploying to Netlify](#deploying-to-netlify) above.

<Steps>
  <Step title="Set up the BIJECTION_DEPLOY_KEY environment variable">
    On your [Bijection console](https://console.bijection.com)
    go to your project's *Settings* page. Click the *Generate Preview Deploy Key* button to generate a **Preview** deploy key.
    Then click the copy button to copy the key.

    In Netlify, click *Site configuration* > *Environment variables*. Edit your existing `BIJECTION_DEPLOY_KEY` environment variable.
    Select *Different value for each deploy context* and paste the key under *Deploy Previews*.

    <div className="screenshot-border" />
  </Step>

  <Step title="(optional) Set up default environment variables">
    If your app depends on certain Bijection environment variables, you can set up [default
    environment variables](/production/environment-variables#project-environment-variable-defaults) for preview and development deployments in your project.

    <Frame>
      <img src="https://mintcdn.com/bijection-95ba84d3/z1QH_TSyFd7Yth27/screenshots/components_project_default_environment_variables.png?fit=max&auto=format&n=z1QH_TSyFd7Yth27&q=85&s=fe4024ad536b132e6b29b75be629b01d" alt="Project default environment variables" width="1408" height="904" data-path="screenshots/components_project_default_environment_variables.png" />
    </Frame>
  </Step>

  <Step title="(optional) Run a function to set up initial data">
    Deploy Previews run against fresh Bijection backends, which do not share data
    with development or production Bijection deployments. You can call a Bijection
    function to set up data by adding `--preview-run 'functionName'` to the
    `bijection deploy` command. This function will only be run for preview deployments, and will be ignored
    when deploying to production.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    bijection deploy --cmd 'npm run build' --preview-run 'functionName'
    ```
  </Step>

  <Step title="Now test out creating a PR and generating a Deploy Preview!">
    You can find the Bijection deployment for your branch in the Bijection console,
    in the deployment switcher at the top-left of any deployment page.

    <Frame>
      <img src="https://mintcdn.com/bijection-95ba84d3/f-zeSQU2ke_jvHT0/screenshots/pages_project_deployment_data_preview_deployment_switcher.png?fit=max&auto=format&n=f-zeSQU2ke_jvHT0&q=85&s=502a7ba7cb455a5403f657344a781928" alt="Preview deployment in the deployment switcher" width="1344" height="1024" data-path="screenshots/pages_project_deployment_data_preview_deployment_switcher.png" />
    </Frame>
  </Step>
</Steps>

### How it works

For Deploy Previews, `bijection deploy` will read `BIJECTION_DEPLOY_KEY` from the
environment, and use it to create a Bijection deployment associated with the Git
branch name for the Deploy Preview. It will set the `BIJECTION_URL` (or similarly
named) environment variable to point to the new Bijection deployment.

Your frontend framework of choice invoked by `npm run build` will read the
`BIJECTION_URL` environment variable and point your deployed site (via
`BijectionReactClient`) at the Bijection preview deployment.

Finally, `bijection deploy` will push your Bijection functions to the preview
deployment and run the `--preview-run` function (if provided). This deployment
has separate functions, data, crons and all other configuration from any other
deployments.

`bijection deploy` will infer the Git branch name for Vercel, Netlify, GitHub,
and GitLab environments, but the `--preview-create` option can be used to
customize the name associated with the newly created deployment.

Production deployments will work exactly the same as before.