Hello Vibe - WebView2 Desktop Application

A WebView2-based Windows desktop application built with C++ and vibe-coded entirely in VSCode. This project demonstrates that you can build a complete desktop application without using Visual Studio IDE, while still leveraging the Visual Studio C++ Compiler for building (see tasks.json).

Project Overview

This application combines the power of native C++ Windows API with modern web technologies through Microsoft's WebView2 control. The UI is rendered using HTML, CSS, and JavaScript, while the application logic runs in native C++ code.

Project Structure

hello-vibe-coding/
├── src/                          # C++ source files
│   ├── main.cpp                  # Application entry point (WinMain)
│   ├── webview.cpp               # WebView2 initialization and management
│   ├── webview_handlers.cpp      # WebView2 event handlers
│   └── window.cpp                # Window procedure and window management
├── include/                      # Header files
│   ├── webview.h                 # WebView2 interface declarations
│   ├── webview_handlers.h        # WebView2 handler declarations
│   └── window.h                  # Window procedure declaration
├── ui/                           # Web UI files
│   └── index.html                # Main HTML/CSS/JavaScript UI
├── .vscode/                      # VSCode configuration
│   ├── tasks.json                # Build tasks using Visual Studio C++ Compiler
│   ├── launch.json               # Debug configuration
│   ├── settings.json             # C/C++ IntelliSense configuration
│   └── extensions.txt            # Recommended extensions
├── build/                        # Output directory for compiled executable
├── packages/                     # WebView2 NuGet package (generated by prepare.cmd)
├── prepare.cmd                   # Setup script to download WebView2 package
├── .clang-format                 # Code formatting configuration
├── .gitignore                    # Git ignore rules
└── README.md                     # This file

Key Technologies

• C++: Native Windows application code
• WebView2: Microsoft's modern web control for embedding web content
• Windows API: Window management and native OS integration
• HTML/CSS/JavaScript: Modern web UI rendered in the desktop window
• Visual Studio C++ Compiler: Used for building (via tasks.json), but development happens entirely in VSCode

Prerequisites

1. Visual Studio C++ Compiler: Visual Studio 2022 (or later) with C++ desktop development workload installed
   • The compiler (cl.exe) is used for building, but you don't need the Visual Studio IDE
   • The build tasks in tasks.json call VsDevCmd.bat to set up the compiler environment
2. Windows SDK: Included with Visual Studio installation
3. WebView2 Runtime: Automatically downloaded on first run, or can be installed separately
4. VSCode: With C/C++ Extension (Microsoft.cpptools)

Building and Running

Initial Setup

1. Run prepare.cmd to download the WebView2 NuGet package:

   .\prepare.cmd

Building

The project uses VSCode tasks configured in .vscode/tasks.json that invoke the Visual Studio C++ Compiler:

1. Build (Debug): Press Ctrl+Shift+B or run the "Build (Debug)" task

   • Uses /Zi flag for debug symbols
   • Links against WebView2Loader.dll.lib and required Windows libraries

2. Build (Release): Run the "Build (Release)" task from the command palette

   • Uses /O2 flag for optimizations

3. Run: Press F5 or run the "Run" task

   • Automatically builds first, then executes the application

4. Clean: Run the "Clean" task to remove build artifacts

Build Configuration

The build process in tasks.json:

• Calls VsDevCmd.bat to initialize the Visual Studio C++ Compiler environment
• Compiles all source files in src/ directory
• Links against WebView2 and Windows libraries (user32, kernel32, gdi32, shlwapi, ole32)
• Outputs build/app.exe

Architecture

Application Flow

1. main.cpp: Entry point that creates the main window and initializes WebView2
2. window.cpp: Handles Windows messages and window lifecycle
3. webview.cpp: Manages WebView2 initialization and lifecycle
4. webview_handlers.cpp: Implements event handlers for WebView2 interactions
5. ui/index.html: The web UI that users see and interact with

Communication

The application demonstrates bidirectional communication:

• C++ → Web: WebView2 can execute JavaScript in the web content
• Web → C++: JavaScript can call native C++ functions through WebView2's host objects

Development Notes

Why VSCode Instead of Visual Studio?

This project demonstrates that you can:

• Develop desktop applications entirely in VSCode
• Use the Visual Studio C++ Compiler without the Visual Studio IDE
• Leverage VSCode's modern editing experience and extensions
• Maintain a lightweight development environment

The tasks.json file shows how to configure VSCode to use the Visual Studio C++ Compiler by calling VsDevCmd.bat to set up the build environment.

Code Organization

• Separation of Concerns: UI logic (HTML/JS) is separate from application logic (C++)
• Modular Design: Each component has its own source file and header
• Modern C++: Uses C++17 standard features

Troubleshooting

Build Errors

• "cl.exe not found": Ensure Visual Studio C++ tools are installed and VsDevCmd.bat path in tasks.json matches your installation
• WebView2 errors: Run prepare.cmd to ensure the WebView2 package is downloaded
• Link errors: Verify all library paths in tasks.json are correct

Runtime Issues

• WebView2 not loading: Ensure WebView2 Runtime is installed (downloads automatically on first run)
• UI not displaying: Check that ui/index.html exists and is being loaded correctly

Resources

• WebView2 Documentation
• Windows API Documentation
• MSVC Compiler Reference
• VSCode C++ Configuration