Adding Existing WebAssembly Modules to Web Applications

This topic describes how to add already existing WebAssembly modules and their accompanying files to a Web application project.

Prerequisites

To embed an existing, working WebAssembly (WASM) application into a Web application, you need the following:

  • Compiled WASM modules (".wasm")
  • WASM source mappings (".wasm.map" files) - required for source level debugging only
  • JavaScript code corresponding to the WASM modules - either generated by the Samsung Emscripten SDK or by hand
  • HTML code in which the modules are embedded

You can use this example WebAssembly application as a WebAssembly module reference.

Embedding WebAssembly Modules in Web Applications

To embed a WebAssembly module in your Web application project:

  1. Create a new Web application project if needed (it does not have to be a WebAssembly-enabled project since there is no C/C++ source code to build).
  2. Copy all of the WASM module files to the Web application project. To find the project's location:
    • Right-click the project and select "Properties"
    • Click "Resource" in the project's properties tree
    • Check the "Location" property.
      Figure 1. Check project's location

If you used the WebAssembly sample application, extract all its files to the Web application project location.

  1. Refresh the Web application project by clicking it in the Project Explorer and pressing F5.
  2. Make sure that the <content src="index.html"/> tag in the "config.xml" file points to an HTML file that either embeds the WASM modules directly or refers other HTML/JS files that do that.
    For the WebAssembly sample application the tag must read: <content src="hello.html"/>

Once all the required files are in place, you can run the Web application to verify that it works properly. For more information, see Running WebAssembly Applications.