Skip to main content

Basics


Installation

git clone https://github.com/emscripten-core/emsdk.git \
&& cd emsdk
./emsdk install 3.0.0
./emsdk activate 3.0.0
source ./emsdk_env.sh

Setup

<package>/
├── CMakeLists.txt
├── c_src/
│ ├── funcs.cpp
│ ├── funcs.h
│ └── <target>.cpp
└── test/
└── ...
CMakeLists.txt
cmake_minimum_required(VERSION 3.15)
set(PROJECT_NAME "<target>")
project(${PROJECT_NAME} LANGUAGES CXX)

set(TARGET_NAME "${PROJECT_NAME}")

set(SOURCE
"c_src/funcs.cpp"
"c_src/<target>.cpp"
)

add_executable(${TARGET_NAME} ${SOURCE})

target_link_options(${TARGET_NAME} PUBLIC "--bind")

Wrapper

c_src/funcs.h
#pragma once

#include <string>

std::string hello(void);
int add(int a, int b);
c_src/funcs.cpp
#include "funcs.h"

std::string hello(void) { return "Hello World!"; }

int add(int a, int b) { return a + b; }
c_src/<target>.cpp
#include "funcs.h"

#include <emscripten/bind.h>

using namespace emscripten;

EMSCRIPTEN_BINDINGS(my_module) {
function("hello", &hello);
function("add", &add);
}

Build

emcmake cmake -S . -B build
cmake --build build -j$(expr $(expr $(nproc) \* 6) \/ 5)
<package>/
├── build/
│ ├── <target>.js
│ ├── <target>.wasm*
│ └── ...
└── ...

Test

test/test.html
<!DOCTYPE html>
<html>
<script>
var Module = {
onRuntimeInitialized: function () {
document.body.innerHTML = `<div>${Module.hello()}</div>
<div>1 + 2 = ${Module.add(1, 2)}</div>`;
},
};
</script>
<script src="../build/target.js"></script>

<body></body>
</html>

Reference