diff --git a/code-studio-toc.html b/code-studio-toc.html
index eb30b32..50cd954 100644
--- a/code-studio-toc.html
+++ b/code-studio-toc.html
@@ -201,6 +201,16 @@
How to Resolve Failed to Parse Assistant error
+ Running Applications
+
+
diff --git a/code-studio/troubleshoot/Troubleshoot-images/Asp-core-template.png b/code-studio/troubleshoot/Troubleshoot-images/Asp-core-template.png
new file mode 100644
index 0000000..d54845a
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/Asp-core-template.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/Build-maui-project.png b/code-studio/troubleshoot/Troubleshoot-images/Build-maui-project.png
new file mode 100644
index 0000000..6cae6f2
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/Build-maui-project.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/add-new-project.png b/code-studio/troubleshoot/Troubleshoot-images/add-new-project.png
new file mode 100644
index 0000000..8167b37
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/add-new-project.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/blazor-wasam-template.png b/code-studio/troubleshoot/Troubleshoot-images/blazor-wasam-template.png
new file mode 100644
index 0000000..680a713
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/blazor-wasam-template.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/create-new-solution.png b/code-studio/troubleshoot/Troubleshoot-images/create-new-solution.png
new file mode 100644
index 0000000..a2890ff
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/create-new-solution.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/create-tasks-json.png b/code-studio/troubleshoot/Troubleshoot-images/create-tasks-json.png
new file mode 100644
index 0000000..7773e6e
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/create-tasks-json.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/debug-windows-configuration.png b/code-studio/troubleshoot/Troubleshoot-images/debug-windows-configuration.png
new file mode 100644
index 0000000..2fa6b7c
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/debug-windows-configuration.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/dotnet-maui-extensions.png b/code-studio/troubleshoot/Troubleshoot-images/dotnet-maui-extensions.png
new file mode 100644
index 0000000..32bc9cb
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/dotnet-maui-extensions.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/maui-project-template-samples.png b/code-studio/troubleshoot/Troubleshoot-images/maui-project-template-samples.png
new file mode 100644
index 0000000..3499965
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/maui-project-template-samples.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/maui-project-template.png b/code-studio/troubleshoot/Troubleshoot-images/maui-project-template.png
new file mode 100644
index 0000000..6763cba
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/maui-project-template.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/run-debug-section.png b/code-studio/troubleshoot/Troubleshoot-images/run-debug-section.png
new file mode 100644
index 0000000..f59e2a7
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/run-debug-section.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/solution-name-creating.png b/code-studio/troubleshoot/Troubleshoot-images/solution-name-creating.png
new file mode 100644
index 0000000..8422dfb
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/solution-name-creating.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/solution-new-project-template-added.png b/code-studio/troubleshoot/Troubleshoot-images/solution-new-project-template-added.png
new file mode 100644
index 0000000..57ca4c6
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/solution-new-project-template-added.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/solution-selecting.png b/code-studio/troubleshoot/Troubleshoot-images/solution-selecting.png
new file mode 100644
index 0000000..2b3af45
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/solution-selecting.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/solution-template-creating.png b/code-studio/troubleshoot/Troubleshoot-images/solution-template-creating.png
new file mode 100644
index 0000000..bda7a93
Binary files /dev/null and b/code-studio/troubleshoot/Troubleshoot-images/solution-template-creating.png differ
diff --git a/code-studio/troubleshoot/built-in-extensions.md b/code-studio/troubleshoot/built-in-extensions.md
new file mode 100644
index 0000000..01e3dc5
--- /dev/null
+++ b/code-studio/troubleshoot/built-in-extensions.md
@@ -0,0 +1,58 @@
+---
+title: Built-in Extensions of Syncfusion Code Studio
+description: Comprehensive overview of the pre-installed extensions that provide enhanced development, debugging, and productivity capabilities in Syncfusion Code Studio.
+platform: syncfusion-code-studio
+control: IDE
+documentation: Troubleshoot
+keywords: extensions, dotrush, solution-explorer, debugging, intellisense, code-studio, built-in, productivity, development-tools
+---
+
+# Built-in Extensions of Syncfusion Code Studio
+
+Syncfusion Code Studio includes a comprehensive suite of pre-installed extensions designed to provide professional-grade development and debugging capabilities. These extensions are carefully integrated to deliver an enhanced development experience across multiple platforms and technologies without requiring additional configuration.
+
+## DotRush Extension
+
+**DotRush** is a comprehensive, lightweight C# development environment that transforms Code Studio into a powerful .NET development platform. This extension serves as the foundation for efficient .NET project management and development workflows.
+
+### Core Capabilities:
+
+- **Advanced Roslyn-based IntelliSense** - Provides intelligent code completion, syntax highlighting, and real-time error detection
+- **Integrated Solution Explorer** - Manages complex multi-project solutions with Visual Studio-compatible functionality
+- **Multi-platform debugging support** - Unified debugging experience for .NET Core, ASP.NET Core, Blazor WebAssembly, Unity, and Godot projects
+- **Comprehensive test integration** - Built-in support for NUnit, xUnit, and MSTest frameworks with test discovery and execution
+- **Advanced performance profiling** - Real-time performance analysis and optimization tools
+- **Code decompilation and analysis** - Reverse engineering capabilities for .NET assemblies
+- **Multi-target diagnostics** - Cross-platform build and deployment diagnostics
+- **WebAssembly debugging integration** - Specialized debugging for Blazor WebAssembly applications
+
+**Learn More:** [JaneySprings/DotRush: Lightweight C# development environment for VSCode](https://github.com/JaneySprings/DotRush)
+
+## vscode-solution-explorer Extension
+
+**vscode-solution-explorer** brings the familiar Visual Studio Solution Explorer experience to Code Studio, providing professional project management capabilities for complex .NET solutions. This extension ensures seamless workflow continuity for development teams.
+
+### Professional Features:
+
+- **Comprehensive solution file support** - Full compatibility with .sln and .slnx formats
+- **Visual Studio-compatible interface** - Familiar hierarchical project structure and navigation
+- **Enterprise-grade project optimization** - Enhanced performance for large .NET Core and .NET Framework solutions
+- **Advanced project organization** - Drag-and-drop functionality with automatic dependency resolution
+- **Scalable multi-project management** - Efficiently handles enterprise-level solutions with dozens of projects
+- **Intelligent dependency visualization** - Clear project reference mapping and dependency analysis
+
+### Developer Experience Benefits:
+
+This extension significantly reduces the learning curve for developers migrating from Visual Studio while providing enhanced productivity features specifically optimized for Code Studio's lightweight architecture.
+
+**Learn More:** [fernandoescolar/vscode-solution-explorer: Visual Studio Solution explorer panel for VS Code](https://github.com/fernandoescolar/vscode-solution-explorer)
+
+## Visual Reference
+
+
+
+*Built-in extensions showcase in Syncfusion Code Studio for enhanced development experience*
+
+---
+
+**Important:** These extensions are pre-installed and automatically activated in Code Studio. No additional installation, licensing, or configuration is required to access these professional development tools.
\ No newline at end of file
diff --git a/code-studio/troubleshoot/running-applications/cross-platform.md b/code-studio/troubleshoot/running-applications/cross-platform.md
new file mode 100644
index 0000000..749a8c9
--- /dev/null
+++ b/code-studio/troubleshoot/running-applications/cross-platform.md
@@ -0,0 +1,315 @@
+---
+title: Cross-Platform Development in Syncfusion Code Studio
+description: Comprehensive guide for cross-platform application development using Syncfusion Code Studio's integrated tools and features for .NET MAUI applications.
+platform: syncfusion-code-studio
+control: IDE
+documentation: Troubleshoot
+keywords: cross-platform, maui, mobile development, desktop development, project creation, solution, code-studio, troubleshoot
+---
+
+# Cross-Platform Development in Syncfusion Code Studio
+
+Cross-platform development is a fundamental approach in modern application development that enables developers to create applications targeting multiple operating systems and device types from a single codebase. **Syncfusion Code Studio** provides comprehensive development tools and integrated features to streamline cross-platform .NET MAUI application development and debugging processes. This guide delivers step-by-step instructions for effectively developing and debugging cross-platform .NET MAUI applications within the Code Studio environment.
+
+## Prerequisites
+
+- **Syncfusion Code Studio** installed and configured on your development system
+- **.NET SDK 9.0 or later** installed for your target platform (Windows, macOS, or Linux). Download from the [.NET Website](https://dotnet.microsoft.com/)
+- **Verify .NET SDK installation** by executing the following commands in your terminal:
+ - Check version: `dotnet --version`
+ - Get detailed information: `dotnet --info`
+- **Check existing workloads** installed on the system: `dotnet workload list`
+- **Install .NET MAUI Workload:**
+
+ **Windows:**
+ ```bash
+ dotnet workload install maui
+ ```
+
+ **macOS:**
+ ```bash
+ sudo dotnet workload install maui
+ ```
+
+ **Linux:**
+ ```bash
+ dotnet workload install maui-android
+ ```
+
+ **Verify Installation:**
+ ```bash
+ dotnet workload list
+ ```
+
+- **Platform-specific requirements:**
+ - **Android development:** Android Studio for Android emulator
+ - **iOS development:** Xcode for iOS emulator (macOS only)
+
+**Additional Resources:** For detailed installation guidance, watch this video - [.NET MAUI Development in VS Code - Complete Setup Guide](https://www.youtube.com/watch?v=1t2zzoW4D98&t=547s)
+
+## Built-in Extensions of Code Studio
+
+Syncfusion Code Studio includes integrated extensions that enhance .NET MAUI development and debugging capabilities. These pre-configured extensions provide comprehensive support for cross-platform mobile and desktop application development and debugging workflows.
+
+**For detailed information about Code Studio's built-in extensions, see:** [Built-in Extensions of Syncfusion Code Studio](./built-in-extensions.md)
+
+## Create a .NET MAUI Project
+
+Before you can develop and debug a cross-platform .NET MAUI application, you need to establish a project structure. Follow these steps to create a new .NET MAUI project in Syncfusion Code Studio:
+
+### Step 1: Create a Solution
+1. Open Syncfusion Code Studio.
+2. Navigate to **Solution** > **Create New Solution**.
+3. Create a new solution by specifying:
+ - **Solution name**
+
+
+
+### Step 2: Add a .NET MAUI Project to the Solution
+1. Right-click on the solution in the **Solution Explorer** panel.
+2. Select **Add New Project** from the context menu.
+
+3. In the project template selection:
+ - Choose **.NET MAUI App** template
+ - Specify your **application name**
+ - Set the **project location**
+
+
+
+
+
+## Steps to Configure and Debug a Cross-Platform .NET MAUI Application
+
+Once you have successfully created your .NET MAUI project, follow these comprehensive steps to configure, build, and debug your cross-platform application effectively within the Code Studio development environment.
+
+### Configure Code Studio for Cross-Platform Development
+
+#### Step 1: Set Up Debug Configuration Files
+
+1. **Navigate to the Run and Debug section** and create the `launch.json` file using the **.NET Core Debugger**.
+
+
+
+2. **Create a `tasks.json` file** within the `.vscode` folder for build automation.
+
+
+
+#### Step 2: Configure tasks.json
+
+Create the following `tasks.json` file in your `.vscode` folder:
+
+```json
+{
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "label": "build-android",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "build",
+ "${workspaceFolder}/FinanceTracker/FinanceTracker.csproj",
+ "-f",
+ "net9.0-android",
+ "-c",
+ "Debug"
+ ],
+ "problemMatcher": "$msCompile",
+ "group": {
+ "kind": "build",
+ "isDefault": true
+ }
+ },
+ {
+ "label": "run-android",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "build",
+ "-t:Run",
+ "${workspaceFolder}/FinanceTracker/FinanceTracker.csproj",
+ "-f",
+ "net9.0-android",
+ "-c",
+ "Debug"
+ ],
+ "dependsOn": "build-android",
+ "problemMatcher": "$msCompile"
+ },
+ {
+ "label": "install-android-workload",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "workload",
+ "install",
+ "maui-android"
+ ],
+ "problemMatcher": "$msCompile"
+ },
+ {
+ "label": "build-windows",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "build",
+ "${workspaceFolder}/FinanceTracker/FinanceTracker.csproj",
+ "-f",
+ "net9.0-windows10.0.19041.0",
+ "-c",
+ "Debug",
+ "/p:EnableWindowsTargeting=true"
+ ],
+ "problemMatcher": "$msCompile"
+ },
+ {
+ "label": "clean",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "clean",
+ "${workspaceFolder}/FinanceTracker/FinanceTracker.csproj"
+ ],
+ "problemMatcher": "$msCompile"
+ },
+ {
+ "label": "rebuild-windows",
+ "dependsOn": ["clean", "build-windows"],
+ "dependsOrder": "sequence",
+ "problemMatcher": "$msCompile",
+ "group": "build"
+ }
+ ]
+}
+```
+
+#### Step 3: Configure launch.json
+
+Create the following `launch.json` file in your `.vscode` folder:
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Debug Android",
+ "type": "coreclr",
+ "request": "launch",
+ "preLaunchTask": "run-android",
+ "program": "${workspaceFolder}/FinanceTracker/bin/Debug/net9.0-android/com.companyname.financetracker.apk",
+ "cwd": "${workspaceFolder}/FinanceTracker",
+ "stopAtEntry": false,
+ "console": "internalConsole",
+ "pipeTransport": {
+ "pipeCwd": "${workspaceFolder}",
+ "pipeProgram": "adb",
+ "pipeArgs": [
+ "shell"
+ ],
+ "debuggerPath": "/data/local/tmp/vsdbg/vsdbg"
+ },
+ "postDebugTask": "clean"
+ },
+ {
+ "name": "Debug Windows",
+ "type": "coreclr",
+ "request": "launch",
+ "preLaunchTask": "rebuild-windows",
+ "program": "dotnet",
+ "args": [
+ "run",
+ "--project",
+ "${workspaceFolder}/FinanceTracker/FinanceTracker.csproj",
+ "-f",
+ "net9.0-windows10.0.19041.0",
+ "--no-build"
+ ],
+ "cwd": "${workspaceFolder}/FinanceTracker",
+ "stopAtEntry": false,
+ "console": "internalConsole"
+ }
+ ]
+}
+```
+
+#### Step 4: Verify File Structure
+
+Your project structure should look like this:
+
+```
+YourSolution/
+├── .vscode/
+│ ├── tasks.json
+│ └── launch.json
+└── YourMauiApp/
+ ├── Platforms/
+ ├── Resources/
+ ├── App.xaml
+ ├── App.xaml.cs
+ └── YourMauiApp.csproj
+```
+
+### Build the Cross-Platform Project
+
+Before executing the cross-platform application, build your project to ensure all dependencies are properly configured and resolved for target platforms.
+
+
+
+### Running the Cross-Platform Application
+
+#### For Windows Platform:
+1. Navigate to **"Run and Debug"** in the Activity Bar
+2. Select **"Debug Windows"** from the platform configuration dropdown
+3. Click the **Start Debugging** button or press `F5`
+
+
+
+#### For Android Platform:
+
+1. **Configure Android Emulator:**
+ - Open Command Prompt from this path: `C:\Program Files (x86)\Android\android-sdk\emulator`
+ - Check available emulators: `emulator -list-avds`
+ - Start the emulator: `emulator -avd pixel_7_-_api_35` (replace with your configured emulator name)
+
+2. **Start Debugging Session:**
+ - Navigate to **"Run and Debug"** in the Activity Bar
+ - Select **"Debug Android"** from the platform configuration dropdown
+ - Click the **Start Debugging** button or press `F5`
+
+### Build and Run via Terminal
+
+For efficient building and execution of cross-platform applications without debugging sessions, use these terminal commands:
+
+```bash
+# Build the cross-platform project
+dotnet build
+
+# Run the application on default platform
+dotnet run
+```
+
+**Note:** Make sure to replace `FinanceTracker` with your actual project name in the configuration files above.
+
+## Important Notes
+
+Before proceeding with cross-platform .NET MAUI application development and debugging in Code Studio, consider these critical configuration requirements:
+
+- **File Structure:** The `.vscode` folder must be positioned at the same level as your cross-platform MAUI project folder to ensure proper configuration loading and execution.
+
+- **Relative Paths:** All file paths in the configuration files are relative to the workspace root directory. Ensure your cross-platform workspace structure is properly configured.
+
+- **Project Name Matching:** The project name in configuration files must exactly match your `.csproj` file name. Any naming discrepancy will result in cross-platform build failures.
+
+- **Android Emulator:** Always initialize the Android emulator before launching the debug session. The cross-platform debugging process cannot establish connection to a stopped or unresponsive emulator.
+
+- **Platform Limitations:** This configuration is specifically optimized for **Android and Windows platforms only**. Other target platforms require different setup procedures and platform-specific configurations.
+
+- **iOS and macOS:** iOS and macOS cross-platform debugging requires additional platform-specific configuration not covered in this setup. Refer to platform-specific documentation for these target platforms.
+
+- **Breakpoint Limitations:** Note that breakpoints might not be triggered in Code Studio with this cross-platform configuration due to current debugging implementation limitations.
+
+## Video Tutorial
+
+For a comprehensive visual guide on cross-platform .NET MAUI application creation and debugging workflows, refer to this detailed video tutorial that demonstrates the complete cross-platform development process step-by-step.
+
+**Video Reference:** [Cross-Platform Application Creation and Debug in .NET MAUI](https://www.youtube.com/watch?v=1t2zzoW4D98&t=547s)
\ No newline at end of file
diff --git a/code-studio/troubleshoot/running-applications/web-platform.md b/code-studio/troubleshoot/running-applications/web-platform.md
new file mode 100644
index 0000000..b7a1c7d
--- /dev/null
+++ b/code-studio/troubleshoot/running-applications/web-platform.md
@@ -0,0 +1,777 @@
+---
+title: Run Web Platform Applications in Syncfusion Code Studio
+description: Comprehensive guide to run web platform applications including JavaScript/TypeScript, Vue, React, Angular, ASP.NET Core, and Blazor WebAssembly using Syncfusion Code Studio's development features and browser tools.
+platform: syncfusion-code-studio
+control: IDE
+documentation: Troubleshoot
+keywords: web platform, javascript, typescript, vue, react, angular, asp.net core, blazor webassembly, run, running, launch, browser tools, developer tools, client-side, server-side, troubleshoot, code-studio, dotrush
+---
+
+# Running Web Platform Applications in Syncfusion Code Studio
+
+**Syncfusion Code Studio** is an integrated development environment that enables developers to build, configure, and execute modern web platform applications efficiently. This guide provides step-by-step instructions for launching and testing JavaScript/TypeScript frameworks (Vue.js, React, Angular), server-side ASP.NET Core applications, and client-side Blazor WebAssembly applications within the Code Studio environment.
+
+You'll learn how to configure development environments, set up project structures, and leverage the integrated **DotRush** runtime for streamlined application execution. This documentation covers both browser-based client applications and server-side .NET applications, providing practical workflows for common development scenarios.
+
+## Prerequisites
+
+### General Requirements
+- **Syncfusion Code Studio** installed on your system
+
+### Platform-Specific Requirements
+
+#### For Browser-Based Applications (JavaScript/TypeScript, Vue, React, Angular)
+- **Node.js** (LTS version recommended) - Download from [Node.js Website](https://nodejs.org/)
+- **npm or yarn** package manager (included with Node.js)
+- **Framework-specific CLI tools** (optional but recommended):
+ ```bash
+ # Vue CLI
+ npm install -g @vue/cli
+
+ # Angular CLI
+ npm install -g @angular/cli
+ ```
+
+#### For .NET Applications (ASP.NET Core & Blazor WebAssembly)
+- **.NET SDK 9.0** installed based on your platform (Windows, macOS, or Linux). Download from the [.NET Website](https://dotnet.microsoft.com/)
+- **Verify .NET SDK installation**:
+ ```bash
+ dotnet --version
+ dotnet --info
+ ```
+- **Required workloads for Blazor WebAssembly**:
+ ```bash
+ dotnet workload install wasm-tools
+ ```
+- **Verify installations**:
+ ```bash
+ dotnet new list
+ dotnet workload list
+ ```
+
+## Built-in Extensions of Code Studio
+
+Syncfusion Code Studio includes integrated extensions that streamline web platform development workflows without requiring additional installations. These extensions provide essential functionality for JavaScript/TypeScript development, .NET debugging, and browser-based application execution.
+
+**Key Extensions for Web Platform Development:**
+- **DotRush Extension**: .NET runtime and debugging capabilities for ASP.NET Core and Blazor applications.
+
+**For comprehensive extension details, configuration options, and advanced features, see:** [Built-in Extensions of Syncfusion Code Studio](../../built-in-extensions.md)
+
+This guide covers running the following web application platforms:
+
+1. **[Client-Side Web Applications](#client-side-web-applications)** - Modern JavaScript/TypeScript applications built with Vue.js, React, Angular, and other client-side frameworks
+2. **[ASP.NET Core Web Applications](#aspnet-core-web-applications)** - Server-side .NET web applications with MVC, Razor Pages, and Web API
+3. **[Blazor WebAssembly Applications](#blazor-webassembly-applications)** - Client-side .NET applications running in WebAssembly
+
+---
+
+# Client-Side Web Applications
+
+Modern JavaScript and TypeScript applications that run in web browsers, including Vue.js, React, and Angular frameworks. These applications can be efficiently developed and launched using Syncfusion Code Studio.
+
+## Prerequisites
+- **Node.js** (LTS version 18.x+)
+- **npm or yarn** package manager
+
+## Project Creation
+
+Create new client-side web applications using the following commands:
+
+### React Applications
+```bash
+# Create new React project using Vite
+npm create vite@latest my-app
+
+# Select React framework when prompted
+# Choose React → JavaScript or React → TypeScript
+```
+
+### Vue.js Applications
+```bash
+# Create new Vue.js project using Vite
+npm create vite@latest my-vue-app
+
+# Select Vue framework when prompted
+# Choose Vue → JavaScript or Vue → TypeScript
+```
+
+### Angular Applications
+```bash
+# Install Angular CLI globally
+npm install -g @angular/cli
+
+# Create new Angular project
+ng new my-angular-app
+```
+
+### TypeScript Applications
+```bash
+# Clone Syncfusion TypeScript quickstart template
+git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart
+```
+
+### JavaScript Applications (Vanilla)
+For vanilla JavaScript projects, create a basic project structure:
+```bash
+# Create project directory
+mkdir my-js-app
+
+# Create basic HTML file (within the project directory)
+echo 'My JS AppHello World
' > my-js-app/index.html
+
+# Create JavaScript file (within the project directory)
+echo 'console.log("Hello from JavaScript!");' > my-js-app/app.js
+```
+
+## Quick Start
+
+| Framework | Start Command | Default URL |
+|-----------|--------------|-------------|
+| **JavaScript (Vanilla)** | Open `index.html` in browser | `file:///path/to/index.html` |
+| **TypeScript** | `npm start` or `npm run dev` | `http://localhost:3000` |
+| **Vue.js** | `npm run dev` | `http://localhost:5173` |
+| **React** | `npm run dev` | `http://localhost:3000` |
+| **Angular** | `ng serve` | `http://localhost:4200` |
+
+### Development Workflow
+1. **Navigate to project directory:** `cd your-project`
+2. **Install dependencies:** `npm install` (if not already done during creation)
+3. **Start development server:** Use appropriate command from the Quick Start table above
+4. **Open application:** Browser will automatically open or navigate to the displayed localhost URL
+
+## Debugging Client-Side Web Applications
+
+This section covers VS Code debugging configuration and steps for JavaScript, TypeScript, Vue.js, React, and Angular applications.
+
+### VS Code Debug Configuration
+
+#### Step 1: Create Debug Configuration Files
+
+1. Open the **Run and Debug** panel in Code Studio (Ctrl+Shift+D)
+2. Click the **"Create a launch.json file"** link
+3. Select the appropriate debugger for your application type from the dropdown menu
+
+#### Step 2: Framework-Specific Debug Configuration
+
+**For JavaScript Applications:**
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Debug JavaScript App",
+ "url": "http://localhost:8080",
+ "webRoot": "${workspaceFolder}",
+ "file": "${workspaceFolder}/YourApp/index.html"
+ }
+ ]
+}
+```
+
+#### Setting up HTTP Server for JavaScript Applications
+For debugging JavaScript applications, you need a local HTTP server to serve your `index.html` and `YourApp.js` files properly. Install a lightweight HTTP server like `http-server` via npm:
+
+```bash
+npm install -g http-server
+```
+
+Then, navigate to your `YourApp` directory in the terminal and run:
+
+```bash
+http-server . -p 8080
+```
+
+This will serve your application on `http://localhost:8080`, which matches the URL in the `launch.json` configuration.
+
+**For TypeScript Applications:**
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Debug TypeScript App",
+ "type": "chrome",
+ "request": "launch",
+ "url": "http://localhost:3000",
+ "webRoot": "${workspaceFolder}/YourWebApp",
+ "sourceMaps": true,
+ "sourceMapPathOverrides": {
+ "webpack://YourWebApp/./src/*": "${webRoot}/src/*",
+ "webpack:///src/*": "${webRoot}/src/*",
+ "webpack:///*": "*",
+ "webpack:///./src/*": "${webRoot}/src/*"
+ },
+ "skipFiles": [
+ "${workspaceFolder}/node_modules/**/*.js",
+ "/**/*.js"
+ ]
+ }
+ ]
+}
+```
+#### Configure Webpack for TypeScript Development
+Create or update a `webpack.config.js` file in the project root with debugging-optimized settings:
+
+```javascript
+module.exports = {
+ mode: 'development',
+ devtool: 'source-map',
+ entry: './src/app.ts',
+ output: {
+ filename: 'bundle.js',
+ path: __dirname + '/dist',
+ publicPath: '/dist/'
+ },
+ resolve: {
+ extensions: ['.ts', '.js']
+ },
+ module: {
+ rules: [
+ {
+ test: /\.ts$/,
+ use: 'ts-loader',
+ exclude: /node_modules/
+ }
+ ]
+ },
+ devServer: {
+ static: './',
+ port: 3000,
+ hot: true
+ }
+};
+```
+
+**For React Applications:**
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Debug React App",
+ "url": "http://localhost:5173",
+ "webRoot": "${workspaceFolder}/my-app/src",
+ "sourceMapPathOverrides": {
+ "webpack:///src/*": "${webRoot}/*"
+ }
+ }
+ ]
+}
+```
+
+**For Vue.js Applications:**
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Debug Vue App",
+ "type": "chrome",
+ "request": "launch",
+ "url": "http://localhost:5173",
+ "webRoot": "${workspaceFolder}/my-app/src",
+ "sourceMaps": true
+ }
+ ]
+}
+
+```
+
+#### Install Vue (Official) Extension
+For enhanced Vue.js development and debugging capabilities, install the official Vue extension:
+
+1. Open the **Extensions** panel in Syncfusion Code Studio (`Ctrl+Shift+X`)
+2. Search for **"Vue - Official"** by Vue.js team
+3. Click **Install** on the extension
+4. Restart Code Studio to activate the extension features
+
+#### Configure Vite for Vue.js Development
+Create or update your `vite.config.js` file in the project root with debugging-optimized settings:
+
+```javascript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+ plugins: [vue()],
+ build: {
+ sourcemap: true,
+ rollupOptions: {
+ output: {
+ sourcemapExcludeSources: false
+ }
+ }
+ },
+ server: {
+ port: 5173,
+ host: 'localhost',
+ open: false,
+ strictPort: true
+ },
+ css: {
+ devSourcemap: true
+ },
+ define: {
+ __VUE_PROD_DEVTOOLS__: true,
+ }
+})
+```
+
+**For Angular Applications:**
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Debug Angular App",
+ "url": "http://localhost:4200",
+ "webRoot": "${workspaceFolder}/my-angular-app",
+ "sourceMapPathOverrides": {
+ "webpack:///./src/*": "${webRoot}/src/*",
+ "webpack:///src/*": "${webRoot}/src/*",
+ "webpack:///*": "${webRoot}/*",
+ "webpack:///./~/*": "${webRoot}/node_modules/*"
+ }
+ }
+ ]
+}
+```
+
+### Browser Developer Tools Integration
+
+**Open Browser DevTools:**
+- **Chrome/Edge:** Press `F12` or `Ctrl+Shift+I`
+- **Firefox:** Press `F12` or `Ctrl+Shift+I`
+
+**Debugging Features:**
+- **Console Tab:** View console.log output and errors
+- **Sources Tab:** Set breakpoints and step through code
+- **Network Tab:** Monitor HTTP requests and responses
+- **Elements Tab:** Inspect and modify DOM elements
+
+# ASP.NET Core Web Applications
+
+Running ASP.NET Core applications is a fundamental aspect of the development workflow that enables you to launch and test your server-side applications locally. This section provides comprehensive step-by-step instructions for effectively running your ASP.NET Core web applications using the integrated **DotRush** runtime within Syncfusion Code Studio.
+
+## Create an ASP.NET Core Web Project
+
+Before you can run an ASP.NET Core application, you need to set up a project. Follow these steps to create a new ASP.NET Core web project in Syncfusion Code Studio:
+
+### Step 1: Create a Solution
+1. Open Syncfusion Code Studio.
+2. Navigate to **Solution** > **Create New Solution**.
+3. Create a new solution by specifying the **solution name**.
+
+
+
+
+
+
+
+### Step 2: Add an ASP.NET Core Project to the Solution
+1. Right-click on the solution in the **Solution Explorer** panel.
+2. Select **Add New Project** from the context menu.
+3. In the project template selection:
+ - Choose the **ASP.NET Core Web App** template
+ - Specify your **application name**
+ - Set the **project location**
+
+
+
+
+
+## Steps to Run an ASP.NET Core Application
+
+Once you have created your ASP.NET Core project, follow these comprehensive steps to configure, build, and run your application effectively.
+
+### Configure Code Studio for Running the Project
+
+#### Step 1: Set Up Configuration Files
+
+1. Navigate to the **Run and Debug** section and create the `launch.json` file using the **.NET Core Debugger**.
+
+2. Create a `tasks.json` file within the `.vscode` folder.
+
+#### Step 2: Configure tasks.json for ASP.NET Core
+
+Create the following `tasks.json` file in your `.vscode` folder:
+
+```json
+{
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "label": "build",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "build",
+ "${workspaceFolder}/YourWebApp/YourWebApp.csproj",
+ "/property:GenerateFullPaths=true",
+ "/consoleloggerparameters:NoSummary"
+ ],
+ "problemMatcher": "$msCompile",
+ "group": {
+ "kind": "build",
+ "isDefault": true
+ }
+ },
+ {
+ "label": "publish",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "publish",
+ "${workspaceFolder}/YourWebApp/YourWebApp.csproj",
+ "/property:GenerateFullPaths=true",
+ "/consoleloggerparameters:NoSummary"
+ ],
+ "problemMatcher": "$msCompile"
+ },
+ {
+ "label": "watch",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "watch",
+ "run",
+ "--project",
+ "${workspaceFolder}/YourWebApp/YourWebApp.csproj"
+ ],
+ "problemMatcher": "$msCompile"
+ },
+ {
+ "label": "clean",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "clean",
+ "${workspaceFolder}/YourWebApp/YourWebApp.csproj"
+ ],
+ "problemMatcher": "$msCompile"
+ }
+ ]
+}
+```
+
+#### Step 3: Configure launch.json for ASP.NET Core
+
+Create the following `launch.json` file in your `.vscode` folder:
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch ASP.NET Core Web App",
+ "type": "coreclr",
+ "request": "launch",
+ "preLaunchTask": "build",
+ "program": "${workspaceFolder}/YourWebApp/bin/Debug/net9.0/YourWebApp.dll",
+ "args": [],
+ "cwd": "${workspaceFolder}/YourWebApp",
+ "serverReadyAction": {
+ "action": "openExternally",
+ "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+ },
+ "env": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ },
+ "sourceFileMap": {
+ "/Views": "${workspaceFolder}/YourWebApp/Views",
+ "/Pages": "${workspaceFolder}/YourWebApp/Pages"
+ },
+ "console": "integratedTerminal",
+ "internalConsoleOptions": "openOnSessionStart"
+ }
+ ]
+}
+```
+
+## ASP.NET Core Project Structure
+
+### Verify File Structure
+
+Your ASP.NET Core project structure should look like this:
+
+```
+YourSolution/
+├── .vscode/
+│ ├── tasks.json
+│ └── launch.json
+└── YourWebApp/
+ ├── Pages/
+ ├── Models/
+ ├── wwwroot/
+ ├── Program.cs
+ ├── appsettings.json
+ └── YourWebApp.csproj
+```
+
+## Running the ASP.NET Core Application
+
+### Build the Project
+
+Before running the application, build your project to ensure all dependencies are properly configured:
+
+```bash
+# Navigate to project directory
+cd YourWebApp
+
+# Build the project
+dotnet build
+
+# Restore packages if needed
+dotnet restore
+```
+
+### Running via Code Studio
+
+1. Go to **Run and Debug** in the Activity Bar
+2. Select **Launch ASP.NET Core Web App** from the dropdown
+3. Click the **Start Debugging** button or press `F5`
+
+### Running via Terminal
+
+For quick building and running, use these terminal commands:
+
+```bash
+# Navigate to project directory
+cd YourWebApp
+
+# Run the application
+dotnet run
+
+# Run with hot reload (recommended for development)
+dotnet watch run
+
+# Run with specific launch profile
+dotnet run --launch-profile "Development"
+```
+
+# Blazor WebAssembly Applications
+
+Running Blazor WebAssembly applications requires specialized configuration due to their client-side execution model. This section demonstrates how to effectively configure, run, and launch Blazor WebAssembly applications using the integrated **DotRush** runtime and browser development tools within Syncfusion Code Studio.
+
+## Create a Blazor WebAssembly Project
+
+### Step 1: Initialize Solution
+- Open Syncfusion Code Studio
+- Navigate to **Solution** > **Create New Solution**
+- Specify solution name and location
+
+
+
+
+
+
+
+### Step 2: Add Blazor WASM Project
+- Right-click the solution in **Solution Explorer**
+- Select **Add New Project**
+- Choose the **Blazor WebAssembly App** template
+- Configure the project name and location
+
+
+
+
+
+
+## Blazor WebAssembly Configuration
+
+### Configure Runtime Environment
+
+#### Step 1: Create Configuration Files
+
+Create the necessary configuration files in your project's `.vscode` directory:
+
+1. Navigate to the **Run and Debug** panel
+2. Generate `launch.json` for Blazor WebAssembly execution
+3. Create `tasks.json` for build automation
+
+#### Step 2: Tasks Configuration for Blazor WASM
+
+Create the following `tasks.json` file in your `.vscode` folder:
+
+```json
+{
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "label": "build",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "build",
+ "${workspaceFolder}/YourBlazorApp/YourBlazorApp.csproj",
+ "/property:GenerateFullPaths=true",
+ "/consoleloggerparameters:NoSummary"
+ ],
+ "problemMatcher": "$msCompile",
+ "group": {
+ "kind": "build",
+ "isDefault": true
+ }
+ },
+ {
+ "label": "publish",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "publish",
+ "${workspaceFolder}/YourBlazorApp/YourBlazorApp.csproj",
+ "/property:GenerateFullPaths=true",
+ "/consoleloggerparameters:NoSummary"
+ ],
+ "problemMatcher": "$msCompile"
+ },
+ {
+ "label": "watch",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "watch",
+ "run",
+ "--project",
+ "${workspaceFolder}/YourBlazorApp/YourBlazorApp.csproj"
+ ],
+ "problemMatcher": "$msCompile"
+ },
+ {
+ "label": "clean",
+ "command": "dotnet",
+ "type": "process",
+ "args": [
+ "clean",
+ "${workspaceFolder}/YourBlazorApp/YourBlazorApp.csproj"
+ ],
+ "problemMatcher": "$msCompile"
+ }
+ ]
+}
+```
+
+#### Step 3: Launch Configuration for Blazor WASM
+
+Create the following `launch.json` file in your `.vscode` folder:
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Blazor WebAssembly",
+ "type": "coreclr",
+ "request": "launch",
+ "preLaunchTask": "build",
+ "program": "dotnet",
+ "args": [
+ "run",
+ "--project",
+ "${workspaceFolder}/YourBlazorApp/YourBlazorApp.csproj"
+ ],
+ "cwd": "${workspaceFolder}/YourBlazorApp",
+ "env": {
+ "ASPNETCORE_ENVIRONMENT": "Development",
+ "ASPNETCORE_URLS": "https://localhost:5001;http://localhost:5000"
+ },
+ "serverReadyAction": {
+ "action": "debugWithChrome",
+ "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
+ "webRoot": "${workspaceFolder}/YourBlazorApp/wwwroot"
+ },
+ "console": "integratedTerminal"
+ }
+ ]
+}
+```
+
+## Blazor WebAssembly Project Structure
+
+### Verify File Structure
+
+Your Blazor WebAssembly project structure should look like this:
+
+```
+YourSolution/
+├── .vscode/
+│ ├── tasks.json
+│ └── launch.json
+└── YourBlazorApp/
+ ├── Components/
+ ├── Pages/
+ ├── wwwroot/
+ ├── Program.cs
+ ├── App.razor
+ └── YourBlazorApp.csproj
+```
+
+## Running the Blazor WebAssembly Application
+
+### Build the Project
+
+Before running the application, build your project to ensure all dependencies are properly configured:
+
+```bash
+# Navigate to project directory
+cd YourBlazorApp
+
+# Build the project
+dotnet build
+
+# Restore packages if needed
+dotnet restore
+```
+
+### Running via Code Studio
+
+1. **Build Project:** Ensure all dependencies are properly configured before running
+2. **Select Launch Target:** Choose **Launch Blazor WebAssembly** from the dropdown
+3. **Start Application:** Use the **Run and Debug** panel or press `F5`
+
+### Running via Terminal
+
+**Terminal Commands:**
+```bash
+# Navigate to project directory
+cd YourBlazorApp
+
+# Run the application (starts development server)
+dotnet run
+
+# Development with hot reload (recommended for Blazor development)
+dotnet watch run
+
+# Run with HTTPS only
+dotnet run --urls="https://localhost:5001"
+```
+
+# Important Notes
+
+Before proceeding with running your web platform applications in Code Studio, please consider these critical points:
+
+## General Configuration
+- **File Structure:** The `.vscode` folder should be at the same level as your solution folder to ensure proper configuration loading.
+- **Relative Paths:** All file paths in the configuration files are relative to the workspace root. Ensure your workspace is properly set up.
+- **Project Name Matching:** The project name in configuration files must exactly match your `.csproj` file name. Any mismatch will cause build failures.
+
+## Video Tutorial
+
+For a comprehensive visual guide on web platform development and running applications, refer to Microsoft's official documentation and video tutorials.
+
+**ASP.NET Core Resources:**
+- [ASP.NET Core Development Documentation](https://docs.microsoft.com/aspnet/core/test/debugging)
+- [Entity Framework Core Logging](https://docs.microsoft.com/ef/core/logging-events-diagnostics/)
+- [ASP.NET Core Performance Best Practices](https://docs.microsoft.com/aspnet/core/performance/performance-best-practices)
+
+**Blazor WebAssembly Resources:**
+- [Microsoft Blazor WebAssembly Development Guide](https://docs.microsoft.com/aspnet/core/blazor/debug)
+- [Blazor WebAssembly Performance Best Practices](https://docs.microsoft.com/aspnet/core/blazor/webassembly-performance-best-practices)
+- [Chrome WebAssembly Developer Tools](https://developer.chrome.com/docs/devtools/)
\ No newline at end of file