Your C++ Already Runs in the Browser

Check out this Tetris clone.

Neat, right? It’s not JavaScript though, it’s a C++ project, using C++23 and raylib, cross compiled to WebAssembly with minimal effort and no code changes. The same app builds natively on MacOS, Windows, and Linux. The only difference is the target.

The CMakeLists for the project is really not that different from what it would be without the WebAssembly target. Here it is, with the added sections highlighted (uncollapse the lines above/below to see the whole file):


40 collapsed lines
1
cmake_minimum_required(VERSION 4.2.0)
2
project(minitetris LANGUAGES C CXX)
3

4
if (APPLE)
5
    enable_language(OBJC)
6
endif ()
7

8
set(CMAKE_C_STANDARD 23)
9
set(CMAKE_CXX_STANDARD 23)
10

11
# Generate compile_commands.json
12
set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
13

14

15
# Assets
16
set(RESOURCES_DIR "${CMAKE_SOURCE_DIR}/resources")
17
set(RESOURCES_OUTPUT_DIR "${CMAKE_BINARY_DIR}/resources")
18

19
add_custom_target(copy_resources ALL COMMAND ${CMAKE_COMMAND} -E copy_directory
20
                  "${RESOURCES_DIR}" "${RESOURCES_OUTPUT_DIR}" COMMENT
21
                  "Copying resources to the build directory...")
22

23
# Dependencies
24
include(cmake/fetch_raylib.cmake)
25

26
set(
27
    SRCS
28

29
    src/Text.cc
30
    src/Tetris.cc
31
    src/Timing.cc
32
)
33

34
include_directories(${CMAKE_SOURCE_DIR}/include)
35

36
add_executable(${PROJECT_NAME} main.cc ${SRCS})
37

38
target_link_libraries(${PROJECT_NAME} raylib)
39
target_compile_options(${PROJECT_NAME} PRIVATE -Wno-c23-extensions)
40

41
if (EMSCRIPTEN)
42
    set_property(TARGET raylib PROPERTY INTERFACE_LINK_OPTIONS "-sUSE_GLFW=3")
43

44
    set(CMAKE_EXE_LINKER_FLAGS
45
        "${CMAKE_EXE_LINKER_FLAGS} \
46
        -s ASSERTIONS=1 \
47
        -s WASM=1 \
48
        -s ASYNCIFY \
49
        -s GL_ENABLE_GET_PROC_ADDRESS=1 \
50
        -s EXPORTED_RUNTIME_METHODS=['ccall','requestFullscreen','HEAPF32'] \
51
        -s SINGLE_FILE=1 \
52
        -s ALLOW_MEMORY_GROWTH=1")
53
    set(CMAKE_EXECUTABLE_SUFFIX ".js")
54

55
    target_compile_definitions(${PROJECT_NAME} PRIVATE PLATFORM_WEB=1)
56

57
    set(DEST_DIR "${CMAKE_SOURCE_DIR}/web/resources")
58

59
    add_custom_command(
60
        TARGET ${PROJECT_NAME} POST_BUILD
61
        COMMAND ${CMAKE_COMMAND} -E make_directory "${DEST_DIR}"
62
        COMMAND ${CMAKE_COMMAND} -E copy_if_different
63
                ${PROJECT_NAME}.js
64
                "${DEST_DIR}"
65
        WORKING_DIRECTORY "${CMAKE_BINARY_DIR}"
66
        COMMENT "Copying Web output files to web/resources"
67
    )
68
endif()
20 collapsed lines
69

70
if (APPLE)
71
    target_link_libraries(${PROJECT_NAME} "-framework CoreVideo")
72
    target_link_libraries(${PROJECT_NAME} "-framework IOKit")
73
    target_link_libraries(${PROJECT_NAME} "-framework Cocoa")
74
    target_link_libraries(${PROJECT_NAME} "-framework OpenGL")
75
    target_link_libraries(${PROJECT_NAME} "-framework GLUT")
76
endif()
77

78
add_custom_target(run
79
    COMMAND ${PROJECT_NAME}
80
    DEPENDS ${PROJECT_NAME}
81
    COMMENT "Running app"
82
)
83

84
add_custom_target(web COMMAND ${CMAKE_COMMAND} --build
85
                  ${CMAKE_SOURCE_DIR}/build-web COMMAND ${CMAKE_COMMAND} -E
86
                  copy ${CMAKE_SOURCE_DIR}/build-web/${PROJECT_NAME}.js
87
                  ${CMAKE_SOURCE_DIR}/web/resources/ WORKING_DIRECTORY
88
                  ${CMAKE_SOURCE_DIR})

This section does the following:

Sets CMake linker flags
Sets ASYNCIFY (which rewrites every code path to be pausable and resumable). This increases the binary size.
Tells emscripten that we want a single JS file as output, which lets us easily embed it into a browser from a CDN or storage bucket. This embeds the WASM directly in the JavaScript, which increases the size of the output file but makes usage extremely convenient.
The last command just tells CMake to drop the final WASM file into an output directory of your choosing.

Whenever I want to create a game that I want to be playable in a browser, or tool that requires something other than JavaScript, I reach for this. It’s a pretty good setup, and if you need filesystem access, there are ways to do it (such as via IndexedDB, or even through a remote filesystem).

You can find the full source code here or you can click “Source” in the caption of the game.

Thanks for reading, see you next time.