Landscape UI

The modern web interface for Canonical's Landscape, built with React and TypeScript.

---

• About Landscape
• About this Repository
• Getting Started with Local Development
• Technology Stack
• Feedback & Support

---

About Landscape

Canonical Landscape is a comprehensive systems management tool designed to help you monitor, manage, and update your entire Ubuntu estate from a single interface. It provides administrators with a centralized platform for managing physical, virtual, and cloud-based Ubuntu servers.

Landscape is available as a SaaS solution at landscape.canonical.com and as a self-hosted application.

---

About this Repository

This repository contains the source code for the new, modern web interface for Landscape.

This new UI is currently under active development and is intended to eventually replace the legacy UI. For now, both user interfaces are available within the Landscape product, with the classic UI being the default. Our goal is to incrementally migrate all features to this new, improved dashboard.

---

Getting Started with Local Development

Follow these instructions to set up the project on your local machine for development and testing purposes.

Prerequisites

• Node.js (v22 or later recommended)
• pnpm package manager. If you don't have it, you can install it with npm install -g pnpm.

Setup Instructions

1. Clone the repository:

   git clone https://github.com/canonical/landscape-ui.git
   cd landscape-ui

2. Install dependencies:

   pnpm install

3. Configure your environment: Make a copy of the example environment file and rename it to .env.local.

   cp .env.local.example .env.local

   Now, edit .env.local to match your local Landscape setup, providing the necessary API endpoints and credentials.

Running the Development Server

Once the setup is complete, you can start the Vite development server:

pnpm dev

Open the URL provided in your terminal (usually http://localhost:5173) to view the application. The app will automatically reload if you change any of the source files.

Building for Production

To create a production-ready build of the application, run:

pnpm build

This command bundles the app into static files for production in the dist/ directory.

---

Technology Stack

This project is built with a modern, robust set of tools:

• Framework/Library: React
• Language: TypeScript
• Build Tool: Vite
• Package Manager: PNPM
• Data Fetching: React Query
• Unit & Integration Testing: Vitest
• End-to-End Testing: Playwright
• API Mocking: MSW (Mock Service Worker)
• Containerization: Docker

---

Feedback & Support

We welcome your feedback! The best way to share your thoughts, report issues, or request features is through one of the following channels:

• Create an issue directly on our GitHub Issues page.
• Report a bug on our Launchpad project.

---

With ♥ from Canonical