Quick Start Guide

Follow this guide to get started building your first Wix App using the Wix CLI for Apps.

To build a new app, you will:

• Create a new app project
• Run the app locally
• Add new Dashboard Pages & configure the Dashboard Sidebar
• Interact with the Dashboard using the Dashboard SDK
• Create app versions in the Wix Developers Center

Prerequisites

Before getting started, make sure you have the following set up:

• Node.js (v16.20.0 or higher)
• npm or yarn
• macOS, Linux, or Windows
• A Wix Developer account - Sign up here

Create a new app project

Let's start by creating a new app project.

To create a new app project, run one of the following and follow the command prompts:

npm

1
npm create @wix/app@latest

yarn

1
yarn create @wix/app

This registers a new app in the Wix Developers Center and creates a new project in your local file system.

Choose a development site

During the app creation process, the CLI prompts you to choose a development site. A development site is a site that you use to run and test your app. You can choose an existing site or create a new one.

To learn more about working with a development site, see Development Sites.

Project structure

The CLI generates a new app project in your local file system. The project contains all the files your app needs to run locally and in production.

The project includes:

• Initial boilerplate code for a simple app with a dashboard page
• A package.json file with your apps dependencies

To learn more about dashboard pages in the project structure, see Dashboard Pages.

Run the app locally

Now that we've created an app project, we can run it locally to see it in action.

To run the new app project locally, run one of the following:

npm

1
npm run dev

yarn

1
yarn dev

This starts a local development environment that serves your app. Follow the prompts to open the generated dashboard page in your browser.

Click the Show a toast button to see a toast open at the top of the page.

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

Let's make a small change in the boilerplate code to see how you edit your project:

1. Open the src/dashboard/pages/page.tsx file.
2. Replace the button onClick event handler with:
   Copy

   1
   onClick={() => {
   2
      showToast({
   3
        message: 'My second toast message!',
   4
        type: 'success',
   5
      });
   6
    }}

3. Save the file and go back to the browser.
4. Click the button again to see the new toast message.

To learn more about working with the Dashboard SDK and its different methods, see the Dashboard SDK.

Build the app

Now that we've run our app, we can build it.

To build the app, run one of the following:

npm

1
npm run build

yarn

1
yarn build

Create an app preview URL

Now that we've made a change to our app and built it, let's create an app preview URL.

An app preview URL is a URL you can share with team members who are collaborators on you development site. The link allows them to preview and test your app.

To create an app preview URL, run one of the following:

npm

1
npm run preview

yarn

1
yarn preview

This displays the app preview URL. Copy the URL and open it in a new browser tab. The URL takes you to the same dashboard page that you saw previously. Use this URL to share your app with others for testing and feedback.

Create an app version

Now that we have a working app, let's create an app version.

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.

To create an app version, run one of the following and follow the command prompts:

npm

1
npm run create-version

yarn

1
yarn create-version

This guides you through creating a new app version in the Wix Developers Center. Once the app version is created, you can optionally submit it for review and publish it to the Wix App Market.

To learn more about app versions, see App Versions and Deployment.

Next steps

You now have a fully working app that can be installed on Wix sites. Take some time to tinker a bit with the generated code and try to add more features to your app.

Use the following resources to continue building you app:

• Dashboard Pages: Learn how to add new dashboard pages to your app, configure the dashboard sidebar, and more.
• Dashboard SDK: Learn how to interact with the Wix Dashboard using the Dashboard SDK.
• Wix Design System: Learn how to use the Wix Design System to build beautiful Wix Apps.