> For the complete documentation index, see [llms.txt](https://cires.gitbook.io/zarr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cires.gitbook.io/zarr/web.md).

# Web

## VueJS

To create a web page capable of accessing the Zarr data in the cloud we will utilize VueJS. The Vue CLI will help bootstrap the creation of a new project.

* <https://cli.vuejs.org/guide/creating-a-project.html>

Using NPM, install the Vue CLI:

```javascript
npm install -g @vue/cli @vue/cli-service-global
```

And then to create a new project:

```javascript
vue create zarr-test
```

## ZarrJS

We use the Zarr.js typescript library to directly access our data living in the Amazon S3 Zarr store

* <https://github.com/gzuidhof/zarr.js/>
* <http://guido.io/zarr.js/#/getting-started/remote-data?id=remote-datasets-docsify-ignore>

The HTML code used to remotely access the Zarr store:

```javascript
<template>
    <div class="zarr-test">
    </div>
</template>

<script>
import { openArray, slice } from "zarr";

const BUCKET_URL = "https://cires.s3-us-west-2.amazonaws.com/version2"

export default {
    name: 'zarr-test',
    data() {
        return {
            zarr: null,
            dimension: null,
            zarrData: null,
        }
    },
    created () {
        const response = this.getZarr().then(data => {
            this.zarr = data;
        });
        console.log(response);
    },
    methods : {
        getZarr : async() => {
            return openArray({ store: BUCKET_URL, path: "/gu1002", mode: "r" });
        }
    },
    watch: {
        zarr: function (val) {
            this.dimension = val.meta.shape
            this.zarr.get([0, 1, slice(null)]).then(d => {
                this.zarrData = d
                console.log(d.data);
            });
            // const chunk = this.getZarrData();
            // console.log(chunk.shape)
        },
    }
}
</script>

<style></style>
```

## Running the Example

```bash
vue run serve
```