---
title: "Step 1: Create the app"
space: "Commera"
url: "https://docs.bwh.tech/commera/build-a-plugin/create-the-app"
updated: "2026-10-09"
---

In this step, you create the `commera_qikink` Frappe app and make it a Commera plugin. At the end, the plugin has a starter page in `/commera`.

Commits: [feat: Initialize App](https://github.com/Rl0007/commera_qikink/commit/ec9a6f3) and [set up the Commera dashboard in the app](https://github.com/Rl0007/commera_qikink/commit/a8c1888).

## What you'll build

- The `commera_qikink` Frappe app, installed on your site.
- Commera's dashboard build in the app, from `bench commera init`.
- A starter page with a **Qikink** row in the `/commera` sidebar.

## 1. Create a Frappe app

1. Go to your bench directory.
2. Run `bench new-app`:

    ```bash
    bench new-app commera_qikink
    ```

3. At **App Title**, type `Qikink`.
4. Answer the other prompts: description, publisher, email, license, the GitHub workflow and the branch name.

`bench new-app` makes the app, installs it in the bench environment and commits the first files.

:::caution[The title becomes your module]

The title that you type also becomes the app's module name. With the title `Qikink`, the module is `Qikink` and its folder is `commera_qikink/qikink/`. Your Qikink Settings DocType goes into this module in step 2.

The module folder is a Python package. Do not make a file with the same name next to it, such as `commera_qikink/qikink.py`. Python imports the package, and your file is never found.

:::

## 2. Add the Commera dashboard build

Go into the app's folder and run `bench commera init`. It makes the app whose folder you are in a Commera plugin:

```bash
cd apps/commera_qikink
bench commera init
```

:::caution[Run it inside the app's folder]
From the bench folder itself, bench reads `init` as its own `bench init` and stops with `No such command 'commera'`.
:::

The command prints each file that it writes, runs `yarn install` in the app, and ends with the next step: run `yarn dev` in `apps/commera/dashboard`, then open `/commera` on port 8080. A dev server that is already running picks up the new plugin by itself. It makes these changes:

| File | What it is |
| --- | --- |
| `commera_qikink/hooks.py` | Gets `required_apps = ["commera"]`, `commera_api_version = [1]` and `commera_plugin_title`, the name Commera shows for your plugin |
| `package.json` | The `build` and `dev` scripts, and the Commera plugin kit, `@commera/plugin-kit` |
| `.gitignore` | Gets `node_modules` and `commera_qikink/public/commera/`, the build output |
| `commera/vite.config.js` | The build configuration |
| `commera/pages/commera-qikink/index.vue` | A starter page |
| `commera_qikink/api.py` | `get_summary`, the method that the starter page reads |
| `commera/README.md` | The placement folders and the rules for each file |
| `commera/order/cards/`, `commera/product/actions/` and the other placement folders | Empty folders, one for each place on the dashboard |

The folder that holds an `index.vue` decides where it shows in `/commera`. The starter page shows how this works:

```vue
<script>
export const plugin = { label: 'Qikink', icon: 'sparkles' }
</script>
```

This first `<script>` block tells Commera the label and the icon of the sidebar row. Its values must be literals. The full rules are in [Dashboard entries](/commera/plugin-reference/dashboard-entries).

## 3. Install the app on your site

`bench commera init` does not install the app on a site. Install it, then build it:

```bash
bench --site your.site install-app commera_qikink
bench build --app commera_qikink
```

While you work on the Vue files, run `yarn dev` in `apps/commera/dashboard`, and open `/commera` on port 8080 with your site's host name, for example `http://your.site:8080/commera`. Each time that you save a file, the page changes without a reload. Your plugin has no `yarn dev` of its own.

:::note[Before you start the dev server]

Turn on developer mode on your site, and log in on the port 8080 address. A login on the bench web server does not carry over to a different host or port.

:::

:::tip[When the build fails]

`bench build --app` shows a Python traceback that ends in `CalledProcessError`, and it hides the reason. Run `yarn build` in `apps/commera_qikink` to see the message from the plugin kit, for example an icon name that Commera does not have.

:::

## Check it works

1. Open `/commera` and reload the page.
2. In the sidebar, find **Qikink** under **Plugins**.
3. Click **Qikink**. The starter page opens at `/commera/plugins/commera_qikink/commera-qikink`. It shows "Your awesome plugin", or the count of today's store orders.

<img src="/files/commera-qikink-starter-page-07a9de98.png" alt="The Qikink row in the Commera sidebar and the starter page" width="700">

You replace this starter page with your own page of Qikink orders in step 11. Until then, keep it as a check that your plugin builds.

## Next steps

- [Step 2: Add settings](/commera/build-a-plugin/add-settings)
- [Dashboard entries](/commera/plugin-reference/dashboard-entries): every placement folder and its rules
- [Compatibility](/commera/plugin-reference/compatibility): what `commera_api_version` means