Skip to content

Commit

Permalink
docs: Describe basename prop in UI documentation
Browse files Browse the repository at this point in the history
Signed-off-by: Harri Lehtola <peruukki@hotmail.com>
  • Loading branch information
peruukki committed Feb 5, 2025
1 parent 34d2bb0 commit 262cba8
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 4 deletions.
26 changes: 23 additions & 3 deletions docs/reference/alpha-web-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ yarn start

The advantage of importing Feast UI as a module is in the ease of customization. The `<FeastUI>` component exposes a `feastUIConfigs` prop thorough which you can customize the UI. Currently it supports a few parameters.

**Fetching the Project List**
##### Fetching the Project List

You can use `projectListPromise` to provide a promise that overrides where the Feast UI fetches the project list from.

Expand All @@ -118,11 +118,11 @@ You can use `projectListPromise` to provide a promise that overrides where the F
/>
```

**Custom Tabs**
##### Custom Tabs

You can add custom tabs for any of the core Feast objects through the `tabsRegistry`.

```
```jsx
const tabsRegistry = {
RegularFeatureViewCustomTabs: [
{
Expand All @@ -141,3 +141,23 @@ const tabsRegistry = {
```

Examples of custom tabs can be found in the `ui/custom-tabs` folder.

##### Custom Basename

If you want to serve the UI under a specific URL path instead of at the root,
you can use the `basename` prop, and it will be forwarded to React Router.

For example, to serve the UI at the `/feast-ui` path:

```jsx
<FeastUI
basename="/feast-ui"
feastUIConfigs={{
projectListPromise: fetch("/feast-ui/projects-list.json", {
headers: {
"Content-Type": "application/json",
},
}).then((res) => res.json())
}}
/>
```
22 changes: 21 additions & 1 deletion ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ You can use `projectListPromise` to provide a promise that overrides where the F

You can add custom tabs for any of the core Feast objects through the `tabsRegistry`.

```
```jsx
const tabsRegistry = {
RegularFeatureViewCustomTabs: [
{
Expand All @@ -117,6 +117,26 @@ const tabsRegistry = {

Examples of custom tabs can be found in the `/custom-tabs` folder.

##### Custom Basename

If you want to serve the UI under a specific URL path instead of at the root,
you can use the `basename` prop, and it will be forwarded to React Router.

For example, to serve the UI at the `/feast-ui` path:

```jsx
<FeastUI
basename="/feast-ui"
feastUIConfigs={{
projectListPromise: fetch("/feast-ui/projects-list.json", {
headers: {
"Content-Type": "application/json",
},
}).then((res) => res.json())
}}
/>
```

## On React and Create React App

This project was bootstrapped with Create React App, and uses its scripts to simplify UI development. You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
Expand Down

0 comments on commit 262cba8

Please sign in to comment.