Skip to content

Commit

Permalink
simplify getting started setup
Browse files Browse the repository at this point in the history
Signed-off-by: Teo Koon Peng <[email protected]>
  • Loading branch information
koonpeng committed Sep 5, 2024
1 parent 0f4897d commit 549b42e
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 17 deletions.
31 changes: 17 additions & 14 deletions packages/rmf-dashboard-framework/docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ Welcome to RMF Dashboard Framework! This tutorial will guide you through the ini
### Setup

Prerequisites:
* pnpm
* Latest Nodejs LTS

- pnpm
- Latest Nodejs LTS

Follow https://pnpm.io/installation to install pnpm, you can then install nodejs using pnpm

Expand All @@ -16,32 +17,29 @@ pnpm env use --global lts

Clone this repo and install deps

<!-- TODO(koonpeng): install from npmjs after package is published. -->

```bash
pnpm create vite -t react-ts basic-dashboard
cd basic-dashboard
# TODO(koonpeng): install from npmjs after package is published.
git clone --depth 1 https://github.com/open-rmf/rmf-web
```

<!-- TODO(koonpeng): not needed after package is published -->
Add modify the following to resolve `rmf-dashboard-framework` as if it is installed from npmjs.

pnpm-workspace.yaml (create if not exist)
```yaml
packages:
- "."
- "rmf-web/**/*"
```
Modify the following to resolve `rmf-dashboard-framework` as if it is installed from npmjs.

package.json

```
"dependencies": {
...
"rmf-dashboard-framework": "workspace:*"
"rmf-dashboard-framework": "rmf-web/packages/rmf-dashboard-framework"
}
```

tsconfig.app.json

```
"paths": {
"rmf-dashboard-framework/*": ["./node_modules/rmf-dashboard-framework/src/*"]
Expand All @@ -51,9 +49,13 @@ tsconfig.app.json
Finally install and build the deps

```bash
# TODO(koonpeng): -w flag not needed after rmf-dashboard-framework is published
pnpm install --filter basic-dashboard...
pnpm --filter basic-dashboard^... build
# install and build rmf-dashboard-framework
cd rmf-web
pnpm install --filter=rmf-dashboard-framework...
pnpm --filter=rmf-dashboard-framework^... build
# install basic-dashboard deps
cd ..
pnpm install
```

### Creating a Basic Dashboard
Expand All @@ -69,6 +71,7 @@ pnpm add -w @fontsource/roboto
Before starting the dev server, we need a rmf api server backend for the frontend to connect to. If you are targeting an existing deployment, change the `apiServerUrl` prop to connect to the correct url. If you do not have an existing server, you can start a local server with docker.

<!-- FIXME(koonpeng): ROS_DOMAIN_ID and RMW_IMPLEMENTATION will be confusing to people not familiar with ROS. Also we can't really set the RMW_IMPLEMENTATION if the image does not have it installed. -->

```bash
docker run \
--network host -it --rm \
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ import { DashboardThemes } from './theme';

const DefaultAlertDuration = 2000;

export interface DashboardHome {}

export interface DashboardTab {
name: string;
route: string;
Expand Down
2 changes: 1 addition & 1 deletion packages/rmf-dashboard-framework/src/micro-apps/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Suspense } from 'react';
import { useAppController } from 'rmf-dashboard-framework/hooks/use-app-controller';

import { Window, WindowProps } from '../components/window';
import { useAppController } from '../hooks/use-app-controller';
import { useSettings } from '../hooks/use-settings';
import { Settings } from '../services/settings';

Expand Down

0 comments on commit 549b42e

Please sign in to comment.