Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update working-on-ui-and-apps.md #43

Merged
merged 2 commits into from
Jan 9, 2025
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
15 changes: 12 additions & 3 deletions docs/developer-guide/working-on-ui-and-apps.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,18 @@ sidebar_position: 5
Front end applications are [webcomponent](https://www.webcomponents.org/) based using the [lit](https://lit.dev/) library and [Material Design](https://material.io/components?platform=web) for styling. We use a combination of Polymer LIT, Material Design and our own OpenRemote elements. The UI components are [published on NPM](https://www.npmjs.com/org/openremote). The applications themselves are composed of our re-usable modular UI components which can be found in the code base in the [ui/component](https://github.com/openremote/openremote/tree/master/ui/component) folder, these are also published to [NPM](https://www.npmjs.com/org/openremote).

## Working on an app (e.g. Manager UI)
To work on an app for example the `Manager UI` then `cd` into the app directory e.g. `ui/app/manager` and run the following `npm` script:

- `npm run serve` - Compiles the typescript model from java code and then starts webpack dev server and serves the web app which can then be accessed at `http://localhost:9000/manager/` (**NOTE: trailing `/` is required**)
To work on an app for example the `Manager UI` :
- From the main directory, start the required containers, use dev-ui.yml for example:
```shell
docker-compose -f profile/dev-ui.yml up -d
```
By default, this makes the manager container serve the apps present in the latest docker image on port 8080 e.g. `http://localhost:8080/manager/` . While these apps are not necessary for this case, the included manager container webservice is.

- `cd` into the app directory e.g. `ui/app/manager` and run the following `npm` script:
```shell
npm run serve
```
Compiles the typescript model from java code and then starts webpack dev server and serves the web app which can then be accessed at `http://localhost:9000/manager/` (**NOTE: trailing `/` is required**)

### Webpack dev server environment variables
The following environment variables can be set when running `npm run serve` using the syntax `npm run serve -- --env ENV_NAME=ENV_VALUE`:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,18 @@ sidebar_position: 5
Front end applications are [webcomponent](https://www.webcomponents.org/) based using the [lit](https://lit.dev/) library and [Material Design](https://material.io/components?platform=web) for styling. We use a combination of Polymer LIT, Material Design and our own OpenRemote elements. The UI components are [published on NPM](https://www.npmjs.com/org/openremote). The applications themselves are composed of our re-usable modular UI components which can be found in the code base in the [ui/component](https://github.com/openremote/openremote/tree/master/ui/component) folder, these are also published to [NPM](https://www.npmjs.com/org/openremote).

## Working on an app (e.g. Manager UI)
To work on an app for example the `Manager UI` then `cd` into the app directory e.g. `ui/app/manager` and run the following `npm` script:

- `npm run serve` - Compiles the typescript model from java code and then starts webpack dev server and serves the web app which can then be accessed at `http://localhost:9000/manager/` (**NOTE: trailing `/` is required**)
To work on an app for example the `Manager UI` :
- From the main directory, start the required containers, use dev-ui.yml for example:
```shell
docker-compose -f profile/dev-ui.yml up -d
```
By default, this makes the manager container serve the apps present in the latest docker image on port 8080 e.g. `http://localhost:8080/manager/` . While these apps are not necessary for this case, the included manager container webservice is.

- `cd` into the app directory e.g. `ui/app/manager` and run the following `npm` script:
```shell
npm run serve
```
Compiles the typescript model from java code and then starts webpack dev server and serves the web app which can then be accessed at `http://localhost:9000/manager/` (**NOTE: trailing `/` is required**)

### Webpack dev server environment variables
The following environment variables can be set when running `npm run serve` using the syntax `npm run serve -- --env ENV_NAME=ENV_VALUE`:
Expand Down