Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions Documentation/GettingStarted/LocalDevelopment/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# Local Development

Use this tutorial to run Lens locally and connect it to your Arc backend.

## Prerequisites

- Node.js 20 or later
- npm
- Chrome or another Chromium-based browser
- A running Arc application on your machine

## 1. Install dependencies

From the repository root, install dependencies for the extension:

```bash
cd Source
npm ci
```

You should see `added ... packages` with no install errors.

## 2. Build the extension

Build the extension bundle:

```bash
npm run build
```

This generates `Source/dist/`, including `manifest.json`.

## 3. Load Lens in your browser

1. Open `chrome://extensions`.
2. Enable **Developer mode**.
3. Select **Load unpacked**.
4. Choose the `Source/dist` folder from this repository.

The **Lens - Cratis Developer Tools** extension should now appear in your extension list.

## 4. Set up Arc connection

1. Open the extension options page from the extension details.
2. Set **Arc Base URL** to your local Arc host, for example `http://localhost:5000`.
3. Keep the default **Tenant Header Name** unless your app expects a different header.
4. Select **Save Settings**.

Lens can now fetch command and query introspection metadata from your Arc application.

## 5. Use watch mode while developing

Run this in `Source/` during active development:

```bash
npm run dev
```

Vite rebuilds the extension when you change source files. Reload the extension in `chrome://extensions` after each rebuild.

3 changes: 3 additions & 0 deletions Documentation/GettingStarted/LocalDevelopment/toc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
- name: Local Development
href: index.md

6 changes: 6 additions & 0 deletions Documentation/GettingStarted/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Getting Started

Start here to run Lens locally and connect it to your Arc application.

- [Local Development](LocalDevelopment/index.md)

6 changes: 6 additions & 0 deletions Documentation/GettingStarted/toc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
- name: Getting Started
href: index.md
items:
- name: Local Development
href: LocalDevelopment/toc.yml

6 changes: 6 additions & 0 deletions Documentation/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Lens Documentation

This documentation helps you set up and use Lens during development.

- [Getting Started](GettingStarted/index.md)

6 changes: 6 additions & 0 deletions Documentation/toc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
- name: Lens Documentation
href: index.md
items:
- name: Getting Started
href: GettingStarted/toc.yml