Get Started ​

Prerequisites ​

  • Node.js version 24 or higher.
  • Terminal for accessing eodash via its command line interface (CLI).
  • Your favorite IDE (e.g. VSCode), along with the official Vue extension.

eodash can be used on its own, or be installed into an existing project. In both cases, you can install it with:

bash
npm install @eodash/eodash

Create your eodash instance ​

  1. Create your repository from eodash's instance template. Check Github's guide on how to Create a repository from a template
  2. Install dependencies:
bash
npm install
  1. Start the development server.
bash
npm run dev # or npx eodash dev
  1. Edit the entry point src/main.js.

The quickest start is to build on the provided templates by eodash with getBaseConfig, which deep-merges your overrides onto a working base configuration:

js
import { getBaseConfig } from "@eodash/eodash/templates";

export default getBaseConfig({
  id: "my-instance",
  brand: { name: "My Dashboard" },
});

For full control, pass your own configuration using createEodash.

js
import { createEodash } from "@eodash/eodash";

export default createEodash({
  id: "my-instance",
  stacEndpoint:
    "https://eoxhub-workspaces.github.io/eoxhub-test-catalog/catalog/catalog.json",
  brand: { name: "My Dashboard" },
  template: {
    background: {
      id: Symbol(),
      type: "internal",
      widget: { name: "EodashMap" },
    },
    widgets: [
      {
        id: Symbol(),
        title: "Item Filter",
        type: "internal",
        layout: { x: 0, y: 0, w: 3, h: 12 },
        widget: { name: "EodashItemFilter" },
      },
    ],
  },
});

See Templates for the built-in templates and Configuration for all available options.

  1. Build eodash as a Single Page Application
bash
npm run build # or npx eodash build
  1. You can also build eodash as a Web Component library
bash
npm run build -- --lib # or npx eodash build --lib

Installing eodash Web Component in your project ​

  1. Install @eodash/eodash in your project
bash
npm install @eodash/eodash
  1. import @eodash/eodash/webcomponent and use the eo-dash tag.
html
<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <eo-dash></eo-dash> 
    <script type="module" src="index.js"></script>
  </body>
</html>
js
// index.js
import "@eodash/eodash/webcomponent"
...
  1. Create your runtime configuration.
js
// public/config.js
const store = window.eodashStore;

export default {
  id: "my runtime config",
  stacEndpoint: "https://eoxhub-workspaces.github.io/eoxhub-test-catalog/catalog/catalog.json",
  brand: {
    noLayout: false,
    name: "My Dashboard",
    font: {
      family: "Open Sans",
      link: "https://eox.at/fonts/opensans/opensans.css",
    },
    theme: {
      colors: {
        primary: "#004170",
        secondary: "#00417044",
        surface: "#f0f0f0f0",
      },
    },
    footerText: "lorem ipsum",
  },
  template: {
    loading: {
      id: Symbol(),
      type: "web-component",
      widget: {
        // https://uiball.com/ldrs/
        link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
        tagName: "l-mirage",
        properties: {
          class: "align-self-center justify-self-center",
          size: "120",
          speed: "2.5",
          color: "#004170",
        },
      },
    },
    background: {
      id: Symbol(),
      type: "internal",
      widget: {
        name: "EodashMap",
      },
    },
    widgets: [
      {
        id: Symbol(),
        type: "internal",
        title: "itemfilter",
        layout: { x: 0, y: 0, w: 3, h: 12 },
        widget: {
          name: "EodashItemFilter",
        },
      },
      {
        id: Symbol(),
        type: "internal",
        title: "datepicker",
        layout: { x: 5, y: 11, w: 2, h: 1 },
        widget: {
          name: "EodashDatePicker",
          properties: {
            inline: true,
          },
        },
      },
      {
        id: Symbol(),
        title: "Information",
        layout: { x: 9, y: 0, w: 3, h: 12 },
        widget: {
          link: "https://cdn.skypack.dev/@eox/stacinfo",
          properties: {
            for: store.states.currentUrl,
            allowHtml: "true",
            styleOverride:
              "#properties li > .value {font-weight: normal !important;}",
            header: "[]",
            subheader: "[]",
            properties: '["description"]',
            featured: "[]",
            footer: "[]",
          },
          tagName: "eox-stacinfo",
        },
        type: "web-component",
      },
    ],
  },
};
  1. Add the runtime config URL path to the config attribute
html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script type="module" src="@eodash/eodash/webcomponent"></script>
    <eo-dash config="/config.js"></eo-dash> 
  </body>
</html>

Including Stories and Pages ​

Checkout our eodash-pages-template that uses eodash web component with Vitepress and EOxStorytelling for including pages and stories.

Command line interface: ​

eodash includes a CLI for local development and building. Check out the CLI guide for more information.

json
{
  ...
  "scripts": {
    "dev": "eodash dev",
    "build": "eodash build",
    "preview": "eodash preview"
  },
  ...
}

Community: ​

Don't hesitate to ask any questions on our GitHub discussion forum or contribute to our project by creating a pull request.