+
+
+```Dockerfile
+FROM --platform=$BUILDPLATFORM node:18.9-alpine3.15 AS client-builder
+WORKDIR /ui
+# cache packages in layer
+COPY ui/package.json /ui/package.json
+COPY ui/package-lock.json /ui/package-lock.json
+RUN --mount=type=cache,target=/usr/src/app/.npm \
+ npm set cache /usr/src/app/.npm && \
+ npm ci
+# install
+COPY ui /ui
+RUN npm run build
+
+FROM alpine
+LABEL org.opencontainers.image.title="My extension" \
+ org.opencontainers.image.description="Your Desktop Extension Description" \
+ org.opencontainers.image.vendor="Awesome Inc." \
+ com.docker.desktop.extension.api.version="0.3.0" \
+ com.docker.desktop.extension.icon="https://www.docker.com/wp-content/uploads/2022/03/Moby-logo.png"
+ com.docker.extension.screenshots="" \
+ com.docker.extension.detailed-description="" \
+ com.docker.extension.publisher-url="" \
+ com.docker.extension.additional-urls="" \
+ com.docker.extension.changelog=""
+
+COPY metadata.json .
+COPY docker.svg .
+COPY --from=client-builder /ui/build ui
+
+```
+
+
+
+
+
+
+> **Important**
+>
+> We don't have a working Dockerfile for Vue yet. [Fill out the form](https://docs.google.com/forms/d/e/1FAIpQLSdxJDGFJl5oJ06rG7uqtw1rsSBZpUhv_s9HHtw80cytkh2X-Q/viewform?usp=pp_url&entry.1333218187=Vue)
+> and let us know you'd like a Dockerfile for Vue.
+{: .important }
+
+
+
+
+
+
+> **Important**
+>
+> We don't have a working Dockerfile for Angular yet. [Fill out the form](https://docs.google.com/forms/d/e/1FAIpQLSdxJDGFJl5oJ06rG7uqtw1rsSBZpUhv_s9HHtw80cytkh2X-Q/viewform?usp=pp_url&entry.1333218187=Angular)
+> and let us know you'd like a Dockerfile for Angular.
+{: .important }
+
+
+
+
+
+
+> **Important**
+>
+> We don't have a working Dockerfile for Svelte yet. [Fill out the form](https://docs.google.com/forms/d/e/1FAIpQLSdxJDGFJl5oJ06rG7uqtw1rsSBZpUhv_s9HHtw80cytkh2X-Q/viewform?usp=pp_url&entry.1333218187=Svelte)
+> and let us know you'd like a Dockerfile for Svelte.
+{: .important }
+
+
+
+
+
+Replace the `ui/src/App.tsx` file with the following code:
+
+```tsx
+{% raw %}
+// ui/src/App.tsx
+import React, { useEffect } from 'react';
+import {
+ Paper,
+ Stack,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ Typography
+} from "@mui/material";
+import { createDockerDesktopClient } from "@docker/extension-api-client";
+
+//obtain docker destkop extension client
+const ddClient = createDockerDesktopClient();
+
+export function App() {
+ const [containers, setContainers] = React.useState([]);
+
+ useEffect(() => {
+ // List all containers
+ ddClient.docker.cli.exec('ps', ['--all', '--format', '"{{json .}}"']).then((result) => {
+ // result.parseJsonLines() parses the output of the command into an array of objects
+ setContainers(result.parseJsonLines());
+ });
+ }, []);
+
+ return (
+
+
+ Container list
+
+
+ Simple list of containers using Docker Extensions SDK.
+
+
+
+
+
+ Container id
+ Image
+ Command
+ Created
+ Status
+
+
+
+ {containers.map((container) => (
+
+ {container.ID}
+ {container.Image}
+ {container.Command}
+ {container.CreatedAt}
+ {container.Status}
+
+ ))}
+
+
+
+
+ );
+}
+{% endraw %}
+```
+
+
+
+
+
+
+> **Important**
+>
+> We don't have an example for Vue yet. [Fill out the form](https://docs.google.com/forms/d/e/1FAIpQLSdxJDGFJl5oJ06rG7uqtw1rsSBZpUhv_s9HHtw80cytkh2X-Q/viewform?usp=pp_url&entry.1333218187=Vue)
+> and let us know you'd like a sample with Vue.
+{: .important }
+
+
+
+
+
+
+> **Important**
+>
+> We don't have an example for Angular yet. [Fill out the form](https://docs.google.com/forms/d/e/1FAIpQLSdxJDGFJl5oJ06rG7uqtw1rsSBZpUhv_s9HHtw80cytkh2X-Q/viewform?usp=pp_url&entry.1333218187=Angular)
+> and let us know you'd like a sample with Angular.
+{: .important }
+
+
+
+
+
+
+> **Important**
+>
+> We don't have an example for Svelte yet. [Fill out the form](https://docs.google.com/forms/d/e/1FAIpQLSdxJDGFJl5oJ06rG7uqtw1rsSBZpUhv_s9HHtw80cytkh2X-Q/viewform?usp=pp_url&entry.1333218187=Svelte)
+> and let us know you'd like a sample with Svelte.
+{: .important }
+
+
+