Wasm Builders

Cover image for Let's Bring C++ to Browser
Kirtee Prajapati
Kirtee Prajapati

Posted on • Updated on

Let's Bring C++ to Browser

In the last post, we compiled C/C++ code with gcc and wasmenv compiler, now I'll be demonstrating how to compile your C/C++ code so that you can get your output in the browser itself!
Yus we'll use clang and LLVM embedded in Emscripten Compiler Frontend (emcc) compiles to WebAssembly

Let's see how.

Emscripten

: compiler toolchain to WebAssembly.

  • Compile C and C++ code, or any other language that uses LLVM, into WebAssembly, and run it on the Web, Node.js, or other wasm runtimes.
  • Generates small and fast code! Its default output format is WebAssembly
  • Emscripten Compiler Frontend (emcc) uses Clang and LLVM to compile to WebAssembly.
  • Emcc also emits JavaScript that provides API support to the compiled code. that further can be executed by Node.js, or from within HTML in a browser.
  1. Install Emscripten SDK

This installs the entire toolchain, including emcc and LLVM. works for Linux, Windows, and macOS.

  • Get the emsdk repo
$ git clone https://github.com/emscripten-core/emsdk.git
Enter fullscreen mode Exit fullscreen mode
  • Enter that directory
$ cd emsdk
Enter fullscreen mode Exit fullscreen mode

.

Linux and MacOS:

Run the following emsdk commands to get the latest tools from GitHub and set them as active:

  • Fetch the latest version of the emsdk (not needed the first time you clone)
$ git pull
Enter fullscreen mode Exit fullscreen mode
  • Download and install the latest SDK tools.
$ ./emsdk install the latest
Enter fullscreen mode Exit fullscreen mode
  • Make the "latest" SDK "active" for the current user. (writes .emscripten file)
$ ./emsdk activate latest
Enter fullscreen mode Exit fullscreen mode
  • Activate PATH and other environment variables in the current terminal it can differ for you better check the terminal for the suggestion.

Image description

$ source ./emsdk_env.sh
Enter fullscreen mode Exit fullscreen mode

It is recommended to have file names without blank spaces if it is so then rename them!
otherwise, it'll through error as `No such file or directory

Image description

To update the list of tags directly.

$ ./emsdk update-tags

Windows Subsystem for Linux

check the above explanation to understand the flow

$ git pull
$ emsdk install latest
$ emsdk activate latest
$ emsdk update-tags

If already done with activation then this command is optional

$ emsdk_env.bat

For Windows and macOS Install Python 3.6 or newer

(older versions may not work due to a GitHub change with SSL).

Once you are done installing it's all set now you can run your app on the browser

create a folder name Star.cpp or any name of your choice but don't forget to use that name in the command below keeping case sensitivity in mind.


$ emcc Star.cpp -o Star.html -s WASM=1

the simplest method to execute on the server is through python by running the below command.


$ python3 -m http.server 8080

this will run you online web app on port http://0.0.0.0:8080/
Image description

So you can see your cpp program running on the browser. just like that.
Image description

Image description

References:
For printng pattern guide https://www.javatpoint.com/star-program-in-c
Emscripten https://emscripten.org/docs/introducing_emscripten/index.html

Discussion (0)