Yea, I know what you are thinking ? why the heck am I so bent on shipping my C++ code to the web, well just for the fun of it 🙂
Alright Alright, let me start from the very beginning 😁. Sometime in mid 2020 at the heat of the pandemic, I was at home and bored, so I decided to implement data structures and algorithm in C++, started with Bellman-ford algorithm to sorting algorithms then Dijkstra, but I wasn't satisfied, I wanted real life applications so I decided to take the Dijkstra's algorithm to the web using data gotten from mileage charts.
the mileage chart data was a csv file that looks like this
I wrote the Dijkstra's algorithm in C++ using cmake, it worked quite well, takes two strings as input and displays the shortest distance with paths to follow, you can see code here
A brief summary of steps I took to achieve this:
Read the csv file and convert it to a 2D table
convert the table to adjacency list
implement Dijkstra's algorithm on the adjacency list
The only problem I had was the fact that it was a command line application as shown
I wanted to ship it off to the web so bad, so I started researching for solutions
So fast forward to sometime in October 2021, I applied for Outreachy internship, during the contribution phase while trying to contribute to the Enarx project, I got introduced to web assembly, and I was like heck yea, this is what I need to complete my long lost Dijkstra's algorithm project !!
Okay... so how do we go about it ??, first was to setup my environment variable.
To compile C/C++ code to WebAssembly, I need a toolchain. This tool will be responsible for translating the code into WebAssembly format. To do that, I installed the Emscripten toolchain. It is an open-source project that can compile any portable C/C++ code into WebAssembly.
cd ~/ git clone https://github.com/emscripten-core/emsdk.git cd emsdk emsdk install latest emsdk activate latest
Add variables to PATH:
emsdk_env.bat (windows) source ./emsdk_env.sh (unix)
The updates that this makes to environment variables isn't persistent; it will need to be run again with the next reboot.
I created a build.sh file to make building easy for me
rm build/ -rf mkdir build cd build em++ ../src/Dijkstra.cpp -g -std=c++1z -s WASM=1 -s EXCEPTION_CATCHING_ALLOWED=[..] -o index.js || exit 1
emrun --port 8080 web/
This will create three files: index.js, index.wasm and index.html.
index.wasm - the compiled version of your program
index.html - an HTML page for hosting your WebAssembly
But note that index.html would not be recreated each time I rebuild.
Now, open the browser and access http://localhost:8080
The input will be gotten from the user from the front end (index.html) using Autocomplete function. see here
And Yes 😄, I finally shipped my Dijkstra's algorithm to the web, you can see full code on github
Top comments (1)
This is so great! Thanks for sharing.