> 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: Migrate from HTTP Functions to HTTP Endpoints

## Article: Migration Guide

## Article Link: https://dev.wix.com/docs/wix-cli/guides/development/http-endpoints/migrate-from-http-functions-to-http-endpoints.md

## Article Content:

# Migrate from HTTP Functions to HTTP Endpoints

If you're upgrading from the [Legacy Wix CLI for Apps](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/about-the-legacy-wix-cli-for-apps.md), this guide helps you migrate your existing [HTTP functions](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) to the new Astro endpoints format. The main changes involve updating your file structure and syntax.

## Backend migration steps

To migrate your HTTP functions to Astro endpoints, first update your backend code:

1. Relocate HTTP function files from `src/backend/api/<name>/api.ts` to `src/pages/api/<name>.ts`.

2. Add the APIRoute type import:
   ```ts
   import type { APIRoute } from 'astro';
   ```

3. Change method signatures from:
   ```ts
   export async function GET(req: Request) {
   ```
   To:
   ```ts
   export const GET: APIRoute = async ({ request }) => {
   ```

## Frontend migration steps

After updating your backend code, update your frontend code to call the new endpoints:

   Change from:
   ```tsx
   const res = await httpClient.fetchWithAuth(
     `${import.meta.env.BASE_API_URL}/<your-endpoint-name>`,
   );
   ```

   To:
   ```tsx
   const baseApiUrl = new URL(import.meta.url).origin;
   const res = await httpClient.fetchWithAuth(`${baseApiUrl}/api/<your-endpoint-name>`);
   ```

## Backend example

### Previous syntax

This example shows the old HTTP functions syntax used in the previous CLI version, with files located in the `src/backend/api/` directory.

```ts
export async function GET(req: Request) {
    const url = new URL(req.url);
    const id = url.searchParams.get('id');
    return new Response(JSON.stringify({ id }));
}

export async function POST(req: Request) {
    const data = await req.json();
    return new Response(JSON.stringify({ received: data }));
}
```

### Updated syntax

This example shows the new Astro endpoints syntax used in the new CLI version, with files located in the `src/pages/api/` directory.

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

export const GET: APIRoute = async ({ request }) => {
    const url = new URL(request.url);
    const id = url.searchParams.get('id');
    return new Response(JSON.stringify({ id }));
};

export const POST: APIRoute = async ({ request }) => {
    const data = await request.json();
    return new Response(JSON.stringify({ received: data }));
};
```