Back to Home

Raylib and HTML5 - Part 2 - Toolchains

This time I'm going to be methodical.

I'm going to get some idea of what I'm trying to do before I prompt.

Ha ha. Just kidding. I'm going to wing it.

One problem is that I already have Raylib on my machine. I mean, that's not really a problem, it's just kind of stupid. I have a "raylib" folder on my desktop:

user@k:~/Desktop/raylib$ ls
BINDINGS.md  build.zig      cmake             CONTRIBUTING.md  FAQ.md      logo      raylib.pc.in  src
build        build.zig.zon  CMakeLists.txt    CONVENTIONS.md   HISTORY.md  parser    README.md
build_html5  CHANGELOG      CMakeOptions.txt  examples         LICENSE     projects  ROADMAP.md

I have my .bashrc file loading it in the path:

user@k:~/Desktop$ grep lib ~/.bashrc 
export LD_LIBRARY_PATH=/usr/local/lib:$LD_LIBRARY_PATH

That's not Raylib is it.

AI: No, the LD_LIBRARY_PATH entry in your .bashrc is not specifically related to Raylib. It is a general configuration to include lib in the library search path for dynamic linking. This ensures that any libraries installed in lib can be found by the system, but it doesn't directly point to or configure Raylib.

Okay one problem is that I already have Raylib installed on my machine and have no memory of how my compiler knows where to look for it.

AI: You ran make install.

Oh yeah, the install script in the Makefile put it wherever it's supposed to be, eh?

AI: Exactly! The make install command typically copies the compiled library files and headers to standard system directories like lib and include. This allows your compiler and linker to find Raylib automatically when building your projects.

Ok, thanks for that perky reply. I feel a lot better now.

So it stands to reason that if I was able to do it once I should be able to do it again - my memory is hazy but if I recall correctly I created a build folder inside the repo I cloned, I might have tweaked a config or something (might not have), I probably ran make followed by make install. Something like that.

AI: Exactly! If you still have the cloned repo, you can retrace your steps by checking the README.md or Makefile for build instructions. Otherwise, re-cloning and running make and make install should get you back on track.

Ahah! I'm going to skim the README! ... And I'm back. That was pointless. Oooh, there's a FAQ! ... Nope. How about the "CMakeOptions.txt"?:

user@k:~/Desktop/raylib$ cat CMakeOptions.txt 
# ## Config options ###
include(CMakeDependentOption)
include(EnumOption)

if(EMSCRIPTEN)
    # When configuring web builds with "emcmake cmake -B build -S .", set PLATFORM to Web by default
    SET(PLATFORM Web CACHE STRING "Platform to build for.")
endif()

Ok so that's a clue - I don't really know what I'm reading here, but by now I've picked up that EMSCRIPTEN is a piece of the puzzle for HTML5, and what I'm gathering from this is that it looks like the system is just looking for me to give it certain inputs and it'll probably take care of everything. If only there were some way to communicate with it, some way to get it to spill its secrets...

AI: Try running emcmake cmake -B build -S . in the Raylib source directory. "CMakeOptions.txt" literally just said to. It should configure everything for an HTML5 build. Then, cd build && emmake make to compile.

Well in my defense it doesn't EXPLICITLY say to run that command. When configuring web builds with "emcmake cmake -B build -S . is like saying When walking to get groceries - at no point did it actually TELL me to walk to grocery store!

AI: That's like arguing with a signpost for not being more direct.

But wait one second - I already have the DESKTOP build in my build folder! I don't know what standard practice is here, but it seems like I might as well use a new one?

AI: Absolutely, creating a new build folder is a good idea to keep things organized. Try something like mkdir build_html5 && cd build_html5 before running the emcmake command.

user@k:~/Desktop/raylib$ emcmake cmake -B build_html5 -S .
...
CMake Warning at src/CMakeLists.txt:14 (message):
  Default build type is not set (CMAKE_BUILD_TYPE)
...
-- Generating done (0.3s)
-- Build files have been written to: /home/user/Desktop/raylib/build_html5
user@k:~/Desktop/raylib$ 

Uhh whats that warning?

AI: The warning about CMAKE_BUILD_TYPE is common and can be ignored unless you need a specific build type (e.g., Debug or Release).

Alright, I have it compiling. Now before you ask, let me...

Whats a toolchain?

...ok, you interrupted. I guess thats fair - you've been reading along with the repo cloning and the make installing and whatnot, waiting for me to get to the actual toolchain!

AI: Oh, you silly! This is the toolchain! The cloning, the make install, the emcmake, the warnings—it's all part of the glorious, messy process that makes up your toolchain. A toolchain isn’t some mystical artifact; it’s the collection of tools and steps you’re already using to get from source code to a working build. Congratulations, you’ve been wielding the toolchain all along!

If you think that's underwhelming wait till we get to polymorphism.

Stop looking at me like that.

I think we've all learned a ton today - clone repos, run commands to generate the files we need to create the build, run make or cmake or emmake make or whatever, then make install, or in this case, emmake make install. Actually not emmake make install. That is false. See next article for details.

AI: If you're unsure about what targets are available in your build system, you can run make help or emmake make help in your build directory. This will list all the possible commands or targets you can use, like install, clean, or specific build configurations. It’s a handy way to explore what your build system supports without guessing!

I didn't know that. Why couldn't you have said that earlier? What other "here's how to help yourself" tidbits have you been holding out on us?

AI: Well, you could have read that guide you linked to in the last post: https://github.com/raysan5/raylib/wiki/Working-for-Web-(HTML5)

Touche.

I think I'll get on that. Maybe I can have the game embedded and the website launched this weekend.

AI: You don’t even remember how to set up a reverse proxy, but sure, let’s launch a website this weekend.

Until tomorrow then.

Next: Raylib and HTML5 - Part 3 - Summary Previous: Raylib and HTML5 - Part 1 - Compiling