This page will give an example how to program web applications with C by compiling C to WebAssembly.

How to build and run our example project

I have here below added support to our SDL project in uppg8.3 for compiling to WebAssembly by using Emscripten. Perform the following steps be able to compile to a web application and run in a web browser. Our project below has project files for CodeLite on Windows/Mac (same file: hemuppgifter.workspace) and for Microsoft Developer Studio Visual C++ 2015/2017 on Windows (SDLProject.sln):

Installation and build steps:

1. Install Emscripten - tag "sdk-tag-1.38.26-64bit":
   

   Emscripten is a C compiler that can compile into WebAssembly or javacript. WebAssembly is a binary instruction format (like CPU assembler) for a stack-based virtual machine and aims to execute at native speed by taking advantage of common hardware capabilities available on a wide range of computer systems.
         To compile a web application, we will replace gcc/g++ with Emscripten's compilers emcc/em++.

   Disclaimer: We use sdk-tag-1.38.26-64bit because tag 'latest' had a bug (as of February 7:th 2019) and this tag seems bug free for our purposes. (Normally, you would otherwise use command ./emsdk install latest but then you may have to manage bugs. As of 2019-01-07, 'latest' did not work for us, but 'sdk-tag-1.38.26-64bit' does.)

   ---

   • Download Emscripten: from here: emsdk.zip.
   • Choose for your OS below (Linux not yet fully supported. TBD.):
     

     ---

     OSX/Linux:
     1. Place the 'emsdk' directory in your home directory (user folder), as follows:
        Unpack emsdk.zip and move the unzipped directory 'emsdk' to '~/', i.e., so that you get the directory ~/emsdk.
        (Note: '~' is your user directory, i.e., '/Users/"your-user-name"/'. It is important that you place the 'emsdk' directory in your user directory, because our project settings for CodeLite in SDLProject.project assumes this.)
     2. Install the right SDK version (sdk-tag-1.38.26-64bit):
        Open a terminal. Type:
        cd ~/ -- which takes you to your user directory.
        ./emsdk install sdk-tag-1.38.26-64bit -- to download and install the right tag. This may take a while.
        
     3. Make this SDK "active" for the current user (this creates file ~/.emscripten):
        Run: ./emsdk activate sdk-tag-1.38.26-64bit
        
     4. Activate PATH and other environment variables in the current terminal:
        source ./emsdk_env.sh
        

     ---

     Windows:
     1. Unpack emsdk.zip and move the unpacked folder emsdk to C:\ (i.e., so that you get the folder C:\emsdk)
     2. Open a command prompt (cmd). Write:
        cd C:\emsdk
        emsdk install sdk-1.38.26-64bit (This may take a while.)
     3. emsdk activate sdk-1.38.26-64bit
     4. emsdk_env.bat

     ---

2. Install Google Chrome on your OS if you already do not have it. (Chrome supports WebGL 2 and our scripts to run the project from within the IDE are set to use Chrome.)
3. Download SDLProject_w4_uppg8.3.zip.
4. Open the workspace using either CodeLite or MS Visual Studio:

   ---

   For CodeLite
   
   • Go to (top menu)->Settings->Build Settings...
     
     
     Create a new compiler by copying settings from the existing GCC compiler:
     
     In the appearing small dialog, call your new compiler emcc and choose to copy settings from GCC:
     
     
     For OSX, change the emcc settings to:
     
     
     For Windows, change the emcc settings to:
     
     (Note the special setting for Make)
     
     Note that gdb debugging does not work for Emscripten.
     
   • Select the Emscripten configuration that you want to build:
     

     OSX:	Windows:

     
     Or, if you want to build native, i.e., not a web app:
       - To build native on OSX, just select OSX-Debug
       - To build native on Windows, just select Win32-Debug
   • Build the project as usual. Don't run the project using the debugger.
     Instead, To run the Emscripten configuration, just click:
     

     OSX:	Windows:

     This will launch a http server and open the file index.html in Chrome.
     (This is controlled in SDLProject->Settings->General->"Executable to Run/Debug")
     
     
   • Each time you re-run the project from within CodeLite, first close any opened terminal that hosts the launched local http server. Else, you will get error messages in the new terminal due to multiple web servers on the same port.

   ---

   For MS Visual Studio (Windows only):
   
   • Open the solution file SDLProject\SDLProject.sln
     
   • To build with Emscripten, select configuration 'Emscripten' (not Release nor Debug)
   • Build and run as usual
   • To avoid Developer Studio to terminate the running process, when exiting the web application, first close Chrome and then close the opened cmd promt.

   ---

5. Link to demo: here
   Note that your browser will need support for WebGL2 (e.g., Chrome or Firefox)