# Running in dev environment (mock data)

Most of the time, you'll want to develop your app in isolation. The apps SDK comes with an environment to make this really easy to do. All you need to do is start the local dev server.

```
> yarn start
Starting the development server...
...
  Local:            http://localhost:31080/dev.html
...
```

Copy and paste the URL to `dev.html` in your browser and that's it.

![](https://3026864744-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMb2ucgP2GhTuRDyzlH%2F-LMlUrmhzwkGy9LOWDnc%2F-LMlV6XQ4__QjNV7dp5G%2Fimage.png?alt=media\&token=9b17b583-f2e3-463c-9f65-9c7b03a0e7a7)

## Mock Data

The dev environment uses mocked data for API calls such as getting the current user, getting a ticket, or doing CORS requests.

The create-react-app setup script installs a default set of data to:`test/integration/helpdeskScenarios/default.js`

The default scenario comes with a lot of useful default data and most apps might not even need to modify the data at all. But if your app requires specific information (i.e. maybe your app requires a helpdesk with specific custom fields), then you can add your own scenarios.

### Scenarios

A *scenario* is a collection of IDs that represent API calls. These IDs are mapped to an object literal, or a function that is expected to return an object -- we call these providers.

Every provider is expected to return a certain object in a certain shape. You should refer to the `default.js` scenario to see what provider functions get passed and what they need to return.

Let's create a new scenario file:

{% code title="to:test/integration/helpdeskScenarios/myScenario.js" %}

```javascript
import { addScenario } from '@deskpro/apps-sdk/lib/Testing';

addScenario('myScenario', {
  'context.me_get': {
    body: {
      id: 1,
      email: 'agent@example.com',
      name: 'John Smith',
    },
    status: 'success',
  },

  'context.property.get': function({ path, type }) {
    const fullPath = path.join('.');
    const ticket = {
      id: 1,
      subject: "Foo",
      person: {
        id: 55,
        name: "Jane"
      }
    }
    
    let body;
    if (fullPath === 'ticket') {
      body = ticket;
    } else if (fullPath === 'ticket.person') {
      body = ticket.person;
    }

    return body ? {
      body: body,
      status: 'success',
    } : {
      body: null,
      status: 'error'
    }
  }
}
```

{% endcode %}

* On line 3 we register a new scenario.
* On line 4 we map the API request for `dpapp.context.getMe()` to be an object literal.
* On line 13 we map the API request for `dpapp.context.get()` which might be something like `dpapp.context.get('ticket')` or `dpapp.context.get('ticket.person')`

You also need to import your scenario in the `helpdeskStub.js` file so it gets loaded:

{% code title="test/integration/helpdeskStub.js" %}

```javascript
import './helpdeskScenarios/default';
import './helpdeskScenarios/myScenario';
```

{% endcode %}

### Running your scenario

By default, when you run `dev.html` in your browser, it will run with the *default* scenario. To run with a custom scenario, specify the scenario name in the query string:

```
http://localhost:31080/dev.html?scenario=myScenario
```