Embedding HTML5 build in a React.js component


I’m trying to figure out how to embed the webassembly build in a react component, and do so without requiring webpack configuration so it’s create-react-app and gatsby compatible and without any hacky solution.

I would eventually like to make a module that makes it easy for others to do this, and release it to the community, if there’s interest.

Are there any caveats I need to consider? Is what I’m trying to do impossible?



I think it should be possible to achieve. I do recall someone creating a script to pack everything into a single html file for playable ads.




Ok. So it looks like a quick tweak to the dmloader file and it will expose the Module object and allow me to include it easily into a component. Webpack then handles this just fine with default configs.

Lazy loading is a must, in this situation, or the React bundle size would be huge.

In this situation, loading the game data from network is permissible. For threading and efficiency reasons, it might be best to serve those files from a different service.

The code indicates that either the asmjs file gets loaded or the wasm.js file gets loaded, depending on browser. I’m guessing that the wasm.js file loads the rest of the game from the .wasm file while the asmjs file has the entire game embedded in it. What does the archive folder do?



It turns out that these considerations are a pain in the neck. I’m switching gears to try with webpack now.

1 Like