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 that directory

$ cd emsdk

.

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

• Download and install the latest SDK tools.

$ ./emsdk install the latest

• Make the "latest" SDK "active" for the current user. (writes .emscripten file)

$ ./emsdk activate latest

• Activate PATH and other environment variables in the current terminal it can differ for you better check the terminal for the suggestion.

$ source ./emsdk_env.sh

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

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/

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

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