Code Monkey home page Code Monkey logo

webassembly-workflow's Introduction

WebAssembly workflow

Build Status JS: Coverage Status C++ codecov

This is a project shell to use for starting new WebAssembly projects. The workflow has been configured with task runners for packaging JavaScript files, to compile C++ with emscripten, and to minify both.

Read more

Medium article with set-up instructions, and some suggestions for alternatives:

https://medium.com/@DanRuta/setting-up-the-ultimate-webassembly-c-workflow-6484efa3e162

JavaScript unit tests were set up with Mocha+Chai, and with sinon (and sinon-chai) for mocking. C++ unit testss were set up with google test, with the included google mock for mocking.

Travis was configured for CI, and test coverage is reported to Coveralls for JavaScript and to Codecov for C++.

Setting it all up

Make sure to clone the repo recursively, in order to get the Google Test framework.

git clone --recursive https://github.com/DanRuta/webassembly-workflow.git

When finished, run npm run build. This will build the project into a build folder, and it will also install all the npm dependencies.

Note:

If not using Windows, make sure to tweak the package.json commands. Specifically, remove the -G\"MSYS Makefiles\" flag from the build script, and change cpp-tests to ./cpp-tests in the cpp-tests script (thanks @Ckimchris).

Make sure to run this through MinGW if using Windows

Developing

Run grunt in a separate terminal (can be cmd in Windows, doesn't matter). When you save a JavaScript dev file, all files will be merged and minified. When you save a C++ dev file, they will be compiled to WebAssembly using emscripten.

I've included some sample code as a tiny app that serves to show how it all gets built.

To get WebAssembly to run in the browser, you must serve it via a server. Just run node server to use the included one and go to localhost:1337 in the browser. I've also included a tiny node-demo.js file to show how WebAssembly might be loaded into a nodejs environment.

Make sure to install emscripten first, at "C:/emsdk". If you've installed it elsewhere, or have installed it globally, just change the path in the gruntfile.

Contributing

I've tried to make this as easy as possible to use, with as little set up as possible, while keeping it Windows friendly. If there are ways to improve it, or if there are really useful things that can be added, I'd be glad to accept feedback and / or pull requests.

One thing I was not able to get done in the time I had for this, but would be awesome to have, was seeing the C++ test coverage while developing (It can only be seen on codecov), due to how messy it was to set up gcov/lcov on Windows.

webassembly-workflow's People

Contributors

danruta avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

webassembly-workflow's Issues

npm run build -> Trojan:Win32/Fuery.B!cl

When running "npm run build":
"build": "rm -rf build && mkdir build && cd build && cmake -G"MSYS Makefiles" .. && npm install"

The cmake command generates a.exe. However, it's immediately removed by Windows Defender, which detects it as Trojan:Win32/Fuery.B!cl, and then "npm run build" fails of course.

I was doing some Googling around and you might need to add signing to prevent it from being detected as a false positive in Windows Defender.

BTW, I'm not able to turn off or add exceptions to Windows Developer because the security policies are controlled by the Windows domain admins.

applicationframehost_2018-06-25_05-48-58

cpp testing

I wanted to try out your cpp testing and found this command in your package.json.
"cpp-tests": "cd ./build && make && cpp-tests",
But as soon as it reaches cpp-tests it throws an error saying "sh: cpp-tests: command not found"

Is there something missing in my understanding of the script?

Seeing C++ test coverage while developing

Currently, test coverage has only been set up in CI. I've not found a straightforward way to set it up so it's easy to use with minimal extra work from the repo (or to make it Windows friendly).

Compiling a C++ project

Hi Dan, I am new to Emscripten and WebAssembly

I would like to use your project to compile to a C++ project so it can work on the web, however I couldn't manage to do it, can this webassembly workflow be used to compile the following project?

https://github.com/snes9xgit/snes9x or
https://github.com/snes9xgit/snes9x/tree/master/win32

I can't figure out where to start from, I have Emscripten installed but cannot find /configure directory or any cmake file.

Can you help me?

Many thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.