Integrate Emscripten in Clion

Question

I am recently working on a project which includes the use of Emscripten. I am able to install and run some examples on terminal, but I want to integrate it with Clion so that I can directly include emscripten to my main project and build it. I tried to add the directory to the CMakeList but while building it has errors. Can anyone help me to get the appropriate way to integrate Emscripten into the Clion or any suggestion of what to include in the CMakeList. Any help will be appreciated. Thank you for your precious time.

I included these lines in the CMakeList of my demo project:

cmake_minimum_required(VERSION 3.12)

project(projectShell)

set(CMAKE_CXX_STANDARD 14)
if (${CMAKE_SYSTEM_NAME} MATCHES "Emscripten")
set(CMAKE_C_COMPILER "emcc")
endif ()
include_directories(include/rapidjson)
include_directories(/home/myfastcomp/emscripten/emscripten/system/include 
)
add_executable(projectShell main.cpp library.cpp library.h)
if (${CMAKE_SYSTEM_NAME} MATCHES "Emscripten")
set_target_properties(projectShell PROPERTIES LINK_FLAGS "-o 
dist/projectShell.js -s USE_FREETYPE=1 -s DISABLE_EXCEPTION_CATCHING=0 -s DEMANGLE_SUPPORT=1 -s SAFE_HEAP=1 --bind -s WASM=1 -O2 -s LEGACY_GL_EMULATION=0  -s GL_UNSAFE_OPTS=0 --pre-js pre-module.js --post-js post-module.js -s ASSERTIONS=1 -s GL_ASSERTIONS=1 -s INVOKE_RUN=0  -std=c++11 -s USE_WEBGL2=1 -s FULL_ES3=1 -s USE_GLFW=3 -s OFFSCREENCANVAS_SUPPORT=1 --preload-file textures --preload-file shaders --preload-file fonts")
endif()

Here are the errors:

In file included from /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL_config.h:45:0,
             from /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL_stdinc.h:31,
             from /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL_main.h:25,
             from /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL.h:72,
             from /home/myfastcomp/emscripten/emscripten/system/include/emscripten/emscripten.h:27,
             from /home/myfastcomp/emscripten/emscripten/system/include/emscripten.h:1,
             from /home/CLionProjects/projectShell/library.h:8,
             from /home/CLionProjects/projectShell/library.cpp:5:
             /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL_config_minimal.h:3 7:22: error: conflicting declaration ‘typedef unsigned int size_t’
             typedef unsigned int size_t;
                  ^~~~~~
             In file included from /usr/include/stdio.h:33:0,
             from /home/myfastcomp/emscripten/emscripten/system/include/emscripten/emscripten.h:24,
             from /home/myfastcomp/emscripten/emscripten/system/include/emscripten.h:1,
             from /home/CLionProjects/projectShell/library.h:8,
             from /home/CLionProjects/projectShell/library.cpp:5:
             /usr/lib/gcc/x86_64-linux-gnu/7/include/stddef.h:216:23: note: previous declaration as ‘typedef long unsigned int size_t’
             typedef __SIZE_TYPE__ size_t;
                   ^~~~~~
             In file included from /usr/include/x86_64-linux-gnu/sys/types.h:156:0,
             from /usr/include/stdlib.h:394,
             from /usr/include/c++/7/cstdlib:75,
             from /usr/include/c++/7/stdlib.h:36,
             from /usr/lib/gcc/x86_64-linux-gnu/7/include/mm_malloc.h:27,
             from /usr/lib/gcc/x86_64-linux-gnu/7/include/xmmintrin.h:34,
             from /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL_cpuinfo.h:59,
             from /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL.h:78,
             from /home/myfastcomp/emscripten/emscripten/system/include/emscripten/emscripten.h:27,
             from /home/hottab/myfastcomp/emscripten/emscripten/system/include/emscripten.h:1,
             from /home/CLionProjects/projectShell/library.h:8,
             from /home/CLionProjects/projectShell/library.cpp:5:
             /usr/include/x86_64-linux-gnu/bits/stdint-intn.h:27:19: error: conflicting declaration ‘typedef __int64_t int64_t’
              typedef __int64_t int64_t;
               ^~~~~~~
              In file included from 
              /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL_config.h:45:0,
             from /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL_stdinc.h:31,
             from /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL_main.h:25,
             from /home/myfastcomp/emscripten/emscripten/system/include/SDL/SDL.h:72,
             from /home/myfastcomp/emscripten/emscripten/
             system/include/emscripten/emscripten.h:27,
             from /home/myfastcomp/emscripten/emscripten/
             system/include/emscripten.h:1,
             from /home/CLionProjects/projectShell/library.h:8,
             from /home/CLionProjects/projectShell/library.cpp:5:
             /home/myfastcomp/emscripten/
             emscripten/system/include/SDL/SDL_config_minimal.h:44:26: 
             note: previous declaration as ‘typedef long long int 
              int64_t’
              typedef signed long long int64_t;
                      ^~~~~~~
              In file included from 
              /home/myfastcomp/emscripten/emscripten/
              system/include/emscripten.h:1:0,
             from /home/CLionProjects/projectShell/library.h:8,
             from /home/CLionProjects/projectShell/library.cpp:5:
             /home/myfastcomp/emscripten/emscripten/
             system/include/emscripten/emscripten.h:135:194: error: 
             wrong number of arguments specified for ‘deprecated’ 
              attribute
             void emscripten_set_canvas_size(int width, int height) 
             __attribute__((deprecated("This variant does not allow 
              specifying the target canvas", "Use 
              emscripten_set_canvas_element_size() instead")));

              ^
              /home/myfastcomp/emscripten/emscripten/
              system/include/emscripten/emscripten.h:136:254: error: 
              wrong number of arguments specified for ‘deprecated’ attribute
              void emscripten_get_canvas_size(int *width, int *height, 
              int *isFullscreen) __attribute__((deprecated("This 
               variant does not allow specifying the target canvas", 
               "Use emscripten_get_canvas_element_size() and 
                emscripten_get_fullscreen_status() instead")));

                  ^
               CMakeFiles/projectShell.dir/build.make:75: recipe for 
               target 'CMakeFiles/projectShell.dir/library.cpp.o' 
               failed
               make[3]: *** 
              [CMakeFiles/projectShell.dir/library.cpp.o] Error 1
               make[3]: *** Waiting for unfinished jobs....
               CMakeFiles/Makefile2:72: recipe for target 
              'CMakeFiles/projectShell.dir/all' failed
               make[2]: *** [CMakeFiles/projectShell.dir/all] Error 2
               CMakeFiles/Makefile2:84: recipe for target 
              'CMakeFiles/projectShell.dir/rule' failed
               make[1]: *** [CMakeFiles/projectShell.dir/rule] Error 2
               Makefile:118: recipe for target 'projectShell' failed
               make: *** [projectShell] Error 2

Have you checked this answer? https://stackoverflow.com/questions/45260216/emscripten-cmake-pass-emscripten-options-in-cmakelist-file — HugoTeixeira, Aug 16 '18 at 03:36
Yes I have tried that , and while building I am getting errors,like conflicting declaration, missing binary operator before token and many more, which indicates its not the correct CMakeList configuration — Bishal Sahoo, Aug 16 '18 at 03:53
"_while building it has errors_" ... what are those errors? Without the output, we can only guess. Maybe you missed to link the library? — Stanley F., Aug 16 '18 at 05:10

score 5 · Answer 1 · answered Jan 12 '20 at 13:43

You can compile using emscripten by creating toolchain, setting the correct environment variables and setting the compile options.

In Build, Execution, Deployment > Toolchains, add a new system toolchain and name it Emscripten with the following options:

CMake: No change
Make: No change
C Compiler: path to emcc
C++ Compiler: path to em++
Debugger: No change

Then in Build, Execution, Deployment > CMake, add a new profile such as Debug-Emscripten. Select the Emscripten Toolchain. You will need to set the CMake options and the environment variables which emcmake adds. You can see the options by setting the environment variable EM_BUILD_VERBOSE=3, however, to see the environment you need to dig around in emscripten's source (/usr/lib/emscripten/tools/shared.py on my machine in the function get_building_env).

The CMake Options to add are:

-DCMAKE_CROSSCOMPILING_EMULATOR=path/to/node
-DCMAKE_TOOLCHAIN_FILE=path/to/cmake/Modules/Platform/Emscripten.cmake

The Environment variables I had to add on my machine were:

CC=path/to/emscripten/emcc
CXX=path/to/emscripten/em++
AR=path/to/emscripten/emar
LD=path/to/emscripten/emcc
NM=path/to/emscripten-llvm/llvm-nm
LDSHARED=path/to/emscripten/emcc
RANLIB=path/to/emscripten/emranlib
EMMAKEN_COMPILER=path/to/emscripten-llvm/clang++
EMSCRIPTEN_TOOLS=path/to/emscripten/tools
HOST_CC=path/to/emscripten-llvm/clang
HOST_CXX=path/to/emscripten-llvm/clang++
HOST_CFLAGS=-W
HOST_CXXFLAGS=-W
PKG_CONFIG_LIBDIR=path/to/emscripten/system/local/lib/pkgconfig:path/to/emscripten/system/lib/pkgconfig
PKG_CONFIG_PATH=
EMSCRIPTEN=path/to/emscripten
CROSS_COMPILE=path/to/emscripten/em

You should now be able to compile by selecting the Debug-Emscripten configuration.

Perhaps preface this answer with: The idea is to make CLion perform the same work as emcmake, emmake, etc. — Matt Montag, May 30 '23 at 08:06

score 2 · Answer 2 · answered May 25 '20 at 18:07

I set the toolchain for emscripten in the preferences->build->cmake with -DCMAKE_TOOLCHAIN_FILE=..../sdks/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake

In the project cmake I link the source to the executable. For compile flags I use the params.

 set(CMAKE_EXECUTABLE_SUFFIX ".js")
 set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -s NO_EXIT_RUNTIME=1 -s 
    EXTRA_EXPORTED_RUNTIME_METHODS=['callMain']")

score 2 · Answer 3 · answered Jun 10 '22 at 17:59

With the help of this excellent blog post, I was able to create a docker image to build with the emscripten toolchain.

Create the following Dockerfile:

FROM emscripten/emsdk:latest

RUN DEBIAN_FRONTEND="noninteractive" apt-get update \
    && apt-get install -y ninja-build rsync ssh \
    && apt-get clean

RUN ( \
    echo 'LogLevel DEBUG2'; \
    echo 'PermitRootLogin yes'; \
    echo 'PasswordAuthentication yes'; \
    echo 'Subsystem sftp /usr/lib/openssh/sftp-server'; \
) > /etc/ssh/sshd_config_test_clion \
    && mkdir /run/sshd

# We need at least CMake 3.21 to support CMAKE_TOOLCHAIN_FILE from environment
RUN wget --no-verbose https://github.com/Kitware/CMake/releases/download/v3.22.5/cmake-3.22.5-linux-x86_64.tar.gz --directory-prefix=/tmp \
    && tar xf /tmp/cmake-3.22.5-linux-x86_64.tar.gz -C /opt --strip-components=1 \
    && rm /tmp/cmake-3.22.5-linux-x86_64.tar.gz \
    && echo 'PATH=/opt/bin:$PATH' >> /etc/bash.bashrc

RUN mkdir /clion && ( \
        echo 'export CMAKE_TOOLCHAIN_FILE=/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake'; \
        echo 'export CMAKE_GENERATOR=Ninja'; \
        echo 'export CMAKE_C_COMPILER=$(which emcc)'; \
        echo 'export CMAKE_CXX_COMPILER=$(which em++)'; \
        echo 'export CC=$(which emcc)'; \
        echo 'export CXX=$(which em++)'; \
    ) > /clion/emsdk.sh \
    && chmod a+x /clion/emsdk.sh

RUN useradd -m user \
    && yes password | passwd user

RUN usermod -s /bin/bash user

CMD ["/usr/sbin/sshd", "-D", "-e", "-f", "/etc/ssh/sshd_config_test_clion"]

Build an image using the following command:

docker build -f Dockerfile -t clion/emscripten .

Start a new container:
```
docker run -d --cap-add sys_ptrace -p127.0.0.1:2222:22 --name clion_emscripten clion/emscripten
```
The emscripten container listen to ssh port 2222. The exact value does not matter much, but it must be unique.
Open the Toolchains Settings dialog using CTRL+SHIFT+A -> "toolchains"
Add a new "Remote Host" toolchain
The remote host lives at localhost:2222, the username is "user" and the password is "password (without double quotes).
Use /clion/emsdk.sh as environment file
Use /opt/bin/cmake as the CMake executable
Leave C compiler, C++ Compiler and Debugger alone and press OK

After this, you are able to use the Emscripten toolchain in the same manner as you would use your native toolchain:

Open CMake settings dialog: SHIFT+A -> "cmake settings"
Add a new profile, using the emscripten toolchain.
Modify the profile as you wish. Ideally, you can leave the defaults and only need to change the "Build type".
Click OK

Now it's up to you to start developing your killer application.

score 1 · Answer 4 · answered Jan 27 '19 at 09:21

CLion does not understand well the concepts of "emcmake" and "emmake" commands. The best for now is to run this from a terminal.

In theory, it should be possible to not use emcmake command, and configure CMake CLion settings to use the emscripten-specific toolchain cmake file, but for some reason this does not work well

Integrate Emscripten in Clion

4 Answers4