# Using gists and GistRun

*Troubleshooting*

## 7.2 Using gists and GistRun

### to experiment with Aurelia components and report problems

By adding support to use the [GistRun tool](https://aurelia-ui-toolkits-1.gitbook.io/kendoui-bridge-docs/troubleshooting/using-gists-and-gistrun), this catalog application provide the ability to run each example of each Aurelia Kendui bridge component - as illustrated on this following image \ <br>

![](https://cloud.githubusercontent.com/assets/2712405/15254741/5b591f98-1906-11e6-890e-7d8c1e41a0b2.png)

\
\
&#x20;Image 1

Click on the `RUN` button will result with this same example "Area charts: multi axis" running in a new window, completely isolated from the Catalog application:

![](https://cloud.githubusercontent.com/assets/2712405/14415194/836515c4-ff6a-11e5-8f51-17d4392c7136.png)

\
\
&#x20;Image 2

### 2.1 Experimentation

It should be pretty obvious that running any of the samples from this Components catalog applications **as a gist** you get a very dramatic increase of your ability to check this sample's behavior. You can change any part of JavaScript code (in a meaningful way preferrably) in the view model, or any attributes in the view -- and get nearly instant (1 - 2 seconds) response from the GistRun.

### 2.2 Report a problem to Aurelia-UI-Toolkits team

**2.2.1 Summary** \
&#x20;In order to ensure complete context of your problem and get the fastest possible response, please create an issue [**here**](https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge/issues) and then [**create a gist**](https://help.github.com/articles/creating-gists/) which will become a part of your problem report.

It is important to point out that a gist should contain the smallest possible "extract" of your application - not the whole app, by any means. It was always a good practice to report a problem by making sure to reduce your app to the smallest amount of code that still demonstrates the issue you need help with - so while the concept of a gist makes such reduction a lot easier to do, it still requires some effort.

**2.2.2 Hot to create a gist for Aurelia application**

Rather than starting with an empty gist, create a fork of [**this gist**](https://gist.github.com/adriatic/c6a05892747c35d643ac4833af411117) which has built-in files that comprise Aurelia run time components:

**index.html**

```markup
<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>
```

\
\
&#x20;and \
\
&#x20;**main.js**

```javascript
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}
```

With this in mind, the task of creating a gist that describes your problem, consist of only entering only a few of your application files. However, instead of adding these files using the [**gist editor**](https://help.github.com/articles/creating-gists/#editing-gists), we will use the [**GistRun**](https://gist.run) (Aurelia) application to do that task - simply because it is a lot easier to add more code and you can immediately verify that the code you added is correct. \ <br>

**2.2.3 Invoking GistRun**

The syntax is simply

`https://gist.run/?id=c14c7cd4ab59c8d12d7f8ff6b6cc2947`

where the string query parameter `c14c7cd4ab59c8d12d7f8ff6b6cc2947`) is the **gist id** you got in the process of forking the KendoUI bridge default gist in section 2.2.1 above. You can learn more about GistRun app [**here**](https://github.com/gist-run/gist-run#gistrun). \ <br>

Here is the screen shot of the gist we are describing in this article, rendered by GistRun

![](https://cloud.githubusercontent.com/assets/2712405/15269577/1251b7d0-19d1-11e6-9661-5c7ab97f69d1.png)

\
\
&#x20;Image 3

In order to create a "basic application code" for your gist, it is often best tp use the existing gists from the catalog application as start. For example, if you have a problem with Area chart, click on the RUN button on page `http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/area-charts/multi-axis` (as shown on Image 1 above) and note the View (app.html) and View model (app.js) which you can used as the start for your new gist.

![](https://cloud.githubusercontent.com/assets/2712405/15269548/3def70b8-19d0-11e6-89be-1ef2acaa783c.png)

\
\
&#x20;Image 4


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aurelia-ui-toolkits-1.gitbook.io/kendoui-bridge-docs/troubleshooting/using-gists-and-gistrun.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
