4th chunk of `content/manuals/extensions/extensions-sdk/build/backend-extension-tutorial.md`
2115fbff93875d1eea6600fc6b221f34ef3d955947ebdae100000001000007f2
> We don't have a working Dockerfile for .Net. [Fill out the form](https://docs.google.com/forms/d/e/1FAIpQLSdxJDGFJl5oJ06rG7uqtw1rsSBZpUhv_s9HHtw80cytkh2X-Q/viewform?usp=pp_url&entry.25798127=.Net)
> and let us know if you'd like a Dockerfile for .Net.
{{< /tab >}}
{{< /tabs >}}
## Configure the metadata file
To start the backend service of your extension inside the VM of Docker Desktop, you have to configure the image name
in the `vm` section of the `metadata.json` file.
```json
{
"vm": {
"image": "${DESKTOP_PLUGIN_IMAGE}"
},
"icon": "docker.svg",
"ui": {
...
}
}
```
For more information on the `vm` section of the `metadata.json`, see [Metadata](../architecture/metadata.md).
> [!WARNING]
>
> Do not replace the `${DESKTOP_PLUGIN_IMAGE}` placeholder in the `metadata.json` file. The placeholder is replaced automatically with the correct image name when the extension is installed.
## Invoke the extension backend from your frontend
Using the [advanced frontend extension example](frontend-extension-tutorial.md), we can invoke our extension backend.
Use the Docker Desktop Client object and then invoke the `/hello` route from the backend service with `ddClient.
extension.vm.service.get` that returns the body of the response.
{{< tabs group="framework" >}}
{{< tab name="React" >}}
Replace the `ui/src/App.tsx` file with the following code:
```tsx
// ui/src/App.tsx
import React, { useEffect } from 'react';
import { createDockerDesktopClient } from "@docker/extension-api-client";
//obtain docker desktop extension client
const ddClient = createDockerDesktopClient();
export function App() {
const ddClient = createDockerDesktopClient();
const [hello, setHello] = useState<string>();
useEffect(() => {
const getHello = async () => {
const result = await ddClient.extension.vm?.service?.get('/hello');
setHello(JSON.stringify(result));
}
getHello()
}, []);
return (
<Typography>{hello}</Typography>
);
}
```
{{< /tab >}}
{{< tab name="Vue" >}}