> 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 Endpoints to Your Project

## Article: Add HTTP Endpoints to Your Project

## Article Link: https://dev.wix.com/docs/wix-cli/guides/development/http-endpoints/add-http-endpoints-to-your-project.md

## Article Content:

# Add HTTP Endpoints to Your Project

This article shows you how to create an HTTP method in your CLI project and call it from your frontend to handle HTTP requests. These endpoints handle server-side logic and can return any kind of data to your frontend. They're sometimes also referred to as [Backend APIs](https://dev.wix.com/docs/wix-cli/guides/extensions/backend-extensions/api/about-backend-apis.md).

To create an HTTP endpoint:

1. Create an endpoint file with HTTP method handlers.
2. Add frontend code to call the endpoint.

<blockquote classname="caution">

**Caution:** HTTP endpoints in `src/pages/api/` aren't extensions in the framework sense. They're auto-discovered Astro routes:

- You don't register them in [`src/extensions.ts`](https://dev.wix.com/docs/wix-cli/guides/extensions/about-the-extensions-ts-file.md).
- They aren't generated by `npm run generate`.
- They don't appear on the **Extensions** page in the app dashboard.

Adding or removing an endpoint file is enough, and no registration step is required.

</blockquote>

## Step 1 | Create the endpoint file

Create the backend endpoint file that handles HTTP requests. At the end of this step, you'll have a working endpoint that can respond to GET and POST requests.

1. Create a new file in the `src/pages/api/` directory with the name `<your-endpoint-name>.ts` in your CLI project.

2. Add endpoint handlers for the HTTP methods you want to support. Each handler receives a `request` object and returns a `Response`:

    ```ts
    import type { APIRoute } from 'astro';

    export const GET: APIRoute = async ({ 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 const POST: APIRoute = async ({ request }) => {
        const data = await request.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.
    };
    ```

## Step 2 | Call the endpoint from your frontend

> **Note:** If you came here from [Elevate API Call Permissions](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md), complete only **Step 1** above. Skip **Step 2** and return to that article, it has its own instructions for calling the endpoint from your frontend.

Call your endpoint from frontend components using Wix's built-in HTTP client. At the end of this step, you'll be able to send requests to your backend endpoint and receive responses.

1. In your frontend component, use `httpClient.fetchWithAuth()` to call your endpoint:

    ```tsx
    import { httpClient } from '@wix/essentials';

    function Index() {
      const callEndpointGET = async () => {
        try {
          const baseApiUrl = new URL(import.meta.url).origin;
          const res = await httpClient.fetchWithAuth(`${baseApiUrl}/api/<your-endpoint-name>`);
          const data = await res.text();
          console.log('Response:', data);
        } catch (error) {
          console.error('Error:', error);
        }
      };

      const callEndpointPOST = async () => {
        try {
          const baseApiUrl = new URL(import.meta.url).origin;
          const res = await httpClient.fetchWithAuth(`${baseApiUrl}/api/<your-endpoint-name>`, {
            method: 'POST',
            body: JSON.stringify({ message: 'Hello from frontend' }),
          });
          const data = await res.json();
          console.log('Response:', data);
        } catch (error) {
          console.error('Error:', error);
        }
      };

      return (
        <WixDesignSystemProvider>
          <Page>
            <Page.Content>
              <button onClick={callEndpointGET}>Call GET Endpoint</button>
              <button onClick={callEndpointPOST}>Call POST Endpoint</button>
            </Page.Content>
          </Page>
        </WixDesignSystemProvider>
      );
    }
    ```
2. Start your local development environment to test the endpoints:

```bash
npm run dev
```

3. Press `Dashboard` to open the dashboard page in your browser, and click the buttons to execute the HTTP endpoint calls.

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

   ### CLI 
   ```
   1:13:38 PM [backend] Log from GET.
   1:13:39 PM [backend] Log POST with body: { message: 'Hello from frontend' }
   ```

   ### Browser console
   ```
   Response: Response from GET.
   Response: {"message":"Hello from frontend"}
   ```

## Step 3 | Build and deploy your project

[Build and deploy your project](https://dev.wix.com/docs/wix-cli/guides/development/build-and-deploy-a-project.md) to make your endpoints available in production. Once deployed, your endpoints will be accessible at the production URLs and can handle live traffic from your site's visitors.

## Delete an HTTP endpoint
To delete an HTTP endpoint from your project, delete the file under `src/pages/api/` that contains your HTTP endpoint and build and deploy again.