Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>cbranch101-demo-vscode-deployNew to Visual Studio Code? Get it now.
cbranch101-demo-vscode-deploy

cbranch101-demo-vscode-deploy

cbranch101

|
27 installs
| (0) | Free
A hello world sample extension to demonstrate using React + CRA with the Webview UI Toolkit for VS Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Hello World (React + Create React App)

This is an implementation of the default Hello World sample extension that demonstrates how to set up and use a React + Create React App + Webview UI Toolkit webview extension.

A screenshot of the sample extension.

Documentation

For a deeper dive into how this sample works, read the guides below.

  • Extension structure
  • Extension commands
  • Extension development cycle

Run The Sample

# Copy sample extension locally
npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-react-cra hello-world

# Navigate into sample directory
cd hello-world

# Install dependencies for both the extension and webview UI source code
npm run install:all

# Build webview UI source code
npm run build:webview

# Open sample in VS Code
code .

Once the sample is open inside VS Code you can run the extension by doing the following:

  1. Press F5 to open a new Extension Development Host window
  2. Inside the host window, open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) and type Hello World (React + CRA): Show
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft