Resource Mapping

Table of Contents

• Global vs. Per-Instance Mapping
• Mapping Types
  • Archive File Mapping
  • Local Folder Mapping
• How to Use
  • C++ Example (Per-Instance)
  • Blueprint Example (Per-Instance)
• API Reference

UCefView provides several methods for loading web resources, usually you just need to set the Url property to load the online or local file resource.

• Online Web Resource: By specifying a URL like https://....
• Local File: By providing a file:// path.

When you need to deploy a fully self-hosted web application (e.g., a Single Page Application built with React, Vue, or Angular), the Resource Mapping feature is incredibly useful.

Resource mapping allows you to map a local directory or a ZIP archive to a custom domain (e.g., https://my-app.local). Afterwards, you can navigate to this URL in UCefView to access your local resources as if they were a real online website.

Global vs. Per-Instance Mapping

UCefView provides two scopes for configuring resource mappings:

• Global Mapping:
  • Configured in Project Settings -> Cef Settings.
  • These mappings are loaded at application startup and apply to all UCefView and SCefView instances in your project.
  • Ideal for general-purpose web applications that need to be accessible throughout your project.
    

• Per-Instance Mapping:
  • Added dynamically via C++ or Blueprint to a single UCefView or SCefView instance.
  • The mapping only affects the specific WebView instance it's added to.
  • Suitable for loading temporary or context-specific web content in a particular UI.

Mapping Types

UCefView supports two types of local resource mappings: FArchiveFileResourceMapping and FLocalFolderResourceMapping.

Archive File Mapping

Maps a local ZIP archive to a URL. This is convenient for distributing and managing web resources as a single file.

For example, if you have a web-app.zip file with the following structure:

D:/packed-site/web-app.zip
                │
                ├── index.html
                ├── assets/
                └── img/

You can create an FArchiveFileResourceMapping to map https://my-app.local to this ZIP file. When you navigate to https://my-app.local/index.html, UCefView will serve the content from within the archive.

Local Folder Mapping

Maps a local folder to a URL. This is extremely useful during development, as it allows you to see changes to your web files instantly without needing to re-package them.

For example, if your web app's build output is in a local folder:

D:/dev/my-web-app/dist/
                │
                ├── index.html
                ├── assets/
                └── img/

You can create an FLocalFolderResourceMapping to map https://my-app.local to the D:/dev/my-web-app/dist/ directory.

Warning

Always provide an absolute path for the Path property. You can use the Convert to Absolute Path node in Blueprints or FPaths::ConvertRelativePathToFull in C++ to ensure correctness.

How to Use

C++ Example (Per-Instance)

// Get a pointer to your UCefView instance
UCefView* MyCefView = ...; 
 
// Add a folder mapping
FLocalFolderResourceMapping FolderMapping;
FolderMapping.Url = TEXT("https://my-dev-app.local");
FolderMapping.Path = TEXT("D:/dev/my-web-app/dist/"); // Absolute path is recommended
MyCefView->AddLocalFolderResource(FolderMapping);
 
// Add an archive mapping
FArchiveFileResourceMapping ArchiveMapping;
ArchiveMapping.Url = TEXT("https://packed-app.local");
ArchiveMapping.Path = TEXT("D:/packed-site/web-app.zip"); // Absolute path is recommended
MyCefView->AddArchiveFileResource(ArchiveMapping);
 
// Now you can load the mapped URL
MyCefView->LoadURL(TEXT("https://my-dev-app.local/index.html"));

Blueprint Example (Per-Instance)

You can also dynamically add resource mappings to a UCefView widget in Blueprints.

Blueprint Resource Mapping

API Reference

Scope	Type	Property / Function	Description
Global	Folder	UCefSettings::LocalFolderResourceMapping	Defines global folder mappings in Project Settings.
	Archive	UCefSettings::ArchiveFileResourceMapping	Defines global archive mappings in Project Settings.
	Folder	UCefContext::AddLocalFolderResource	Adds a global folder mapping at runtime.
	Archive	UCefContext::AddArchiveFileResource	Adds a global archive mapping at runtime.
Instance (UMG)	Folder	UCefView::LocalFolderResourceMapping	Defines per-instance folder mappings in the Details panel.
	Archive	UCefView::ArchiveFileResourceMapping	Defines per-instance archive mappings in the Details panel.
	Folder	UCefView::AddLocalFolderResource	Adds a folder mapping to a single UMG widget via Blueprint or C++.
	Archive	UCefView::AddArchiveFileResource	Adds an archive mapping to a single UMG widget via Blueprint or C++.
Instance (Slate)	Folder	SCefView::AddLocalFolderResource	Adds a folder mapping to a single Slate widget in C++.
	Archive	SCefView::AddArchiveFileResource	Adds an archive mapping to a single Slate widget in C++.