How to Compile C code into WebAssembly with Emscripten – InApps Technology is an article under the topic Software Development Many of you are most interested in today !! Today, let’s InApps.net learn How to Compile C code into WebAssembly with Emscripten – InApps Technology in today’s post !

Read more about How to Compile C code into WebAssembly with Emscripten – InApps Technology at Wikipedia

You can find content about How to Compile C code into WebAssembly with Emscripten – InApps Technology from the Wikipedia website

In our previous entry in this series, we discussed what WebAssmbly was and the main benefits of using WebAssembly. Before we continue with this next part in the series, you’ll definitely want to catch up by first reading What Is WebAssembly and Why Do You Need It?

Once you’ve finished reading that piece, your first question is probably, “How do I start using WebAssembly?” That’s exactly what we’re going to address this time around. I’m going to demonstrate how to get started with this technology. I’ll be doing so on Ubuntu Linux 20.04 (which is also the same process for installing on macOS) and showing you how to run the always helpful “Hello, World!” application. It’s a simple example that will make it easy for you to get started with WebAssembly.

With that said, let’s get on with the steps toward your first WebAssembly app.

Install the Necessary Dependencies

Fortunately, there aren’t many dependencies to take care of. But before we can install the necessary components for WebAssembly, we’ll need to install git with the command:

sudo apt-get install git -y

Once git is installed, you’re ready to prepare your WebAssembly environment.

Read More:   The Node.js Foundation, io.js and the New World of Open Source Governance – InApps 2022

Install Emscripten

The next step is to use Emscripten, open source software that compiles projects written in C or C++ — or any language that uses LLVM — to browsers, Node.js, or wasm runtimes. The Emscripten SDK profiles all of the necessary tools (such as Clang, Python, and Node.js), as well as an updated mechanism to enable migrating to newer versions of the toolchain as they are released.

What we’re going to do is first compile the code within your user’s home directory. Next, we’ll make this a bit more useful by making it work within the Apache document root.

To download the Empscripten SDK, issue the command (from within your user’s home directory):

git clone https://github.com/emscripten-core/emsdk.git

Once the file download is complete, change into the newly-created directory with the command:

cd emsdk

Next, we’ll make sure our source is updated with the command:

git pull

Now, we can install the latest version of Emscripten with the command:

./emsdk install latest

This will take some time (as it must install a number of tools to your system). You should probably allow up to 30 minutes for this section to complete. Once the installation finishes, you can then activate the latest version with the command:

./emsdk activate latest

Finally, we’ll set the various environmental variables with the command:

source ./emsdk_env.sh

Create your Hello, World! Source

We’re now ready to finally create our Hello, World! application. We’re going to write this app in C, so for many, this might be old hat. Create the new file with the command:

nano hello_world.c

In that file, paste the following code:

Notice, the variation on “Hello, World!”?

Read More:   Why TypeScript Is Growing More Popular – InApps Technology 2022

Save and close the file with the keyboard shortcut [Ctrl]+[x].

Compile the Source Code

What we’re going to do now is use the emcc compiler to take our C code and turn it into a WebAssembly (WASM) HTML file. We’ll do that with the command:

emcc hello_world.c -s WASM=1 -o hello_world.html

Before we actually launch our code, we still need to install a web server and then move the code to our server document root. You could also avoid this by using Emscripten’s built-in HTTP server with the command:

emrun --no_browser --port 8080 hello_world.html

However, to use the above command, you’d have to recompile the code with:

emcc --emrun hello_world.c -s WASM=1 -o hello_world.html

Let’s do this the right way. Install the Apache webserver with the command:

sudo apt-get install apache2 -y

Once that installation finishes, start and enable the Apache webserver service with the commands:

sudo systemctl start apache2

sudo systemctl enable apache2

Next, move the emsdk folder into the Apache document root with the command:

sudo mv emsdk /var/www/html

Now, point your web browser to http://localhost/emsdk/hello_world.html and you should see Hello, New Stack! printed out (Figure 1).

Figure 1: Hello, New Stack!

If you’ve installed Emscripten on a server (without a GUI), you could point the web browser to http://SERVER/emsdk/hello_world.html (where SERVER is the IP address or domain of the server) and you’ll see the same results.

It’s important to note, however, once you move the emsdk folder into the document root, you won’t be able to compile new code into WebAssembly, as the environment variables will have changed. Because of this, you’ll want to start over with the process again, only this time using sudo (as your standard user won’t have permission to install within the /var/www/html/ directory). To do that, you would change to the root user with the command:

sudo -s

Once you’ve done that, you can then change into the document root with the command:

Read More:   Putting It All Together – InApps 2022

cd /var/www/html/

Remove the emsdk folder (if you already moved it into the document root) with the command:

rm -rf emsdk

And then start at the beginning, back with the command:

sudo git clone https://github.com/emscripten-core/emsdk.git

Go through the how-to once again, and you should be able to compile your code within the Apache document root and then launch it from your web browser.

And that’s the gist of how you compile C code into HTML using WebAssembly, with the help of Emscripten.

Source: InApps.net

List of Keywords users find our article on Google:

clang github
emscripten
llvm github
c to webassembly
emcc compiler
char br
let’s do it
c-tech solutions
java bitwise
webassembly github
webassembly hello world c
apache wikipedia
emscripten hello world
run apache2
emscripten examples
llvm git
cadence fintech
http://www.cplusplus.com/user/profile.cgi?w=show
clang-tools
webassembly c
clang tools
is first command a good company
webassembly llvm
шорткат 527
emcc application
create directory command in oracle
folder budget food
527 shortcut
turn assembly into c
online oracle compiler
oracle home directory
compile root
apache env variables
Rate this post
As a Senior Tech Enthusiast, I bring a decade of experience to the realm of tech writing, blending deep industry knowledge with a passion for storytelling. With expertise in software development to emerging tech trends like AI and IoT—my articles not only inform but also inspire. My journey in tech writing has been marked by a commitment to accuracy, clarity, and engaging storytelling, making me a trusted voice in the tech community.

Let’s create the next big thing together!

Coming together is a beginning. Keeping together is progress. Working together is success.

Let’s talk

Get a custom Proposal

Please fill in your information and your need to get a suitable solution.

    You need to enter your email to download

      [cf7sr-simple-recaptcha]

      Success. Downloading...