xcube Viewer

A simple viewer component for xcube.

Run it

Note, there is no need to install xcube Viewer on its own. It is bundled with the xcube Python package since version 1.0. Just run

xcube serve -c server-config.yaml

and access the viewer via the server endpoint /viewer, hence http://127.0.0.1/viewer, when run without URL prefix.

For development or for independent deployment, please read ahead to

1. install xcube and run server in demo mode;
2. install and start xcube-viewer with demo configuration.

Install xcube in development mode

xcube one-time install:

$ git clone https://github.com/dcs4cop/xcube.git
$ cd xcube
$ conda env create
$ conda activate xcube
$ pip install -ve .  

xcube update and run server:

$ cd xcube
$ git pull
$ conda activate xcube  
$ xcube serve --verbose --traceperf --config xcube/examples/serve/demo/config.yml  

If errors occur, you may need to update the environment:

$ conda env update

Install and run xcube-viewer in development mode

Checkout xcube-viewer sources:

$ git clone https://github.com/dcs4cop/xcube-viewer.git
$ cd xcube-viewer
$ npm install
$ npm run dev

Update, install, and run:

$ cd xcube-viewer
$ git pull
$ npm install
$ npm run dev

Build xcube-viewer for deployment with default branding:

$ cd xcube-viewer
$ git pull
$ npm run build

Find outputs in ./dist.

Update xcube by a new xcube-viewer build

To bundle the xcube package with a new xcube-viewer version first build xcube-viewer as described above. Then, in the xcube repo checked out from GitHub replace the contents the xcube/webapi/viewer/data directory with the contents of the ./dist directory. Note, it is important to replace the contents, do not just copy. Finally, add new files to git and commit all changes.

More

• User Guide
• Planned Enhancements
• Known Issues

---

This project was bootstrapped with React + TypeScript + Vite.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list