Screenshot

JS directive sample

This app shows how to use @js directive in DotVVM 4.1.

Prerequisites

How to run the sample

  1. Open the GitHub repo in Visual Studio or git clone https://github.com/riganti/dotvvm-samples-js-integration.git

  2. Open JsIntegrationDemo.sln Open the solution file

  3. Claim your API key in Google Cloud Console

  4. Right-click on JsIntegrationDemo project and select Manage User Secrets. Change the file contents to this:

{
  "GoogleMaps": {
    "apiKey": "xxx"
  } 
}
  1. Right-click the JsIntegrationDemo project and select View > View in Browser View JsIntegrationDemo in Browser

Rollup sample

  1. Navigate to src/JsIntegrationDemo-Rollup directory and run the following scripts:
npm install
npm run build
  1. Right-click the JsIntegrationDemo-Rollup project and select View > View in Browser

Webpack sample - NOT WORKING

The Webpack sample is currently not working. Right now, Webpack cannot output ES6 modules which are the only format supported by DotVVM 3.0.

We expect to extend the support for other module formats in the next versions of DotVVM.

What you can learn in the sample

  • How to use @js directive in DotVVM
  • How to call functions in the JS module from DotVVM
  • How to invoke DotVVM commands from JS module
  • How to use SignalR in a DotVVM app

Other resources