Add Web Method Extensions with the CLI

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

Web method extensions in the CLI allow you to define functions in your app's backend that you can call from your frontend code.

Follow the instructions below to:

  1. Create a web method extension for your app.
  2. Try out the web method extension.
  3. Deploy your app with the web method extension.

Once these tasks are complete, your app will have a web method extension with methods that can be called from your frontend code.

Before you begin

Step 1 | Create the extension

In the terminal:

  1. Run the following command in your project's repository.:

    Copy
  2. The CLI displays a menu of extensions to generate. Under Backend Extensions, select Web Method and hit enter to continue.

  3. The CLI prompts you to name the web method. You can only have one web method with a given name.

Upon completion, the web method extension file is created in your project directory with the following structure:

Copy

The default code in this file creates a web method using the Web Methods API.

You can relocate this file to anywhere you want within the src directory. For example, if you have a dashboard page extension that calls your web methods, you may want to relocate the web methods extension file to the dashboard page's directory.

Step 2 | Try out your web method extension

To try out your web method extension, call it from your frontend code:

  1. Import the web method in your frontend component's code file using the following syntax:

    Copy
  2. Call the function in your frontend component and log the response to the console. For example, in a dashboard page extension's .tsx file, add the following code to the beginning of the component:

    Copy

    Make sure that your web method returns a value that can be logged.

  3. Start your local development environment:

    Copy
  4. Open the extension with your frontend code. For example, if you added the code to a dashboard page extension, press D and select your dashboard page to open it in the browser.

  5. Check the console output in your browser's developer tools to see the logged response.

Step 3 | Build and deploy your app

Once your app is ready for production, you can build it and create 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 create 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 a web method extension

To delete an web method from your app, simply delete the web method extension's file.

Did this help?