# Loading reports as static assets

Learn how to load a report to ActiveReportsJS Report Viewer component using static assets

## Content

A static asset is a resource that a web-application handles without applying transformations such as minification, bundling together with other resources, or cache-busting. The application's code can refer to such a resource using its path relative to the compiled application's root folder. Images and fonts are typical static assets.
We recommend using static assets for report templates if

* report templates do not change often
* reports do not require modifications before loading
* report templates do not require [runtime data binding](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding#runtime-data-binding)
* exposing report templates for direct download is acceptable

### Loading reports as static assets in an Angular application

The default [assets configuration](https://angular.io/guide/workspace-config#asset-config) of an Angular application copies the `src/assets` folder to the output as-is. Hence, you can copy report templates to that folder and then use the relative report file path for the argument of the `open` method of the [Angular Report Viewer component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component), for example:

```js
import { Component, ViewChild } from '@angular/core';
import { ViewerComponent } from '@mescius/activereportsjs-angular';

@Component({
  selector: "app-root",
  template:
    '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </gc-activereports-viewer></div> ',
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open('assets/report.rdlx-json');
  }
}
```

Check the[ Get Started with ActiveReportsJS Report Viewer Angular Component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component) page for the step-by-step guideline for this approach.

### Loading reports as static assets in a React application

[Create React App](https://create-react-app.dev/) allows developers to keep [static assets](https://create-react-app.dev/docs/using-the-public-folder/) in the `public` folder. Hence, you can copy report templates to that folder and then use the relative report file path for the `report` property of the [React Report Viewer component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component), for example:

```javascript
import React from "react";
import "./App.css";
import { Viewer } from "@mescius/activereportsjs-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;
```

Check the [Get Started with ActiveReportsJS Report Viewer React Component](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/QuickStart-React) page for the step-by-step guideline for this approach.

Alternatively you can pass the URL of the report template in the [viewer.open](https://developer.mescius.com/activereportsjs/api/classes/ReportViewer.Viewer#open) method:

```js
function App() {
  const viewerRef = React.useRef<Viewer>(null);
  React.useEffect(() => {
    const viewerInstance = viewerRef.current.Viewer;
    viewerInstance.open('report.rdlx-json');
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
};
```

Check the [Loading Report Live Demo](/activereportsjs/demos/features/viewer-report-loading/react) for the full example of using this approach.

### Loading reports as static assets in a Vue application

[Vue CLI](https://cli.vuejs.org/) allows developers to keep [static assets](https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder) in the `public` folder. Hence, you can copy report templates to that folder and then use the relative report file path for the `report` property of the [Vue Report Viewer component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Vue-Component), for example:

```html
<template>
  <div id="viewer-host">
    <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@mescius/activereportsjs-vue";

export default {
  name: "App",
  components: {
    JSViewer: Viewer,
  },
};
</script>
```

Check the [Get Started with ActiveReportsJS Report Viewer Vue Component](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/QuickStart-Vue) page for the step-by-step guideline for this approach.

Alternatively you can pass the URL of the report template in the [viewer.open](https://developer.mescius.com/activereportsjs/api/classes/ReportViewer.Viewer#open) method:

```html
<template>
  <div id="viewer-host">
    <JSViewer ref="reportViewer"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@mescius/activereportsjs-vue";


export default {
  name: "App",
  components: {
    JSViewer: Viewer
  },
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    viewer.open('report.rdlx-json');
  }
};
```

Check the [Loading Report Live Demo](/activereportsjs/demos/features/viewer-report-loading/vue) for the full example of using this approach.

### Loading reports as static assets in a JavaScript application

In such an application, you can copy report templates to the application's distribution folder and then use the relative report file path for the argument of the `open` method of the [JavaScript Report Viewer component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/VanillaJS), for example:

```html
<script>
  var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
  viewer.open("report.rdlx-json");
</script>
```

Check the [Get Started with ActiveReportsJS Report Viewer JavaScript Component](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/QuickStart-Vanilla) page for the step-by-step guideline for this approach.