Add HTTP Function Extensions with the CLI

This feature is in Developer Preview and is subject to change.

HTTP function extensions allow you to define HTTP functions that can be called from your frontend code. The CLI handles the setup and hosting of the backend code for you, simplifying the development process. These HTTP functions can be invoked from any frontend component in your CLI project.

Follow the instructions below to:

  1. Create a backend HTTP function extension for your app.
  2. Test the backend HTTP function extension on a site.
  3. Deploy your app with the backend HTTP function extension.

Once these tasks are complete, your app will have a backend HTTP function extension that can be called from your frontend code.

Note: Web method extensions require less boilerplate code than HTTP function extensions, as you don't have to manually extract values from a request, serialize responses, or handle HTTP headers and query parameters. Consider using web methods if you don't require HTTP-specific features, like header codes.

Step 1 | Create the extension

In the terminal:

  1. Navigate to your project repo.

  2. Run the following command:

    Copy

  3. The CLI will display a menu of extensions to generate. Under Backend, select API, and then select HTTP Function.

  4. The CLI will prompt you to name the HTTP function. You can only have one HTTP function extension with a given name.

  5. The CLI will prompt you to choose a method.

Upon completion, the HTTP function extension files will be created in your project directory with the following structure:

Copy

The api.ts file is essential and includes boilerplate GET and POST functions that take a Node Request and return a Node Response. The CLI also supports PUT and DELETE methods.

Step 2 | Test your HTTP function extension

To test your HTTP function extension:

  1. Add logging statements in your HTTP functions:

    src/backend/api/<your-http-function-extension-name>/api.ts

    Copy

  2. Add code to call your HTTP functions from your frontend code. For example, in your dashboard page code, add functions that call your HTTP functions on click:

    Note: The endpoint is a BASE_API_URL created by the CLI combined with the API name you chose during setup. For example, if you named your API test, you'd replace <your-http-function-extension-name> with test.

    Copy

  3. Start your local development environment:

    Copy

  4. Press D to open the dashboard page in your browser, and click the buttons to execute the HTTP function calls.

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

    CLI:

    Copy

    Browser console:

    Copy

Tip: In the CLI, press L to view the full logs, C to clear the logs, ESC to exit the log view, and use the up and down arrow keys to navigate.

Step 3 | Build and deploy your app

Once your app is ready for production, you can build it and release a version in the app dashboard.

  1. Run the following command to build your app:

    Copy

  2. Run the following command and follow the prompts to release an app version:

    Copy

An app version allows you to publish an app to the Wix App Market or install it on a site with a direct install URL.

For more information about building and deploying your app, see Build and Deploy an App with the CLI.

Delete an API extension

To delete an API from your app, delete the subfolder under src/backend/api that contains your HTTP function extension files.

See also

Did this help?