Is there any way to host SPA without local port?

[GiantappMan]

for example， I built a SPA by NUXTJS.
I want to host it in webview2 but don't open any local ports.

I can do this in electron. is there any way to do the same thing in webview2, thanks

  mainWindow.loadURL(url.format({
    pathname: 'index.html',    /* Attention here: origin is path.join(__dirname, 'index.html') */
    protocol: 'file',
    slashes: true
  }))

app.on('ready', () => {
  protocol.interceptFileProtocol('file', (request, callback) => {
    const url = request.url.substr(7)    /* all urls start with 'file://' */
    let p = path.normalize(`${__dirname}/dist/${url}`);
    console.log("test", p);
    callback({ path: p })
  }, (err) => {
    if (err) console.error('Failed to register protocol')
  })
  createWindow()
})

[champnic]

Hey @DaZiYuan - Unfortunately I'm unfamiliar with "SPA" or "NUXTJS". Is there a specific capability you need from the WebView2? Can you highlight which part of the code you posted is not working or you need support for? Thanks!

[GiantappMan]

Hi @champnic,
here is a Single Page App, you can see it works correctly in localhost:5500.

but don't work in file protocol file:///C:/xx/Single-page-application/build/index.html

I just want to know if there is a way can host SPA in webview2 but don't open any local port just like the way in electron.

 protocol.interceptFileProtocol('file', (request, callback) => {
    const url = request.url.substr(7)    /* all urls start with 'file://' */
    let p = path.normalize(`${__dirname}/dist/${url}`);
    console.log("test", p);
    callback({ path: p })
  }, (err) => {
    if (err) console.error('Failed to register protocol')
  })

[champnic]

Do you just want to load files from a location on disk? You can see if SetVirtualHostNameToFolderMapping works here:
https://docs.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2.setvirtualhostnametofoldermapping?view=webview2-dotnet-1.0.1150.38

[GiantappMan]

Thanks, works perfectly

        public MainWindow()
        {
            InitializeComponent();

            webview2.CoreWebView2InitializationCompleted += Webview2_CoreWebView2InitializationCompleted;
            webview2.Source = new Uri("https://appassets.example/index.html");
        }

        private void Webview2_CoreWebView2InitializationCompleted(object? sender, CoreWebView2InitializationCompletedEventArgs e)
        {
            webview2.CoreWebView2.SetVirtualHostNameToFolderMapping(
  "appassets.example", "build", CoreWebView2HostResourceAccessKind.DenyCors);
        }

[champnic]

Glad you got it working! :)