cate-desktop provides a desktop GUI for Cate, the ESA CCI Toolbox.
Building from Sources
Setting up Cate Core
Cate Desktop requires the Cate Python environment to be installed on your system. Follow the instruction in Cate's README first. The short version is that you'll first need to install a Miniconda 3.x, then:
$ git clone https://github.com/CCI-Tools/cate.git
If you've already cloned the repo make it up to date by
$ git pull
Then, with am Anaconda/Miniconda 3.x installed create a new Python environment for Cate and install the sources
$ cd cate $ conda env create $ source activate cate-env $ python setup.py develop
With a successfully installed Cate sources make sure you can start Cate's WebAPI service, which will be later used by Cate Desktop:
$ cate-webapi-start --port 9090
You can stop it by hitting
CTRL+C or from another shell:
$ cate-webapi-stop --port 9090
Setting up Cate Desktop
Check out Cate Desktop from GitHub:
$ git clone https://github.com/CCI-Tools/cate-desktop.git $ cd cate-desktop
If you've already cloned the repo, you make it up-to-date by pulling in the latest changes:
$ git pull
The only development tool initially required to build cate-desktop is Node.js. We use the
long-term support (LTS) version of Node.
After installing Node.js, we use its package manager
npm to install all other package dependencies.
This step is also required if a file named
package.json was updated during a
git pull command (see above).
$ npm install
cate-desktop is programmed in TypeScript. Therefore all TypeScript
command (see above).
$ npm run compile
To finally run the Cate Desktop application, make sure Cate WebAPI service is up and running (see above) and type
$ npm start
Cate Desktop Development
The following commands are of interest for developers.
This is how you can execute all unit-level tests (optional):
$ npm test
and this is how to perform end-to-end tests (optional):
$ npm run test:e2e
To build the installer executables for the current platform:
$ npm run dist
And to build binary packages:
$ npm run pack
To clean compilation results:
$ npm run clean
To get rid of all outputs since cloning the repo:
$ npm run clean:all
Frameworks and Libraries in use
The following frameworks and libraries are currently used in Cate's production code:
- Blueprint, a React UI toolkit.
- react-ace Code editor component
- reselect, Selector library for Redux.
- deep-equal, Node's
assert.deepEqual()algorithm as a standalone module.
- electron-devtools-installer is and easy way to install Chrome's DevTool extensions into Electron.
- Oboe.js for loading JSON using streaming.
- react-linkify to parse links (urls, emails, etc.) in text into clickable links.
Development Tools and Libraries in use
- typescript provides Microsoft's TypeScript compiler
- electron-builder is used to create distribution packages and installers.
- ts-node a TypeScript execution environment for Node.js and Electron.
(BDD) API to
- spectron for end-to-end testing of the GUI applications.
- react-addons-test-utils makes it easy to test React components in any testing framework.
- jsdom-global is used to inject
windowand other DOM API into our Node.js environment so we can run tests ("react-ace").
- rimraf is Node's version of Unix
This is how the directory structure will look like after cloning the repo:
cate-desktop uses a two-package.json project structure.
- Development dependencies are in
- Application dependencies are in
npm install performs a post-installation step in which the tool
install-app-deps (comes with
application dependencies of
cate-desktop/app/package.json. After this, Node's
node_modules directories are created
cate-desktop/ ├── node_modules/ └── app/ └── node_modules/
After compilation, i.e.
npm run compile, the
cate-desktop/ └── app/ ├── main/ # Code running in Electron's main process (with Node API access) │ └── **/*.js # JS files compiled from *.ts files in src/main └── renderer/ # Code running in Electron's renderer process (w/o Node API access) └── **/*.js # JS files compiled from *.ts and *.tsx files in src/renderer
After distribution (installer) building, i.e.
npm run dist:
cate-desktop/ └── dist/ # Distributable application binaries └── *.*
The setup of this project was inspired by
- electron-boilerplate for the Electron part and by
- Microsoft/TypeScriptSamples/jsx for the TypeScript + React part.
The project onshape-desktop-shell uses a similar setup.
This project currently doesn't use any other build tools apart from
tsc, the TypeScript compiler.
We'll one day want to have hot loading into Electron and then use a tool such as
webpack. The TypeScript article
React & Webpack describes how to use
TypeScript with webpack and React.
.travis.ymlwith example in onshape-desktop-shell.
appveyor.ymlalso with example in onshape-desktop-shell.
yarn.lockas well (what does it?) with example in onshape-desktop-shell.
- Provide auto-updater support
- Have a look at other Electron development tools: