mbasso/asm-dom-boilerplate

A simple boilerplate to start using asm-dom without configuration.

asm-dom-boilerplate

A simple boilerplate to start using asm-dom without configuration. This includes:

• asm-dom
• CPX support: JSX like syntax in C++
• parcel-bundler (npm i --save-dev [email protected])
• autoprefixer

The boilerplate automatically compiles C++ code to WebAssembly and asm.js, the client will dinamically require the first if supported, the second otherwise.

Prerequisites

• node
• npm
• make
• emcc
• java

Please make sure to have emcc set as an environment variable and the lastest version of node to make parcel work. So, to validate the installation, please run the following commands:

node -v
npm -v
make -v
emcc -v
java -version

Getting started

Clone and install dependencies:

git clone https://github.com/mbasso/asm-dom-boilerplate.git
cd asm-dom-boilerplate
npm install # or make install

# if you are using windows, you have to make a little change to the Makefile in the root of the project, just open it and follow the instructions at the top

npm start # or make start

Then open http://localhost:1234 to see the example app. You can now edit index.cpp and rerun npm start to recompile and see the changes.

Building for Production

# just run:
make

This will compile your C++ and copy your index.html to the dist folder which you can deploy.

Makefile

By default the boilerplate preprocess the .cpp files in the src folder with gccx and automatically includes them when compiling. If you want to include external dependencies or add some C flags, you can modify the Makefile in the root of the project.

CSS

Parcel uses PostCSS plugins to manage CSS assets. The boilerplate includes autoprefixer for vendor prefixing, you can find and modify the PostCSS setup in .postcssrc.

Authors

Matteo Basso

• github/mbasso
• @teo_basso

Copyright and License

Copyright (c) 2018, Matteo Basso.

asm-dom-boilerplate source code is licensed under the MIT License.

asm-dom-boilerplate's Issues

nothing renders

I followed the instructions to build and run the application. Everything seems to build properly but when I run the command "npm start" localhost:1234/ loads with a blank html page.
When I inspect the page it only has one empty div element with the "root" ID.
I am new to wasm so I'm not sure if this is the expected behavior.

If it is, then how do I display dom elements from the C++ file?

Thanks.

build fail `linker flag ignored during compilation: '--bind'`

$ npm start

> [email protected] start
> make start

npx gccx src/index.cpp -o src/index.cc


src/index.cpp -> src/index.cc
emcc \
                -O3 -Wall -Werror -Wall -Wno-deprecated -Wno-parentheses -Wno-format \
                --bind \
                -MMD -MP -MF temp/dep/index.d \
                -include node_modules/asm-dom/cpp/asm-dom.hpp \
                -c src/index.cc \
                -o temp/o/index.o
emcc: error: linker flag ignored during compilation: '--bind' [-Wunused-command-line-argument] [-Werror]
make: *** [temp/o/index.o] Error 1
rm src/index.cc

Not working (ubuntu)

I just tried to compile and run your project, nothing renders and it put out this error:

ryan@ryan-ubuntu:~/Developer/asm-dom-boilerplate$ npm start

> [email protected] start /home/ryan/Developer/asm-dom-boilerplate
> make start

npx concurrently \
	-p "[{name}]" \
	-n "Parcel,Make" \
	-c "bgGreen.bold,bgBlue.bold" \
	"npx cross-env NODE_ENV=development parcel index.html --open" \
	"nodemon --exec \"make dist/wasm dist/asmjs\""
[Make] [nodemon] 1.17.4
[Make] [nodemon] reading config ./nodemon.json
[Make] [nodemon] to restart at any time, enter `rs`
[Make] [nodemon] or send SIGHUP to 8719 to restart
[Make] [nodemon] ignoring: ./.git/**/* ./glue/**/* ./dist/**/* ./.cache/**/* ./temp/**/* node_modules/**/node_modules
[Make] [nodemon] watching: /home/ryan/Developer/asm-dom-boilerplate/src/**/*
[Make] [nodemon] watching extensions: c,cpp,h,hpp
[Make] [nodemon] starting `make dist/wasm dist/asmjs`
[Make] [nodemon] spawning
[Make] [nodemon] child pid: 8742
[Make] make[1]: Entering directory '/home/ryan/Developer/asm-dom-boilerplate'
[Make] make[1]: 'dist/wasm' is up to date.
[Make] make[1]: 'dist/asmjs' is up to date.
[Make] make[1]: Leaving directory '/home/ryan/Developer/asm-dom-boilerplate'
[Make] [nodemon] clean exit - waiting for changes before restart
[Make] [nodemon] watching 3 files
[Parcel] Server running at http://localhost:1234 
⏳  Building index.js...
events.js:183
[Parcel]       throw er; // Unhandled 'error' event
[Parcel]       ^
[Parcel] 
[Parcel] Error: watch /home/ryan/Developer/asm-dom-boilerplate/node_modules/pause-stream/test/index.js ENOSPC
[Parcel]     at _errnoException (util.js:1024:11)
[Parcel]     at FSWatcher.start (fs.js:1374:19)
[Parcel]     at Object.fs.watch (fs.js:1400:11)
[Parcel]     at createFsWatchInstance (/home/ryan/Developer/asm-dom-boilerplate/node_modules/parcel-bundler/node_modules/chokidar/lib/nodefs-handler.js:37:15)
[Parcel]     at setFsWatchListener (/home/ryan/Developer/asm-dom-boilerplate/node_modules/parcel-bundler/node_modules/chokidar/lib/nodefs-handler.js:80:15)
[Parcel]     at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/ryan/Developer/asm-dom-boilerplate/node_modules/parcel-bundler/node_modules/chokidar/lib/nodefs-handler.js:232:14)
[Parcel]     at FSWatcher.NodeFsHandler._handleFile (/home/ryan/Developer/asm-dom-boilerplate/node_modules/parcel-bundler/node_modules/chokidar/lib/nodefs-handler.js:259:21)
[Parcel]     at FSWatcher.<anonymous> (/home/ryan/Developer/asm-dom-boilerplate/node_modules/parcel-bundler/node_modules/chokidar/lib/nodefs-handler.js:480:21)
[Parcel]     at FSReqWrap.oncomplete (fs.js:153:5)
[Parcel] npx cross-env NODE_ENV=development parcel index.html --open exited with code 1

Also just to make sure:

ryan@ryan-ubuntu:~/Developer/asm-dom-boilerplate$ make -v
GNU Make 4.1
Built for x86_64-pc-linux-gnu
Copyright (C) 1988-2014 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
ryan@ryan-ubuntu:~/Developer/asm-dom-boilerplate$ node -v
v8.9.1
ryan@ryan-ubuntu:~/Developer/asm-dom-boilerplate$ npm -v
6.4.0
ryan@ryan-ubuntu:~/Developer/asm-dom-boilerplate$ make -v
GNU Make 4.1
Built for x86_64-pc-linux-gnu
Copyright (C) 1988-2014 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
ryan@ryan-ubuntu:~/Developer/asm-dom-boilerplate$ emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.38.11
clang version 6.0.1  (emscripten 1.38.11 : 1.38.11)
Target: x86_64-unknown-linux-gnu
Thread model: posix
InstalledDir: /home/ryan/Developer/emsdk/clang/e1.38.11_64bit
Found candidate GCC installation: /usr/lib/gcc/i686-linux-gnu/8
Found candidate GCC installation: /usr/lib/gcc/i686-linux-gnu/8.0.1
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/6
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/6.4.0
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/7
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/7.3.0
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/8
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/8.0.1
Selected GCC installation: /usr/lib/gcc/x86_64-linux-gnu/7.3.0
Candidate multilib: .;@m64
Selected multilib: .;@m64
INFO:root:(Emscripten: Running sanity checks)

Any help would be appreciated. Would really like to try making a page in C++.

Java is Required

I followed the getting started instructions in the readme.
And got the following error:

WARNING:root:java does not seem to exist, required for closure compiler, which is optional (define JAVA in /home/danielsokil/.emscripten if you want it)
ERROR:root:fatal: closure compiler is not configured correctly
Makefile:104: recipe for target 'dist/wasm' failed
make: *** [dist/wasm] Error 1
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `make start`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/danielsokil/.npm/_logs/2018-09-19T00_44_50_521Z-debug.log

After installing sudo apt-get install default-jdk Java, npm start is successful.

Decrease JavaScript size

What can we do to bundle all JavaScript files into one?

From what I understand src.*.js is the main runtime, wasm.*.js loads the app.*.js which loads the *.wasm file.
What can we do to bundle this into 1 file?
Wouldn't it be simpler if app*.js loaded the wasm or asm.js file?

Production build fails

Here are the errors I get when trying to serve dist/ folder after a successful build.

Failed to generate LLVM bitcode

I tried running the boilerplate on Windows 10. Running npm start getting this error:

> make start

Access denied - SRC
File not found - -NAME
emcc \
        -O3 -Wall -Werror -Wall -Wno-deprecated -Wno-parentheses -Wno-format \
        --bind \
        -include node_modules/asm-dom/cpp/asm-dom.hpp \
         \
        node_modules/asm-dom/cpp/asm-dom.cpp \
        -o temp/app.bc
error: unable to open output file 'temp/app.bc': 'no such file or directory'
1 error generated.
ERROR:root:compiler frontend failed to generate LLVM bitcode, halting

I ran the command in Administrator command prompt. So Access denied shouldn't be the problem.

Node: 8.9.4
npm: 5.6.0
emcc: 1.37.38
GNU make: 4.2

Cannot run production build; Uncaught Syntax Error: Unexpected String

make doesn't work.
I cannot run the generated production build. (dist directory)
npm start works normally, however.

Picture of the error:

My environment:
Mac OS 10.13
node v10.9.0
npm v6.2.0
GNU Make v3.81
java -version
java version "1.8.0_77"
Java(TM) SE Runtime Environment (build 1.8.0_77-b03)
Java HotSpot(TM) 64-Bit Server VM (build 25.77-b03, mixed mode)
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.38.11
clang version 6.0.1 (emscripten 1.38.10 : 1.38.10)
Target: x86_64-apple-darwin17.7.0
Thread model: posix
InstalledDir: (...)/emsdk/clang/e1.38.10_64bit
ERROR:root:Emscripten, llvm and clang repo versions do not match, this is dangerous (1.38.11, 1.38.10, 1.38.10)
ERROR:root:Make sure to use the same branch in each repo, and to be up-to-date on each. See http://kripken.github.io/emscripten-site/docs/building_from_source/LLVM-Backend.html
INFO:root:(Emscripten: Running sanity checks)

Steps to reproduce

just run make on my environment, I guess.

Versions

• asm-dom: cloned yesterday
• Browser: tried on both Google Chrome 70.0.3538.67 and Brave 0.25.2

Build failing

Hi, me again. :-) I'm trying to use this as a basis for the asmdom::direct example that we discussed (since the instructions are so clear here). I got up to the npm start instruction, and it is failing with this error:

$ npm start

> [email protected] start /home/tmadden/local-dev/asm-dom-boilerplate
> make start

emcc \
        -O3 -Wall -Werror -Wall -Wno-deprecated -Wno-parentheses -Wno-format \
        --bind \
        -include node_modules/asm-dom/cpp/asm-dom.hpp \
        temp/o/index.o \
        node_modules/asm-dom/cpp/asm-dom.cpp \
        -o temp/app.bc
emcc: error: Assuming object file output in the absence of `-c`, based on output filename. Add with `-c` or `-r` to avoid this warning [-Wemcc] [-Werror]

I'm not that familiar with .bc files, but it seems maybe recent versions of Emscripten behave differently than what this was developed against? I'm using Emscripten 1.40.1.

I tried adding -c, but then it just gave a different error, and it seems like that's probably not the right direction, so I decided it was time to consult the expert. ;-)

Hot Reloading

I was planing to do something with just raw emcc complier and C++ but then I found this project. Its amazing.

I think at the very least Ho Reloading is very important for anyone coming from Web background to this project if not Hot Module Replacement.

I know C++ is a different universe then the whole JS things but I've worked with ASP.NET Core in C# and they got Hot Reloading and somewhat HMR too, So maybe in theory it can be done with C++.

If it can be implemented it be huge thing for this project.