The most important line here is the, set to your local server. To make React work in the WebView you have to change the code as follows:Ĭonst getWebviewContent = ( context: ExtensionContext ) => In the sample, a getWebviewContent method in which the HTML is defined. You can create the React project anywhere you want, but a mono-repo approach might be appropriate as you will have to move some files during the packaging of your extension.Īs a starting point, I took the WebView documenation. I choose to separate the project and use the CRA for the other project.
Info In Front Matter, the React app is part of the solution and generates the bundle via a separate webpack config and makes use of the webpack dev server. In this article, I will share the steps I had to take to make it work for CRA, but you will have to do a similar configuration in both cases. To improve the experience when working with WebViews in VS Code, I tried to make HMR work for create-react-app and webpack dev server. We are used to having Hot Module Replacement (HRM) for web projects, but unfortunately, this is not automatically available for VS Code extension development. In case when you are working with a WebView, this experience is clumsy. One of the things I did for a long time was manually hitting the refresh button each time I updated the code. It allows any company and developer to create their own unique experiences. I use the Visual Studio Code WebView API heavily as it provides fully customizable views for your panels or tabs. For Front Matter and another extension, I am currently developing.
0 kommentar(er)
