Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/julian-b90/tachometer
https://github.com/julian-b90/tachometer
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/julian-b90/tachometer
- Owner: Julian-B90
- License: mit
- Created: 2023-04-03T19:43:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-21T21:10:31.000Z (12 months ago)
- Last Synced: 2024-01-21T22:24:36.574Z (12 months ago)
- Language: TypeScript
- Size: 3.09 MB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Tachometer
This repository defines an example of a Docker extension. The files in this repository have been automatically generated as a result of running `docker extension init`.
This extension is composed of:
- A [frontend](./ui) app in React that makes a request to the `/hello` endpoint and displays the payload in Docker Desktop.
> You can build your Docker Extension using your fav tech stack:
>
> - Frontend: React, Angular, Vue, Svelte, etc.
> Basically, any frontend framework you can bundle in an `index.html` file with CSS, and JS assets.
Looking for more templates?
1. [React + NodeJS](https://github.com/benja-M-1/node-backend-extension).
2. [React + .NET 6 WebAPI](https://github.com/felipecruz91/dotnet-api-docker-extension).
Request one or submit yours [here](https://github.com/docker/extensions-sdk/issues).
## Local development
You can use `docker` to build, install and push your extension. Also, we provide an opinionated [Makefile](Makefile) that could be convenient for you. There isn't a strong preference of using one over the other, so just use the one you're most comfortable with.
To build the extension, use `make build-extension` **or**:
```shell
docker buildx build -t julianb90/tachometer:latest . --load
```
To install the extension, use `make install-extension` **or**:
```shell
docker extension install julianb90/tachometer:latest
```
> If you want to automate this command, use the `-f` or `--force` flag to accept the warning message.
To preview the extension in Docker Desktop, open Docker Dashboard once the installation is complete. The left-hand menu displays a new tab with the name of your extension. You can also use `docker extension ls` to see that the extension has been installed successfully.
### Frontend development
During the development of the frontend part, it's helpful to use hot reloading to test your changes without rebuilding your entire extension. To do this, you can configure Docker Desktop to load your UI from a development server.
Assuming your app runs on the default port, start your UI app and then run:
```shell
cd ui
npm install
npm run dev
```
This starts a development server that listens on port `3000`.
You can now tell Docker Desktop to use this as the frontend source. In another terminal run:
```shell
docker extension dev ui-source julianb90/tachometer:latest http://localhost:3000
```
In order to open the Chrome Dev Tools for your extension when you click on the extension tab, run:
```shell
docker extension dev debug julianb90/tachometer:latest
```
Each subsequent click on the extension tab will also open Chrome Dev Tools. To stop this behaviour, run:
```shell
docker extension dev reset julianb90/tachometer:latest
```
### Clean up
To remove the extension:
```shell
docker extension rm julianb90/tachometer:latest
```
## What's next?
- To learn more about how to build your extension refer to the Extension SDK docs at https://docs.docker.com/desktop/extensions-sdk/.
- To publish your extension in the Marketplace visit https://www.docker.com/products/extensions/submissions/.
- To report issues and feedback visit https://github.com/docker/extensions-sdk/issues.
- To look for other ideas of new extensions, or propose new ideas of extensions you would like to see, visit https://github.com/docker/extension-ideas/discussions.