Skip to content
/ ui Public

User interface for HobbyFarm, a browser-based cloud systems learning tool

License

Notifications You must be signed in to change notification settings

hobbyfarm/ui

Repository files navigation

HobbyFarm User Interface

CI PKG Docker Image Version (latest semver)

This is the web user interface for HobbyFarm, an interactive learning system.

Configuration

A file placed at /config.json will allow for runtime configuration (e.g., custom logos, themes, etc.).

{
  "title": "Old MacDonald's Farm",
  "favicon": "/assets/default/favicon.png",
  "login": {
    "logo": "/assets/default/rancher-labs-stacked-color.svg",
    "background": "/assets/default/login_container_farm.svg"
  },
  "logo": "/assets/default/logo.svg"
}

To customize logos, mount them into the container at /usr/share/nginx/html/assets, and then reference the file names in config.json. Alternatively, you can reference files from an object store.

A file placed at /custom.css will allow for runtime style customization. To do so, mount a file called custom.css into the container at /usr/share/nginx/html/.

Contributing

Code Style

This project uses Prettier for code formatting and ESLint to enforce further code style guidelines. We recommend you install appropriate extensions for your preferred editor or IDE so that you can catch problems early.

While code style conformance is checked during CI, you can also run these checks beforehand using the commands npm run prettier:check and npm run lint. Run npm run prettier:format to format all source files in this repository using Prettier.

Local Development

To modify Angular configuration for your local environment, copy src/environments/environment.local.example.ts to src/environments/environment.local.ts and update the variables as needed. This is particulary useful for environment.server, to match your local gargantua server URL.

This web application needs gargantua (backend) to be working, look at gargantua for more information. The default authentification is admin/admin.

Execute from a terminal:

npm install
npm run start:local

The Angular server will start a watch loop and listen on localhost:4200.