Skip to content

Latest commit

 

History

History
118 lines (82 loc) · 4.51 KB

DEVELOPER.md

File metadata and controls

118 lines (82 loc) · 4.51 KB
Raw

Developer

This document describes how to set up your development environment to build and develop aerie-ui.

Prerequisite Knowledge

Before getting started with developing in this repository read/watch all of the following resources:

  1. Rich Harris - Rethinking Reactivity
  2. Svelte Tutorial
  3. Svelte Kit Documentation

Prerequisite Software

Before you can run aerie-ui you must install and configure the following products on your development machine:

  • Git and/or the GitHub app; GitHub's Guide to Installing Git is a good source of information.

  • Node.js LTS which is used to run a development web server, and generate distributable files. If you're on OSX you can use brew:

    brew install node

  • OpenJDK Temurin LTS which is used to build the Java-based Aerie services. If you're on OSX you can use brew:

    brew install --cask temurin

    Make sure you update your JAVA_HOME environment variable. For example with Zsh you can set your .zshrc to:

    export JAVA_HOME="/Library/Java/JavaVirtualMachines/temurin-17.jdk/Contents/Home"

  • Docker which is used to run the Aerie services.

  • Aerie which contains the main backend services. You can use the following commands to download, build, and run Aerie:

    git clone https://github.com/NASA-AMMOS/aerie.git
cd aerie
./gradlew assemble

# Notice we exclude the aerie_ui since we run it locally (i.e. not in Docker) for development.
docker-compose up --build --detach aerie_commanding aerie_gateway aerie_merlin aerie_scheduler aerie_merlin_worker_1 aerie_merlin_worker_2 hasura postgres

    To stop and clean the Aerie services do:

    cd aerie
docker-compose down
docker rmi aerie_commanding aerie_merlin aerie_scheduler aerie_aerie_merlin_worker_1 aerie_aerie_merlin_worker_2
docker volume prune --force
./gradlew clean

Code Editor

The recommended editor for developing aerie-ui is VS Code with the following settings and extensions. You can easily use another editor of your choice as long as you can replicate the code formatting settings.

Settings.json

{
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "typescript", "svelte"],
  "[svelte][typescript]": {
    "editor.codeActionsOnSave": ["source.fixAll", "source.organizeImports", "source.sortImports"],
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Extensions

  1. Svelte for VS Code
  2. Prettier - Code formatter
  3. ESLint
  4. EditorConfig for VS Code
  5. GraphQL
  6. Path Intellisense
  7. Code Spell Checker

Getting the Sources

Clone the aerie-ui repository:

git clone https://github.com/NASA-AMMOS/aerie-ui.git
cd aerie-ui

Installing NPM Modules

Install the JavaScript modules needed to build aerie-ui:

npm install

Start Development Server

Run npm run dev for a dev server. Navigate to http://localhost:3000/. The app will automatically reload if you change any of the source files.

Building For Production

Run npm run build to build a production version of the project. The build artifacts will be stored in the build/ directory.