Quick Start a Wix CLI App

This guide explains the minimum steps required to get a CLI app up and running using the Wix CLI.

Before you begin

Before getting started, make sure that you:

• Have Node.js (v20.11.0 or higher).
• Have Git installed and configured.
• Are logged into your Wix account. If you don't already have one, sign up for a Wix account.

Step 1 | Create a new app project

1. Run the following command to create a new app project:

   Copy

2. When asked what you would like to do, select Create a new Wix App.

3. Enter a name for your app and a folder name for your project.

   • The app name is the name that appears in your app's dashboard.
   • The folder name is the name of the directory containing your project's local files.

Once the CLI has created your app, the app's files appear in a local directory with the folder name you chose.

Your app appears in the app dashboard but isn't yet installed on a development site.

Step 2 | Test the app

1. Run the dev command to start the local development environment.

2. Select a site to install your app on for testing:

   • Pick an existing site: Designates one of your existing Wix sites.
   • Create a new Development Site: Builds a new Wix development site.

3. Press Enter to open your browser and install the application on your test site.

4. The CLI builds a local environment for your test site and provides a menu to view your app's dashboard pages in the browser.

The development environment is set up for hot reloading, so any changes you make to your code are immediately reflected in the browser.

Step 3 (Optional) | Call a Wix API

In this step, we show how to call an API from your app's dashboard page, using the List Locations method as an example.

1. Configure the required permissions for List Locations. For detailed instructions, see Configure Permissions for Your App.

2. Install the @wix/business-tools package so you can work with the Locations API.

   Copy

3. Update the code of our dashboard page extension to display a list of all the business locations in our site:

   1. Open your dashboard extension's tsx file. The path should be /src/extensions/dashboard/pages/my-page/my-page.tsx.

   2. Add the following import statements to your file:

      Copy

   3. In the DashboardPage component add a locationNames state variable and a useEffect hook that calls listLocations() and extracts the list of location names to locationNames. Your code should look like this:

      Copy

   4. In the Page.Content element of your component, change the title to "Locations List" and the subtitle to the value of locationNames. Your code should look like this:

      Copy

   Full example code

   Copy

   Your dashboard page is now set up to load and display the names of the site's locations.

   Note: Some API calls may require elevated permissions.

4. Test the API call:

   1. Add a location to your development site if you don't have any already.

   2. Run the dev command to start the local development environment.

   3. Click the link to open your development site's dashboard.

   4. Navigate to your app's page in the dashboard under Apps.

      

   5. Your app's dashboard page should load and display a list of locations.

      

Next steps

After completing the above steps, you have a simple Wix app that you can experiment with and test locally.

You can now:

• Add extensions to your app.
• Learn more about developing your app.

See also

• About the Wix CLI
• Wix CLI Development Overview
• Project structure
• CLI Command Reference