Add API Extensions with the CLI

Backend API extensions in the CLI 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 API functions can be invoked from any frontend component in your CLI project.

Follow the instructions below to:

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

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

Before you begin

• You must have an app project that was created using the Wix CLI.
• You must be logged into your Wix Developer account. If you don’t have one, sign up for a Wix Developer account.

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 Extensions, select API and hit enter to continue.

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

5. The CLI will prompt you to choose an API method.

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

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 API

To test your API:

1. Add logging statements in your API functions:

   src/backend/api/<your-api-name>/api.ts

   Copy

2. Add code to call the API from your frontend code. For example, add a function that calls the API from a dashboard page with buttons to test the function:

   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-api-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 API calls.

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

   CLI:

   Copy

   Browser console:

   Copy

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 an API extension

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