> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Add HTTP Function Extensions with the CLI

## Article: Add API Extensions with the CLI

## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/backend-extensions/api/http-functions/add-http-function-extensions-with-the-cli.md

## Article Content:

# Add HTTP Function Extensions with the Wix CLI for Apps

<blockquote classname="note">

**CLI Documentation Notice**

We've released a [new Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md). Continue here if your project uses the Wix CLI for Apps. [Determine which CLI your project uses](https://dev.wix.com/docs/wix-cli/guides/development/determine-which-cli-your-project-uses.md). 

</blockquote>


[HTTP function extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/apis/http-functions/about-http-function-extensions.md) 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 HTTP functions can be invoked from any frontend component in your CLI project.

Follow the instructions below to:

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

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

> **Note:** [Web method extensions](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/backend-extensions/api/web-methods/add-web-method-extensions-with-the-cli.md) require less boilerplate code than HTTP function extensions, as you don't have to manually extract values from a request, serialize responses, or handle HTTP headers and query parameters. Consider using web methods if you don't require HTTP-specific features, like header codes.

## Step 1 | Create the extension

In the terminal:

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

    ```tsx
    npm run generate -- --type=HTTP_FUNCTION
    ```

1. The CLI will display a menu of extensions to generate. 
1. The CLI will prompt you to name the HTTP function. You can only have one HTTP function extension with a given name.
1. The CLI will prompt you to choose a method.

Upon completion, the HTTP function 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 HTTP function extension

To test your HTTP function extension:

1. Add logging statements in your HTTP functions:

    **src/backend/api/\<your-http-function-extension-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 your HTTP functions from your frontend code. For example, in your dashboard page code, add functions that call your HTTP functions on click:

    > **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-http-function-extension-name>` with `test`.

    ```tsx
    import { httpClient } from '@wix/essentials';
    
    function Index() {
    
      const callMyBackendGET = async () => {
        const res = await httpClient.fetchWithAuth(`${import.meta.env.BASE_API_URL}/<your-http-function-extension-name>`);
        console.log(await res.text());
      };
    
      const callMyBackendPOST = async () => {
        const res = await httpClient.fetchWithAuth(`${import.meta.env.BASE_API_URL}/<your-http-function-extension-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 HTTP function 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 release a version in the app dashboard.

1. Run the following command to build your app:

    ```bash
    npm run build
    ```

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

    ```bash
    npm run release
    ```

An app version allows you to publish an app to the [Wix App Market](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](https://dev.wix.com/docs/wix-cli/legacy/wix-cli-for-apps/app-development/build-and-deploy-an-app-with-the-cli.md).

## Delete an API extension

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

## See also
- [About HTTP Function Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/apis/http-functions/about-http-function-extensions.md)