Development Overview

This article gives an overview of the methodologies for developing an app that you created using the Wix CLI or integrated with the CLI.

Understanding your app

After setting up a Wix CLI app, you will have files set up according to the structure described in CLI App Structure.

To understand and modify your app's code, you should be familiar with the following:

For a deeper understanding of the CLI app framework, read CLI App Framework Features.

Working with Wix APIs

As you build your app, you'll need to interact with Wix APIs to get information about the site your app is installed on, the user who is using your app, and more.

Wix offers a rich set of APIs for different business solutions that enable you to build powerful apps.

To call Wix APIs you use:

The SDK is the preferred method of consuming Wix APIs because it offers a simpler authentication experience.

Adding extensions

You can add various extensions to extend the functionality of your app using the generate command:

Copy
1

This command starts a process that guides you through adding an extension to your app.

After you select an extension, you're prompted for relevant configuration details, then your extension code is generated in your app's local files.

Read more about CLI app extensions.

Development and testing

Wix Apps are not standalone web apps. They need to be installed on a Wix site to run.

When you create your CLI app, you are prompted to choose or create a development site. As you work locally with the CLI, you can use the CLI to open the different parts of your app on the development site in your browser.

To do so, run the following command and select the part of your app to view.

Copy
1

This will open a local development environment in your browser. This environment is set up for hot reloading, so any changes you make to your code will be reflected in the browser.

Changing development sites

Throughout the development process, you may wish to use multiple development sites to test your app in different scenarios. You can change the development site associated with an app at any time.

To change an app's development site:

  1. Run the following command:

    Copy
    1

  2. Press C to assign a new development site

App versions and deployment

Before deploying an app, you need to build your app and create an app version. This process is documented in Build and Deploy an App with the CLI

When you create an app version, the CLI uploads all your app's built assets to the Wix Apps CDN and registers the app version in Wix Developers Center.

Once you have an app version, you can submit it for review and publish it to the Wix App Market or have users install it on their sites with a direct install URL.

For more information on publishing your app, see About Market Listings.

The Wix Apps CDN

The Wix Apps CDN is a content delivery network that hosts your app's build assets.

Each app in the CDN has its own isolated subdomain. The subdomain has the following format:

Copy
1

For example, if your app ID is 12345678-1234-1234-1234-123456789012, your app's build assets are served from https://12345678-1234-1234-1234-123456789012.wix.run.

CLI App Framework features

The Wix CLI App Framework is a React-based framework that allows you to build apps for Wix sites. The framework provides a way to define app extensions, user interfaces, styling, and more.

The Wix CLI App Framework is:

  • React-based: Use React components to define your app's UI. You can use React components from the Wix Design System or bring your own components.
  • Boilerplate-free: You don't have to write any boilerplate code. Focus on your app's business logic and let the framework handle the rest.
  • Declarative: Define your app's extensions and their UIs in a declarative manner using React.

Your app's code is handled using Vite and the CLI app manifest.

Vite

The Wix CLI App Framework uses Vite as the toolchain for building your app's code. Vite is a fast and opinionated web development build tool that focuses on providing a great developer experience.

With the CLI, you can use all of Vite’s features, including:

Read the Vite Features Guide to learn more about Vite.

Keeping the CLI up to date

We're actively working on improving the CLI and adding features, which means we will be releasing new versions. It's important to keep your CLI up to date to benefit from the latest improvements and features.

You can check which version of the CLI you have using the following command:

Copy
1

You can upgrade to the latest version of the CLI using the following command:

Copy
1

Additional Information

For more information about app development, see:

Was this helpful?
Yes
No