Tutorial | Create an App with Wix CLI

In this tutorial, you'll create an app with a simple dashboard page extension using Wix CLI.

Before you begin

Step 1 | Create an app project

Let's start by creating a new app project.

  1. Open a terminal and navigate to the folder where you want to create your app.

  2. Run the following command using npm or yarn:

    npm

    Copy

    yarn

    Copy

    If prompted, press y to install the @wix/create-app package.

  3. Follow the prompts to select Create a new Wix App and then select Create a basic app.

  4. When prompted to enter a name for your app, press Enter to use the default name, which is My Wix App.

  5. When prompted to select a folder name, press Enter to select the default folder name (my-wix-app) for your app in your local file system.

You now have a new app in the Custom Apps page, a new folder in your local file system, and a local git repository for developing and testing your app.

The project contains all the files your app needs to run locally and in production, including:

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

Step 2 | Run your app locally

Now that you’ve initialized your app, you can run a local development server to see the app in action, and view local changes as you develop your app. The local development environment runs the app and its initial boilerplate code on the development site that you chose in the previous step.

To run a local development server for your app:

  1. Navigate to your newly created folder for your app.

    Copy

  2. Run the following command using npm or yarn:

    npm

    Copy

    yarn

    Copy

  3. The CLI prompts you to choose a development site (test site), which you’ll use throughout this tutorial to run and test your app. You can choose an existing Wix site as your development site, or create a new one. Let’s Create a new Development Site. The newly-created development site is automatically named something like Dev Site 5x2043, and can be found in your Wix account’s list of sites.

  4. Follow the prompt to open the development site on your default browser. If the browser doesn’t open, install your app on your test site manually and skip the next step.

  5. Click Agree & Add to install your app on your development site.

Your app is now running on your development site. As you develop your app, any changes made to your app’s code are reflected in real-time on your development site.

Step 3 | Modify your app's code

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

  1. In the initial dashboard page, click the Show a toast button.
    You'll see to see a toast open at the top of the page. Let's change the message it displays.

  2. Open the /src/dashboard/pages/page.tsx file.

  3. Replace the button component's onClick event handler with:

    Copy

  4. Save the file and go back to the browser.

  5. Click the button again to see the new toast message.

Next steps

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

Use the following resources to continue building you app:

  • Dashboard pages: Learn how to create additional dashboard pages, configure the dashboard sidebar, and more.
  • Wix Dashboard React SDK: Learn how to add functionality to the Wix dashboard.
  • Wix Design System: Learn how to use Wix's React components for a cohesive user experience consistent with Wix's design standards.
  • Extension catalog: Learn about other extensions you can add to your app.
Was this helpful?
Yes
No