Go Headless

Build Apps

Client

API Preview

Develop Websites

REST

Velo

GraphQL (Alpha)

# Add API Extensions with the CLI

<blockquote class="warning">

This feature is in Developer Preview and is subject to change.

</blockquote>

Backend API extensions in the CLI allow you to define HTTP functions that can be called from your frontend code. The CLI handles the setup and hosting of the backend code for you, simplifying the development process. These API functions can be invoked from any frontend component in your CLI project.

Follow the instructions below to:

1. Create a backend API extension for your app.
1. Test the backend API extension on a site.
1. Deploy your app with the backend API extension.

Once these tasks are complete, your app will have a backend API extension that can be called from your frontend code.

## Before you begin

+ You must have an app project that was [created using the Wix CLI](portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::7406d21c-b9ec-4e57-9cc8-19ba343c2718*fallback::https://dev.wix.com/docs/build-apps/developer-tools/cli/get-started/quick-start).
+ You must be logged into your Wix Developer account. If you don’t have one, [sign up for a Wix Developer account](fallback::https://users.wix.com/signin?loginDialogContext=signup&referralInfo=HEADER&postLogin=https:%2F%2Fdev.wix.com%2Fdc3%2Fmy-apps&postSignUp=https:%2F%2Fdev.wix.com%2Fdc3%2Fmy-apps&forceRender=true).

## Step 1 | Create the extension

In the terminal:

1. Navigate to your project repo.
1. Run the following command:

    ```tsx
    npm run generate
    ```

1. The CLI will display a menu of extensions to generate. Under **Backend Extensions**, select **API** and hit enter to continue.
1. The CLI will prompt you to name the API. You can only have one API with a given name.
1. The CLI will prompt you to choose an API method.

Upon completion, the API extension files will be created in your project directory with the following structure:

```tsx
.
└── <your-app-name>/
    └── src/
        └── backend/
            └── api/
                └── <your-api-name>
                    └── api.ts
```

The `api.ts` file is essential and includes boilerplate `GET` and `POST` functions that take a Node `Request` and return a Node `Response`. The CLI also supports `PUT` and `DELETE` methods.

## Step 2 | Test your API

To test your API:

1. Add logging statements in your API functions:

    **src/backend/api/\<your-api-name\>/api.ts**

    ```ts
    export async function GET(req: Request) {
        console.log('Log from GET.'); // This message logs to your CLI.
        return new Response('Response from GET.'); // This response is visible in the browser console.
    }
    
    export async function POST(req: Request) {
        const data = await req.json();
        console.log('Log POST with body: ', data); // This message logs to your CLI.
        return new Response(JSON.stringify(data)); // This response is visible in the browser console.
    }
    ```

1. Add code to call the API from your frontend code. For example, add a function that calls the API from a dashboard page with buttons to test the function:

    > **Note:** The endpoint is a `BASE_API_URL` created by the CLI combined with the API name you chose during setup. For example, if you named your API `test`, you'd replace `<your-api-name>` with `test`.

    ```tsx
    import { useWixFetchWithAuth } from '@wix/sdk-react';
    
    function Index() {
      const fetchWithAuth = useWixFetchWithAuth();
    
      const callMyBackendGET = async () => {
        const res = await fetchWithAuth(`${import.meta.env.BASE_API_URL}/<your-api-name>`);
        console.log(await res.text());
      };
    
      const callMyBackendPOST = async () => {
        const res = await fetchWithAuth(`${import.meta.env.BASE_API_URL}/<your-api-name>`, {
          method: 'POST',
          body: JSON.stringify({ id: 12345 }),
        });
        console.log(await res.json());
      };
    
      return (
        <WixDesignSystemProvider>
          <Page>
            <Page.Content>
              <button onClick={callMyBackendGET}>Call backend GET function</button>
              <button onClick={callMyBackendPOST}>Call backend POST function</button>
            </Page.Content>
          </Page>
        </WixDesignSystemProvider>
      );
    }
    ```

1. Start your local development environment:

    ```bash
    npm run dev
    ```

1. Press `D` to open the dashboard page in your browser, and click the buttons to execute the API calls.

1. View the logs in the CLI and browser console. You should see something like:

    **CLI:**

    ```bash
    1:13:38 PM [backend] Log from GET.
    1:13:39 PM [backend] Log from POST.
    ```

    **Browser console:**

    ```bash
    Response from GET.
    Response from POST.
    ```

<blockquote class="tip">

**Tip:** In the CLI, press `L` to view the full logs, `C` to clear the logs, `ESC` to exit the log view, and use the up and down arrow keys to navigate.

</blockquote>

## Step 3 | Build and deploy your app

Once your app is ready for production, you can build it and create a version in the Dev Center.

1. Run the following command to build your app:

    ```bash
    npm run build
    ```

2. Run the following command and follow the prompts to create an app version:

    ```bash
    npm run create-version
    ```

An app version allows you to publish an app to the [Wix App Market](fallback::https://www.wix.com/app-market) or install it on a site with a direct install URL.

For more information about building and deploying your app, see [Build and Deploy an App with the CLI](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/app-development/build-and-deploy-an-app-with-the-cli).

## Delete an API extension

To delete an API from your app, simply delete the subfolder under `src/backend/api` that contains your API extension files.