Tutorial | Create a Self-Hosted App

In this tutorial, you'll create an app with a simple dashboard page extension using a self-hosted iframe.

Before you begin

Step 1 | Create an app in the Custom Apps page of your Wix Studio workspace

We'll start off by creating a new app.

  1. In the Custom Apps page, go to My Apps, and then click Create New App.
  2. Select Build from scratch.

A new app is created in the Custom Apps page.

Step 2 | Add a dashboard page extension

We'll now add a dashboard page extension in your app's dashboard. This extension uses an iframe to embed a web page in the dashboard. We've already deployed a web page on an external server for you to use in this tutorial. When configuring the extension, you'll register the URL of this web page.

  1. In the left sidebar, select Extensions, and then click Create Extension.
    A panel opens, showing the available extension types.
  2. Find the Dashboard page extension and click Create.
  3. Fill in the following configuration data:
    • Name: Demo page
    • iframe URL: https://www.quickstartselfhostedapp.com/
  4. Click Save.

You’ve finished setting up the dashboard page extension and can now install it on a site to see it in action.

Step 3 | Install your app on a site

Wix provides a free Premium development site so you can easily install your app and see it working. In this step, you'll create a development site, install your app on the site, and try it out.

  1. To set up a development site, in your app's dashboard, click Test Your App in the top right, then click Create Development Site.
    In the list of business solutions to install on the development site, click None, then click Create Development Site.
  2. Next, install the app on your newly-created development site.
    Return to your app's dashboard, click Test Your App, and then click Dashboard.
  3. Hover over the development site you just created, and then click Test Your App.
  4. Click Add to Site.
  5. When prompted for consent, select the checkbox and click Agree & Add.

Your app is now installed on the development site. You can see the external web page embedded in the dashboard.

Next steps

You now have a fully working app that can be installed on Wix sites. Take some time to play around in your app's dashboard to explore more features that you can add to your app.

Use the following resources to continue building your app:

  • Wix Design System: Learn how to use Wix's React components for a cohesive user experience consistent with Wix's design standards.
  • Wix APIs: Learn how to integrate your app with Wix to transfer data between your app and the site it's installed on and extend Wix business solutions, such as Wix eCommerce or Wix Bookings.
  • Extension catalog: Learn about other extensions you can add to your app.
Was this helpful?
Yes
No