> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial | Set Up an App With the App Dashboard

## Article: Tutorial | Set Up an App With the Wix Developers Center

## Article Link: https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-set-up-an-app-with-the-app-dashboard.md

## Article Content:

# Tutorial | Set Up an App with the App Dashboard

This tutorial shows you how to set up a new Wix app using the app dashboard. The tutorial shows you how to create, configure, and test an externally hosted "Product of the Day" app that can be installed on a Wix site. The app lets site admins offer a daily discount on a product they choose.

Upon downloading the app, the site gains access to the following features:

+ **In the site dashboard:** A dashboard page where a site admin can choose a product from their catalog to discount.
+ **In the site:** An automated chat message offering site visitors a discount coupon for the selected product.

The dashboard page extension is built with [React](https://react.dev/) and the server with [Express.js](https://expressjs.com/). We provide all the code you need for this app in the [example apps GitHub repository](https://github.com/wix-incubator/wix-developers-example-apps). Regardless of the technologies you use to build your app, you can take similar steps to integrate it with the app dashboard. 

The end result will look like this:

![App preview](https://wixmp-833713b177cebf373f611808.wixmp.com/images/522f4efc72aadba4f3960b08346289c5.png)

We'll take the following steps to implement the Product of the Day app:

1. Clone the app repository.
1. Create an app from the [Custom Apps page](https://manage.wix.com/account/custom-apps) in your Wix Studio workspace.
1. Configure permissions for your app.
1. Set up the dashboard page extension.
1. Set up the app's backend.
1. Test the app out locally.

## Before you begin

Before getting started, make sure that:

+ You have [Node.js](https://nodejs.org/en/download/) (v16.4 or higher).
+ You're logged into your Wix Studio account. If you don't already have one, [sign up for a Wix Studio account](https://manage.wix.com/account/custom-apps).

## Step 1 | Clone the app repository

This tutorial uses a pre-built app we've saved in the [example apps GitHub repository](https://github.com/wix-incubator/wix-developers-example-apps).

To clone the repository to your computer, open the terminal and run the following command from the folder you want to clone the repository into:

```bash
git clone https://github.com/wix/wix-developers-example-apps.git
```

Then navigate to the folder containing the Product of the Day app:

```bash
cd wix-developers-example-apps/product-of-the-day
```

Within this folder you can find both the backend app server (in the `server` folder) and the frontend dashboard component (in the `client` folder).

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

The Custom Apps page in your Wix Studio workspace is the place for managing Wix apps you develop. Follow these steps to create a Wix app that we'll connect to the external servers.

1. Go to [Wix Studio](https://manage.wix.com/account/custom-apps) and sign in.
1. If this is your first Wix app, click **Start Building**. If you already have an app, click **Create New App** in the top-right corner. This opens your new app's dashboard:

    ![New app page](https://wixmp-833713b177cebf373f611808.wixmp.com/images/8139733c2eb6a4a20cf86f8449c3a2d4.png)

1. Click the default name generated for your app, and enter a new one, such as "Product of the Day".

## Step 3 | Configure permissions for your app

This app uses Wix [REST APIs](https://dev.wix.com/docs/rest.md) to access and manage Wix site data, requiring specific permissions to access each endpoint. To ensure functionality, your app needs these permissions from any site using it. This section guides you through setting up your app to request these permissions upon installation.

### Find required permissions

To find the permissions that your app requires:

1. Go to the [Wix REST API reference documentation](https://dev.wix.com/docs/rest.md).
1. Find the specific endpoints that your app calls. The Product of the Day app calls the following endpoints:
    * [Query Products](https://dev.wix.com/docs/rest/business-solutions/stores/catalog/query-products.md): To retrieve information about products in the site's catalog.
    * [Create a Coupon](https://dev.wix.com/docs/rest/business-management/marketing/coupons/coupons/create-a-coupon.md): To generate a discount coupon for the product the site owner chooses.
    * [Send Message](https://dev.wix.com/docs/rest/crm/communication/inbox/messages/send-message.md): To send site visitors a message with the coupon in the Wix Chat widget.  

1. In each endpoint reference, look for **Permission Scopes**:

    ![Permission Scopes in API Ref](https://wixmp-833713b177cebf373f611808.wixmp.com/images/b1fe3c3d91e054ba2a2214f75a37c87a.png)  
    
    The Product of the Day app requires the following permission scopes:
    | Endpoint | Required permissions |
    |--|--|
    | Query Products | Read Products |
    | Create a Coupon | Manage Coupons (with the identifier `SCOPE.DC-COUPONS.MANAGE-COUPONS`) |
    | Send Message | Manage Inbox Messages |
    
### Add permissions

To add permissions for the app to request upon installation:

1. Go to **Permissions** in your app's dashboard.
1. For each permission scope:
   1. In the left sidebar, click **Add Permissions**.
   1. Enter the permission scope's name in the **Search by name or ID** field.
   1. Check the permission scope's checkbox under **Choose Permission Scopes**.
   1. Click **Save**.

Now, when a site owner installs the app, Wix prompts them to grant the necessary permissions.

## Step 4 | Set up the dashboard page

Every Wix site has a dashboard where site admins manage their site and business. Our app integrates with this dashboard by adding a new page where site admins can select a product of the day and apply discounts. The dashboard page is built with [React](https://react.dev/). This section guides you through adding the dashboard page to your app.

### Run a local server

Our app includes two servers: one for the dashboard page UI (in the `client` folder) and one for the app's backend business logic (in the `server` folder).

To run the local development server for the dashboard page UI:

1. Navigate to the `client` folder:

    ```bash
    cd client
    ```

1. Install the dependencies:

    ```bash
    npm install
    ```

1. Start the local server for the dashboard page:
    
    ```bash
    npm run start:secure
    ```

    This runs the local dashboard page server and opens your browser to `https://localhost:3000`.

    > **Note:** If you encounter a security warning, click **Advanced** and then **Proceed to localhost (unsafe)**.
    
Now, you can see the dashboard component open in your browser:

![Dashboard component](https://wixmp-833713b177cebf373f611808.wixmp.com/images/7d3108c7f43fc3327d5f792007722710.png)

> **Note:** Make sure to keep the local dashboard page server running for the remainder of this tutorial.

### Add a dashboard page

To set up your app to include the dashboard page:

1. In the left sidebar, click **Extensions**.
1. Click **Create Extension**.
1. Check the **Dashboard** checkbox.
1. In the **Dashboard Page** card, click **Create**.

    ![Create Dashboard Page extension](https://wixmp-833713b177cebf373f611808.wixmp.com/images/23fd6277f5c1b0142cf4b8ed5d6fd5ec.png)

1. Under **Page info**, in the **iFrame URL** field, enter the address for your local dashboard page server: `https://localhost:3000/`.

    ![Enter local host address](https://wixmp-833713b177cebf373f611808.wixmp.com/images/24d724481cb3fd2ffc6f42af45a16adc.png)

1. Under **Sidebar configuration**, in the **Page name** field, enter a name for your dashboard page. This name is shown in the dashboard sidebar menu.

    ![Name the dashboard page](https://wixmp-833713b177cebf373f611808.wixmp.com/images/6891e8ea775e2cd51d9744e242c86434.png)

1. Click **Save**.

Your app is set to add a dashboard page upon installation on a site and load it from the specified URL.

## Step 5 | Set up the backend

Our app contains business logic in our backend server. This section guides you through setting up the backend, including authentication for your app.

### Configure environment variables

To configure environment variables for authentication:

1. In the `product-of-the-day/server` folder, create a file named `.env` with the following placeholder values:

    ```env
    APP_ID=<APP_ID>
    APP_SECRET=<APP_SECRET KEY>
    WEBHOOK_PUBLIC_KEY="<APP_WEBHOOK_PUBLIC_KEY>"
    ```

    > **Note:** Only the webhook public key value needs to be enclosed in quotes.

1. In the left sidebar, click **OAuth**.
1. In the `.env` file created in the first step, replace `<APP_ID>` with the **App ID** and `<APP_SECRET KEY>` with the **App Secret Key**.
    
    ![App ID and App Secret Key on OAuth page](https://wixmp-833713b177cebf373f611808.wixmp.com/images/f8a5b96ce450e1779274b0ebc927b9de.png)

### Add a webhook to your app

Webhooks deliver real-time notifications about events in your app, other apps, or the Wix site. For this app, we'll add the [Message Sent To Business](https://dev.wix.com/docs/rest/crm/communication/inbox/messages/message-sent-to-business.md) webhook, which notifies the app whenever a site visitor sends a message in the Wix Chat widget.

To add a webhook:

1. In the left sidebar, click **Webhooks**.
1. Click **Add Webhook**.
1. Under **API Category**, select **Inbox**.
1. Check the box next to **Message Sent To Business**.
1. In the **Callback URL** field, enter a temporary dummy URL, such as `https://www.test.not`. We'll replace this URL after activating the backend app server.
1. Click **Save**. This takes you back to the **Webhooks** page.
1. Under **Public key**, click **Open**.
1. Click **Copy Key**.
1. In your `.env` file, replace `<APP_WEBHOOK_PUBLIC_KEY>` with the key value:
    
    ```env
    WEBHOOK_PUBLIC_KEY="<APP_WEBHOOK_PUBLIC_KEY>"
    ```

### Start the backend server

To successfully set up our app, the server for the dashboard page and the backend server need to be running at the same time. To start the backend server:

1. Open a new terminal window, and navigate to `product-of-the-day/server`:
    
    ```bash
    cd product-of-the-day/server
    ```

1. Install the app's dependencies:

    ```bash
    npm install
    ```

1. Start the local app server:
    
    ```bash
    npm run start
    ```

    This runs the local app server and displays several important URLs:
    
    ![App server URLs](https://wixmp-833713b177cebf373f611808.wixmp.com/images/a84e9bc301a9b761bafd29a0e29584d3.png)

    * `RedirectUrl`: Endpoint Wix must redirect to after the user authenticates.
    * `AppUrl`: Main entry point for the app's backend functionality.
    * `Message received webhook`: Used for receiving callbacks from Wix.  

1. Copy the `RedirectUrl`, `AppUrl`, and `Message received webhook` and keep them available for the next steps.

> **Note:** Make sure to keep the backend server running for the remainder of this tutorial.

### Configure OAuth

Wix uses [OAuth 2.0](https://dev.wix.com/docs/build-apps/develop-your-app/access/authentication/about-oauth.md) to authorize apps to access our APIs and receive webhooks. To configure OAuth:

1. In the left sidebar, click **OAuth**.
1. Under **URLs**:
   * Enter the `AppUrl` from the previous step into the **App URL** field.
   * Enter the `RedirectUrl` from the previous step into the **Redirect URL** field.
1. Click **Save**.

### Configure the webhook

To make sure your app receives the webhook:

1. In the left sidebar, click **Webhooks**.
1. In the **Webhook List**, next to the **Message Sent to Business** webhook, click the ellipsis ![Ellipsis button](https://wixmp-833713b177cebf373f611808.wixmp.com/images/a3c1863d99c2b6cd27500fe48d84a851.png). Then, click **Edit**.
1. In the **Callback URL** field, enter the `Message received webhook` URL from the previous step.
1. Click **Save**.

Your app is now properly configured and ready to test.

> **Note:** Every time you run the Product of the Day app server, it generates new URLs for the app. If you reset the server, repeat this step to configure the updated URLs.

## Step 6 | Test the app

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.

### Set up a development site

To set up a [development site](https://dev.wix.com/docs/build-apps/launch-your-app/app-distribution/test-your-app-on-a-premium-site.md):

1. In the top right corner of your [app's dashboard](https://manage.wix.com/account/custom-apps), click **Test App** and select **Test on dev site**.
1. Click **+ Create Dev Site** to create a new site. Select your preferred editor and both **Wix Stores (Catalog v3)** and **Wix Stores (Catalog v1)** business solutions and click **Create Dev Site**.
1. Confirm that the new site you just created is selected. Note that the automatically generated name begins with **Dev Site**. If it isn't, select it, and click **Test App**. Wix installs your app and opens the site in a new tab. You can set which site page opens in your [app settings](https://dev.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fapp-settings). If you don't set a page, the site editor opens by default.
1. In your **Sites** page, find the development site you just created. Hover over the development site and click **Select & Edit Site**. This opens the site's dashboard.
1. Click **Design Site**. This opens the site's editor.
1. Add a product page to the site:
    1. In the left sidebar, click **Pages** ![Pages & Menu button](https://wixmp-833713b177cebf373f611808.wixmp.com/images/0ab841c0da4daf4634fa51b3bf115585.png).
    1. In the **Store Pages** tab, select **Product Page**.
    1. Edit the page as desired.
1. Back in the editor, on the top right, click **Publish**.

Your development site is now live.

### Install the app

To install the app on your development site:

1. Return to your app's dashboard.
1. Click **Test Your App**, then click **Preview listing**. This takes you to a preview listing page for your app in the Wix App Market.
1. Click **Test on Dev Site**.
1. Next to the development site you just created, click **Select**.
1. Wix now requests the site permissions your app requires. Click **Agree & Add**.

The Product of the Day app is now installed on your development site.

### Try out the dashboard page

To test the app, we'll start by trying out its dashboard page, where we can choose a product of the day and apply a discount:

1. Open the development site's [dashboard](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2F). Your app now appears in the left dashboard sidebar under the name you entered earlier. Click your app's name in the sidebar.

    ![Product of the Day dashboard sidebar item](https://wixmp-833713b177cebf373f611808.wixmp.com/images/fa15fb9a2b000f3a3858413439fa0710.png)

    This opens your app's dashboard page.

1. Click **Choose Product**.

    ![Product of the Day dashboard page](https://wixmp-833713b177cebf373f611808.wixmp.com/images/67583a9ce63a86dfaab07a53443412ee.png)

     This opens a menu to select a product.

1. Your development site's catalog is filled with example products with the name "I'm a product". To make these products appear, type "I'm" in the **Search by product name** field. Then, select a product and click **Done**.

    ![Select a product](https://wixmp-833713b177cebf373f611808.wixmp.com/images/b72c2ddad9b26d4282120f7274551f2e.png)

1. Adjust the percentage **Discount** to apply to the product, and click **Update**.

    ![Apply discount](https://wixmp-833713b177cebf373f611808.wixmp.com/images/a36e4bb06ce10494498ce1fd6be939d5.png)

You've now selected a product of the day and applied a discount to it.

### Try out the site

Now let's see what the experience is like for a site visitor.

1. Open your development site's editor, hover over **Publish** in the top right, then click **View Site** to open your live site.
1. In your live site, click the chat icon ![Chat Icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/8c635e9c47c19c0bee3e4f49fc0f3445.png) on the bottom right to open the chat widget.
1. In the chat widget, type any text. For example, "Hello".
1. After a few moments, you'll receive a response in the chat widget, offering you a discount on the product of the day:

    ![Chat widget with product of the day discount](https://wixmp-833713b177cebf373f611808.wixmp.com/images/1304514004d50f0d5a1002a6bb9090cc.png)

1. The chat response contains a coupon code and a link. Copy the coupon code, and click the link to go to the product page for the product of the day.
1. In the product page, click **Add to Cart**. Then, to go to the cart page, click **View Cart**.
1. Click **Enter a promo code**, paste the coupon code you copied, and click **Apply**.

    ![Enter promo code](https://wixmp-833713b177cebf373f611808.wixmp.com/images/04388341348ee5fe1b6537b3b2fede8c.png)

Your **Order Summary** now incorporates the Product of the Day discount:

![Order summary with discount applied](https://wixmp-833713b177cebf373f611808.wixmp.com/images/3c4f129d417196fc180f2b7ca97073c8.png)

## Step 7 | Customize the app

The Product of the Day app is now working!

To learn more about how the app works, take a look around the code files in the [GitHub repo](https://github.com/wix-incubator/wix-developers-example-apps).

As an exercise to help familiarize yourself with app code a little more, you can add additional functionality to this app.

For example, edit the code so that each site visitor can only receive one discount coupon per day. To do this, edit `product-of-the-day/server/src/services/ProductOfTheDayService.js`, and add the lines of code marked as `ADDED` below in the comments:

```js
const dayjs = require('dayjs');    // ADDED: Import the Day.js library for date formatting.
const _ = require('lodash');  // ADDED: Import the Lodash library for working with objects.

class ProductOfTheDayService {

    // ...

    async sendCouponOfTheDay(instanceId, participantId) {
        const today = dayjs().format('DD/MM/YYYY'); // ADDED: Store the current date.
        const productOfTheDayData = await this.productOfTheDayDao.getBy(instanceId)
        const conversationResult = await this.wixInboxApis.getConversation(instanceId, participantId)
        const conversationId = conversationResult?.conversation?.id
        const coupon = await this.couponsDao.getBy(conversationId, today); // ADDED: Retrieve existing coupon for this conversation with the current date, if there is one.
        if(_.isEmpty(coupon)){ // ADDED: Send a coupon only if no existing coupon was retrieved for this conversation with the current date.   
            const query = {"filter":`{\"id\": {\"$eq\": \"${productOfTheDayData.productId}\"}}`}
            const [productData, couponData] = await Promise.all([
                this.storesApis.queryProducts(instanceId, query),
                this.couponsApis.createCoupon(instanceId, productOfTheDayData.productId, 
                    productOfTheDayData.discountPercentage)
            ])
            this.couponsDao.save(instanceId, conversationId, today, couponData); // ADDED: Save the coupon in the coupon database.
            const message = this.generateCouponMessage(conversationId, couponData, productData?.products, productOfTheDayData.discountPercentage)
            console.log('sending coupon...');
            return this.wixInboxApis.sendMessage(instanceId, message)
        } // ADDED
    }

    // ...


}

module.exports = {
    ProductOfTheDayService
}

```

With this adjustment, the app now checks whether a discount coupon was already created for the site visitor on the current date. It only sends a coupon if one wasn't already sent.

## What next?

Now that you've learned how to set up a pre-made, externally hosted Wix app, you can start thinking about building your own apps. Here are a few resources to get you started:

+ Browse the [Wix App Market](https://www.wix.com/app-market) to get inspiration from other apps.
+ Learn about [self-hosting for Wix apps](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/about-self-hosting-for-wix-apps.md).
+ Get to know our [REST API](https://dev.wix.com/docs/rest.md) and our [JavaScript SDK](https://dev.wix.com/docs/sdk.md).
+ Read our [guidelines](https://dev.wix.com/docs/build-apps/launch-your-app/app-distribution/app-market-guidelines.md) for submitting an app to the Wix App Market.