Build in Docker

.dockerignore

@@ -0,0 +1,3 @@
+third_party/
+Dockerfile
+bin

Dockerfile

@@ -0,0 +1,39 @@
+FROM emscripten/emsdk as builder
+
+RUN mkdir third_party && \
+    wget -c https://www.cairographics.org/releases/cairo-1.16.0.tar.xz && \
+    tar -xvf cairo-1.16.0.tar.xz -C third_party && \
+    rm cairo-1.16.0.tar.xz && \
+    wget -c https://www.cairographics.org/releases/pixman-0.40.0.tar.gz && \
+    tar -xvf pixman-0.40.0.tar.gz -C third_party && \
+    rm pixman-0.40.0.tar.gz
+
+RUN apt update && \
+    apt install -y pkg-config libpng-dev libsdl2-dev libglew-dev libglfw3-dev libcairo-dev libfreetype-dev libcurl4-openssl-dev && \
+    rm -rf /var/lib/apt/lists/*
+
+RUN cd third_party/pixman-0.40.0 && \
+    CC=emcc AR=emar LD=emcc RANLIB=emranlib PNG_LIBS="-L." ./configure --host=wasm32-unknown-emscripten --disable-gtk --enable-libpng --disable-shared --disable-openmp && \
+    export EMCC_CFLAGS="-s USE_PTHREADS=1 -s USE_LIBPNG=1 -s USE_ZLIB=1" && \
+    emmake make && \
+    cd ../cairo-1.16.0 && \
+    CC=emcc CXX=em++ AR=emar LD=emcc RANLIB=emranlib png_LIBS="-L." FREETYPE_LIBS="-L." pixman_LIBS="-L$PWD/../pixman-0.40.0/pixman/.libs -lpixman-1" ax_cv_c_float_words_bigendian=no ./configure --host=wasm32 --disable-shared --disable-xlib --disable-xcb --disable-qt --disable-quartz --disable-win32 --disable-os2 --disable-beos --disable-drm --disable-gallium --disable-cogl --disable-directfb --disable-vg --disable-script --disable-fc --disable-ps --disable-pdf --disable-svg --disable-tee --disable-xml --disable-gobject --disable-full-testing --disable-interpreter --disable-symbol-lookup && \
+    export EMCC_CFLAGS="-s USE_PTHREADS=1 -s USE_LIBPNG=1 -s USE_ZLIB=1 -s USE_FREETYPE=1" && \
+    emmake make
+
+ADD . /src/
+
+RUN make PLATFORM=web BUILD=release && rm -rf bin/src
+
+FROM node:17-alpine
+
+RUN npm install -g http-server
+
+COPY --from=builder /src/bin/ /app/
+
+WORKDIR /app/
+
+EXPOSE 8080
+
+CMD http-server
+

Makefile

@@ -34,7 +34,7 @@ ifeq ($(PLATFORM),web)
 
 	EMS += -s USE_SDL=2 -s USE_ZLIB=1 -s USE_FREETYPE=1 -s USE_LIBPNG=1 -s DISABLE_EXCEPTION_CATCHING=1
 	CPPFLAGS += -I./third_party/cairo-1.16.0/src -O2 $(EMS)
-	LDFLAGS += -s WASM=1 -s ALLOW_MEMORY_GROWTH=1 -s NO_EXIT_RUNTIME=0 -s ASSERTIONS=1 -s ALLOW_MEMORY_GROWTH=1 -s TOTAL_STACK=10000000 -s ASYNCIFY -s FETCH=1 -s FORCE_FILESYSTEM=1 -o bin/index.html --shell-file shell_minimal.html $(PRELOADED_FILES) $(EMS) -L./third_party/cairo-1.16.0/src/.libs -lcairo -L./third_party/pixman-0.40.0/pixman/.libs -lpixman-1
+	LDFLAGS += -s CASE_INSENSITIVE_FS=1 -s WASM=1 -s ALLOW_MEMORY_GROWTH=1 -s NO_EXIT_RUNTIME=0 -s ASSERTIONS=1 -s ALLOW_MEMORY_GROWTH=1 -s TOTAL_STACK=10000000 -s ASYNCIFY -s FETCH=1 -s FORCE_FILESYSTEM=1 -o bin/index.html --shell-file shell_minimal.html $(PRELOADED_FILES) $(EMS) -L./third_party/cairo-1.16.0/src/.libs -lcairo -L./third_party/pixman-0.40.0/pixman/.libs -lpixman-1
 else
 	CPPFLAGS += $(shell pkg-config --cflags sdl2 glew glfw3 zlib cairo freetype2 libcurl) -Wno-cast-function-type
 	LDFLAGS := -lpthread -lopengl32 $(shell pkg-config --libs --static sdl2 glew glfw3 zlib cairo freetype2 libcurl) -lunistring -liconv -lbrotlicommon -mconsole -fPIC -static -static-libgcc -static-libstdc++

README.md

@@ -14,6 +14,25 @@ If building for web, first obtain a working Emscripten build environment and put
 # Hosting the web build
 As long as all files in `bin` are in the same directory on your webserver and you are hosting them over https, you can access index.html to see the viewer.
 
+# Building in Docker
+You can build and run the web interface in a docker container, making it portable, and negating the need to obtain dependencies and set up a development environment.
+
+1. [Get Docker](https://docs.docker.com/get-docker/)
+2. Build the docker image
+
+```
+docker build --tag toost .
+```
+
+3. Run the docker container
+
+```
+docker run -p 8080:8080 toost
+```
+
+4. View the app in your browser (http://localhost:8080)
+
+
 # Command line usage
 ```
 A Super Mario Maker 2 level viewer, based on JiXiaomai's SMM2LevelViewer