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.
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
- 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:
- 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).
- 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.
If you used the WebAssembly sample application, extract all its files to the Web application project location.
- Refresh the Web application project by clicking it in the Project Explorer and pressing F5.
- 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:
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.
Note : Running and debugging Web application projects works the same way for both regular (HTML+JS only) and WebAssembly-enabled projects.