> For the complete documentation index, see [llms.txt](https://deskpro.gitbook.io/apps-developer-guide-old/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deskpro.gitbook.io/apps-developer-guide-old/create-your-first-app-in-4-easy-steps.md).
# Create your first app in 4 easy steps
This tutorial will show you how easy it is to build, package and deploy a Deskpro App. The app we will create increments a notifications counter in the application's badge when the user clicks a button.
You will need access to a Deskpro instance, either a Cloud or an On-Promise version. If you don't have one available, you can sign-up for a **free trial** on [deskpro.com](https://www.deskpro.com/start).
You will also need to have `node.js` and `npm` installed on your system. In case you don't, go over to [docs.npmjs.com](https://docs.npmjs.com/getting-started/installing-node) and follow their tutorial before continuing. You also need `git` (go to the [official git docs](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) for installation instructions) to clone the starter application repository.
* **Clone the apps-boilerplate repository**
We maintain a starter application skeleton which we encourage everybody to use when starting a new app:
```
git clone https://github.com/deskpro/apps-boilerplate my-first-deskpro-app
cd my-first-deskpro-app
npm install
```
* **Add the button**
Open the file `src/main/javascript/App.jsx` and replace its contents with the following lines:
```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from '@deskpro/react-components'
/**
* My first application
*/
export default class App extends React.Component {
static propTypes = {
/**
* Instance of the Deskpro App Sdk Client
*/
dpapp: PropTypes.object
};
incrementNotificationsCounter = () =>
{
const {
/**
* @type {UIFacade}
* @see https://deskpro.github.io/apps-sdk-core/reference/UIFacade.html
*/
ui
} = this.props.dpapp;
ui.badgeCount++;
ui.showBadgeCount();
};
render() {
const containerStyle = {display: "flex", alignItems: "center", justifyContent: "center", margin: "20%"};
return (
);
}
}
```
* **Build the application**
This step will build a distribution file located at `dist/app.zip` inside the folder where you originally cloned the starter application. This is a zip file which contains the compiled sources of your application.
```
npm run package
```
* **Install the application**
Log-in to the Agent interface of your Deskpro installation if you are not logged in already. You can access the Agent interface at `http:///agent`.
Navigate to the `Apps` section and choose the `Upload App` option. Choose the `dist/app.zip` file from inside the folder where you originally cloned the starter application, upload it then click the green Install button:
### That was it!
Now head over to the `Tickets` section and open a ticket to see your application. If you followed this tutorial each time you click the button the application badge will increment the notification counter:
