> 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 an HTTP Endpoint Extension in Studio Two

## Article: Add an HTTP Endpoint Extension in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-backend/http-endpoints/add-an-http-endpoint-extension-in-studio-two.md

## Article Content:

# Add an HTTP Endpoint Extension in Studio Two

An [HTTP endpoint](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-backend/http-endpoints/about-http-endpoints.md) is a backend route that handles HTTP requests and returns a response, such as JSON data for your site's frontend code.

Follow the instructions below to:

1. Add an HTTP endpoint to your site project.
2. Customize the endpoint.
3. Check the endpoint.
4. Publish your site with the endpoint.

> **Note:** You can also ask **Aria**, Wix's AI assistant, to create and customize the extension.

## Step 1 | Add an HTTP endpoint

To add an HTTP endpoint:

1. In the Studio Two editor, open the **Code** tab.
2. In the VS Code sidebar, open **Wix Extension Builder**.

   ![Wix Extension Builder in the VS Code activity bar](https://wixmp-833713b177cebf373f611808.wixmp.com/images/6bff2816a5bfe47ed855a1859cd89d5a.png)

3. Under **Create an Extension**, choose **Backend**, then **HTTP Endpoint**.
4. Fill in the form:
   - **Name**: The route name, which is also the file name. Use lowercase letters, numbers, and hyphens. To nest the route, separate segments with slashes. For example, `stock/levels`.
5. Click **Generate**.

You can find the new file at `src/api/<name>.ts`, where `<name>` is the name you entered. Wix serves it at the route `<name>`. Frontend code calls the route at a full URL on the domain that serves your code, not on your site's domain. Step 3 shows how to build that URL.

Unlike other extension types, an HTTP endpoint isn't registered in `extensions.ts` and doesn't appear under **My Extensions**. Wix finds it from its location in `src/api/`.

The file exports two handlers:

- A `GET` handler that returns a JSON message.
- A `POST` handler that returns the JSON body it receives.

For how the file's path maps to a route and what each handler receives, see [HTTP Endpoint Extension Files and Code](https://dev.wix.com/docs/backend-extensions/http-endpoints/http-endpoint-extension-files-and-code.md).

## Step 2 | Customize your HTTP endpoint

You can edit the generated file to match the request handling you need. When you're happy with the endpoint, move on to the next step.

For the full workflow, from routes and handlers to caller checks and calls from your frontend code, see [Build an HTTP Endpoint in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-backend/http-endpoints/build-an-http-endpoint-in-studio-two.md).

For example, to change the message that the `GET` handler returns:

1. Open `src/api/<name>.ts`.
2. In the `GET` handler, replace the message `'Hello from /<name>'` with `'Hello world!'`.
3. Save the file.

When you call the endpoint, the response body is `{"message":"Hello world!"}`.

## Step 3 | Check the endpoint

To check the endpoint, call it from a dashboard page. A dashboard page is the quickest place to see the response, because it opens in the site dashboard without placing anything on a site page.

To check the endpoint from a dashboard page:

1. If your site doesn't have a dashboard page, add one. For instructions, see [Add a Dashboard Page Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/add-a-dashboard-page-extension-in-studio-two.md).
2. Open `src/extensions/dashboard/pages/<page-route>/<page-route>.tsx`, where `<page-route>` is the dashboard page's route.
3. Inside the page component, call the endpoint with `httpClient.fetchWithAuth()` from `@wix/essentials`, and store the message it returns. In the following code, replace `my-endpoint` with the name you entered in Step 1, without a leading `/`.

   ```tsx
   import { useEffect, useState } from 'react';
   import { httpClient } from '@wix/essentials';

   // Inside the page component:
   const [message, setMessage] = useState('Calling the endpoint...');

   useEffect(() => {
     const origin = new URL(import.meta.url).origin;
     const basePath = import.meta.env.WIX_SERVER_BASE_PATH || '/';
     httpClient
       .fetchWithAuth(`${origin}${basePath}my-endpoint`)
       .then((response) => response.json())
       .then((data) => setMessage(data.message));
   }, []);
   ```

   `fetchWithAuth()` attaches the caller's access token, which every endpoint request needs. The URL starts with the origin of `import.meta.url` because Wix serves endpoints from a different domain than your site's pages. `WIX_SERVER_BASE_PATH` is the path that endpoints are served under, and it ends with `/`. A request without a token fails with a `401` response.

4. In the page's `EmptyState` component, replace the `subtitle` value with `{message}`, so that the prop reads `subtitle={message}`. Keep the other props as they are.
5. Save the file.
6. In the site dashboard, in the **Custom Pages** section of the sidebar, click your dashboard page's title.

If the endpoint is working, the page shows `Hello world!` in place of the placeholder subtitle.

## Step 4 | Publish your site

When you're ready, click **Publish** in the Studio Two editor to ship the endpoint with your site.

## See also

- [About HTTP Endpoints](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-backend/http-endpoints/about-http-endpoints.md)
- [Build an HTTP Endpoint in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-backend/http-endpoints/build-an-http-endpoint-in-studio-two.md)
- [About Studio Two Extensions](https://dev.wix.com/docs/studio-two/get-started/about-studio-two-extensions.md)
- [HTTP Endpoints](https://dev.wix.com/docs/overview/extensions-framework/backend-extensions/http-endpoints.md)