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

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-from-legacy-cli/migrate-from-http-functions-to-http-endpoints.md

## Article Content:

# Migrate from HTTP Functions to HTTP Endpoints

This guide explains how to migrate HTTP functions to [HTTP endpoints](https://dev.wix.com/docs/wix-cli/guides/development/http-endpoints/about-http-endpoints.md) in your new Wix CLI project, as part of [migrating an app from the legacy Wix CLI](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/about-the-wix-cli.md). The main changes involve updating your file structure and syntax.

## Step 1 | Migrate the backend

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

1. From your legacy project, copy `src/backend/api/<name>/api.ts` to `src/pages/api/<name>.ts` in your new Wix CLI project.

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 }) => {
   ```

## Step 2 | Migrate the frontend

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 from your legacy project, 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 HTTP endpoints syntax in your new Wix CLI project, 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 }));
};
```