Add an HTTP Endpoint Extension in Studio Two

An HTTP endpoint 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.

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.

   

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.

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.

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.

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 /.

   Copy

   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
• Build an HTTP Endpoint in Studio Two
• About Studio Two Extensions
• HTTP Endpoints