Skip to content

Files

Latest commit

May 11, 2023
b3ebbd8 · May 11, 2023

History

History
This branch is 1 commit behind microsoft/vscode-webview-ui-toolkit-samples:main.

hello-world-react-vite

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
May 6, 2022
May 11, 2023
May 6, 2022
Jan 20, 2023
May 11, 2023
May 6, 2022
May 6, 2022
May 6, 2022
May 6, 2022
May 11, 2023
Dec 14, 2022
May 11, 2023
May 6, 2022

Hello World (React + Vite)

This is an implementation of the default Hello World sample extension that demonstrates how to set up and use a React + Vite + 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.

Run The Sample

# Copy sample extension locally
npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-react-vite 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 + Vite): Show