Skip to content

Commit

Permalink
Update frontend readme for openc3-js-common and openc3-vue-common
Browse files Browse the repository at this point in the history
  • Loading branch information
ryan-pratt committed Dec 23, 2024
1 parent c90be26 commit 6569f4c
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 18 deletions.
4 changes: 2 additions & 2 deletions docs.openc3.com/docs/configuration/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -785,11 +785,11 @@ The relative url used to access the tool. Defaults to "/tools/ToolFolderName".
### INLINE_URL
**Internal url to load a tool**

The url of the javascript file used to load the tool into single-SPA. Defaults to "js/app.js".
The url of the javascript file used to load the tool into single-SPA. Defaults to "main.js".

| Parameter | Description | Required |
|-----------|-------------|----------|
| Url | The inline url. If not given defaults to js/app.js. Generally should not be given unless using a non-standard filename. | True |
| Url | The inline url. If not given defaults to main.js. Generally should not be given unless using a non-standard filename. | True |

### WINDOW
**How to display the tool when navigated to**
Expand Down
2 changes: 1 addition & 1 deletion docs.openc3.com/docs/development/developing.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ localStorage.setItem("devtools", true);
Click the Default button next to the application (@openc3/tool-scriptrunner)<br/>
Paste in the development path which is dependent on the port returned by the local yarn serve and the tool name (scriptrunner)

http://localhost:2914/tools/scriptrunner/js/app.js
http://localhost:2914/tools/scriptrunner/main.js

1. Refresh the page and you should see your local copy of the application (Script Runner in this example). If you dynamically add code (like `console.log`) the yarn window should re-compile and the browser should refresh displaying your new code. It is highly recommended to get familiar with your browser's [development tools](https://developer.chrome.com/docs/devtools/overview/) if you plan to do frontend development.

Expand Down
2 changes: 1 addition & 1 deletion docs.openc3.com/docs/getting-started/generators.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,6 @@ It also updates the plugin.txt file to add the new tool. The icon can be changed

```ruby
TOOL datavis "DataVis"
INLINE_URL js/app.js
INLINE_URL main.js
ICON mdi-file-cad-box
```
38 changes: 26 additions & 12 deletions openc3-cosmos-init/plugins/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,23 +29,37 @@ NOTE: All commands are assumed to be executed from this (openc3-cosmos-init) dir
Click the Default button next to the application (@openc3/tool-scriptrunner)<br>
Paste in the development path which is dependent on the port returned by the local yarn serve and the tool name (scriptrunner)

http://localhost:2914/tools/scriptrunner/js/app.js
http://localhost:2914/tools/scriptrunner/main.js

# Developing OpenC3 Base Application
## Developing OpenC3 Base Application

1. Run a development version of traefik
As of COSMOS 6, developing the base application (openc3-tool-base) is the same as developing other frontend
applications, described in the steps above.

openc3-cosmos-init> cd ../openc3-traefik
traefik> docker ps
# Look for the container with name including traefik
traefik> docker stop cosmos-openc3-traefik-1
traefik> docker build --build-arg TRAEFIK_CONFIG=traefik-dev-base.yaml -t openc3-traefik-dev-base .
traefik> docker run --network=openc3-cosmos-network -p 2900:2900 -it --rm openc3-traefik-dev-base
## Developing OpenC3 Common Packages

There are two packages that contain shared code between OpenC3 frontend applications: openc3-js-common and
openc3-vue-common. openc3-js-common contains framework-agnostic JavaScript code such as the API and Action Cable
adapters, and openc3-vue-common contains Vue components, plugins, and mixins.

In previous versions of COSMOS, this code was in a package called openc3-tool-common, and you would
test changes by serving a tool such as CmdTlmServer. As of COSMOS 6, you must also serve the common packages as you
would any other frontend application, alongside the tool.

To see changes while developing one of these common packages, you must serve it alongside a tool that consumes the changes:

1. Start serving the tool, as described in the steps above

1. Open a second terminal and repeat that process for openc3-js-common or openc3-vue-common

a. You may omit the final single SPA override step, as it will have no affect for the common package

1. If you are making style/layout changes, you must also open a third terminal and repeat the process for openc3-tool-base

1. Serve a local base application (App, Auth, AppBar, AppFooter, etc)
a. **Do** complete the single SPA override step for openc3-tool-common

openc3-cosmos-init> cd plugins/openc3-tool-base
openc3-tool-base> yarn serve
We are currently working on externalizing the common packages, which will greatly simplify this process (you'd only
need to serve and override openc3-js-common or openc3-vue-common). This ability will come in a later release of COSMOS.

# API development

Expand Down
4 changes: 2 additions & 2 deletions openc3/data/config/tool.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ TOOL:
values: .+
INLINE_URL:
summary: Internal url to load a tool
description: The url of the javascript file used to load the tool into single-SPA. Defaults to "js/app.js".
description: The url of the javascript file used to load the tool into single-SPA. Defaults to "main.js".
parameters:
- name: Url
required: true
description: The inline url. If not given defaults to js/app.js. Generally should not be given unless using a non-standard filename.
description: The inline url. If not given defaults to main.js. Generally should not be given unless using a non-standard filename.
values: .+
WINDOW:
summary: How to display the tool when navigated to
Expand Down

0 comments on commit 6569f4c

Please sign in to comment.