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

Answer 1

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.

Answer 2

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']")