Adding React example

examples/C/react/GNUmakefile

@@ -0,0 +1,141 @@
+# WebUI C Example
+
+# == 1. VARIABLES =============================================================
+
+MAKEFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
+PROJECT_DIR := $(dir $(MAKEFILE_PATH))/../../../
+TARGET := $(firstword $(MAKECMDGOALS))
+LIB_DIR := $(PROJECT_DIR)/dist
+ifeq ($(TARGET), debug)
+LIB_DIR := $(LIB_DIR)/debug
+endif
+INCLUDE_DIR := $(PROJECT_DIR)/include
+WEBUI_LIB_NAME = webui-2
+ifeq ($(WEBUI_USE_TLS), 1)
+WEBUI_LIB_NAME = webui-2-secure
+endif
+
+# ARGS
+# Set a compiler when running on Linux via `make CC=gcc` / `make CC=clang`
+CC = gcc
+# Build the WebUI library if running via `make BUILD_LIB=true`
+BUILD_LIB ?=
+
+# BUILD FLAGS
+STATIC_BUILD_FLAGS = main.c -I"$(INCLUDE_DIR)" -L"$(LIB_DIR)"
+DYN_BUILD_FLAGS = main.c -I"$(INCLUDE_DIR)" -L"$(LIB_DIR)"
+
+# Platform conditions
+ifeq ($(OS),Windows_NT)
+	# Windows
+	PLATFORM := windows
+	SHELL := CMD
+	STATIC_BUILD_FLAGS += -l$(WEBUI_LIB_NAME)-static -lws2_32 -Wall -luser32 -static
+	COPY_LIB_CMD := @copy "$(LIB_DIR)\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
+	DYN_BUILD_FLAGS += "$(WEBUI_LIB_NAME).dll" -lws2_32 -Wall -luser32
+	STATIC_OUT := main.exe
+	DYN_OUT := main-dyn.exe
+	LWS2_OPT := -lws2_32 -lOle32
+	STRIP_OPT := --strip-all
+	CONSOLE_APP := -Wl,-subsystem=console
+	GUI_APP := -Wl,-subsystem=windows
+else
+	STATIC_BUILD_FLAGS += -lpthread -lm -l$(WEBUI_LIB_NAME)-static
+	DYN_BUILD_FLAGS += -lpthread -lm
+	STATIC_OUT := main
+	DYN_OUT := main-dyn
+	ifeq ($(shell uname),Darwin)
+		# MacOS
+		PLATFORM := macos
+		CC = clang
+		COPY_LIB_CMD := @cp "$(LIB_DIR)/$(WEBUI_LIB_NAME).dylib" "$(WEBUI_LIB_NAME).dylib"
+		DYN_BUILD_FLAGS += "./$(WEBUI_LIB_NAME).dylib"
+		WKWEBKIT_LINK_FLAGS := -framework Cocoa -framework WebKit
+	else
+		# Linux
+		PLATFORM := linux
+		COPY_LIB_CMD := @cp "$(LIB_DIR)/$(WEBUI_LIB_NAME).so" "$(WEBUI_LIB_NAME).so"
+		STATIC_BUILD_FLAGS += -ldl
+		DYN_BUILD_FLAGS += -ldl "./$(WEBUI_LIB_NAME).so"
+		STRIP_OPT := --strip-all
+		ifeq ($(CC),clang)
+			LLVM_OPT := llvm-
+		endif
+	endif
+endif
+
+# == 2.TARGETS ================================================================
+
+all: release
+
+debug: --validate-args
+ifeq ($(BUILD_LIB),true)
+	@cd "$(PROJECT_DIR)" && $(MAKE) debug
+endif
+#	Static with Debug info
+ifneq ($(WEBUI_USE_TLS), 1)
+	@echo "Build C Example ($(CC) debug static)..."
+	@$(CC) -g $(CONSOLE_APP) $(STATIC_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(STATIC_OUT)
+endif
+#	Dynamic with Debug info
+	@echo "Build C Example ($(CC) debug dynamic)..."
+	$(COPY_LIB_CMD)
+	@$(CC) -g $(CONSOLE_APP) $(DYN_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(DYN_OUT)
+#	Clean
+ifeq ($(PLATFORM),windows)
+	@- del *.o >nul 2>&1
+else
+	@- rm -f *.o
+	@- rm -rf *.dSYM # macOS
+endif
+	@echo "Done."
+
+release: --validate-args
+ifeq ($(BUILD_LIB),true)
+	@cd "$(PROJECT_DIR)" && $(MAKE)
+endif
+#	Static Release
+ifneq ($(WEBUI_USE_TLS), 1)
+	@echo "Build C Example ($(CC) release static)..."
+	@$(CC) -Os $(GUI_APP) $(STATIC_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(STATIC_OUT)
+	@$(LLVM_OPT)strip $(STRIP_OPT) $(STATIC_OUT)
+endif
+#	Dynamic Release
+	@echo "Build C Example ($(CC) release dynamic)..."
+	$(COPY_LIB_CMD)
+	@$(CC) $(GUI_APP) $(DYN_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(DYN_OUT)
+	@$(LLVM_OPT)strip $(STRIP_OPT) $(DYN_OUT)
+#	Clean
+ifeq ($(PLATFORM),windows)
+	@- del *.o >nul 2>&1
+else
+	@- rm -f *.o
+	@- rm -rf *.dSYM # macOS
+endif
+	@echo "Done."
+
+clean: --clean-$(PLATFORM)
+
+# INTERNAL TARGETS
+
+--validate-args:
+ifneq ($(filter $(CC),gcc clang aarch64-linux-gnu-gcc arm-linux-gnueabihf-gcc musl-gcc),$(CC))
+$(error Invalid compiler specified: `$(CC)`)
+endif
+
+--clean-linux: --clean-unix
+
+--clean-macos: --clean-unix
+
+--clean-unix:
+	- rm -f *.o
+	- rm -f *.a
+	- rm -f *.so
+	- rm -f *.dylib
+	- rm -rf *.dSYM
+
+--clean-windows:
+	- del *.o >nul 2>&1
+	- del *.dll >nul 2>&1
+	- del *.a >nul 2>&1
+	- del *.exe >nul 2>&1

examples/C/react/Makefile

@@ -0,0 +1,64 @@
+# WebUI C Example
+# Windows - Microsoft Visual C
+
+SHELL = CMD
+LIB_DIR = ../../../dist
+INCLUDE_DIR = ../../../include
+WEBUI_LIB_NAME = webui-2
+!IF "$(WEBUI_USE_TLS)" == "1"
+WEBUI_LIB_NAME = webui-2-secure
+!ENDIF
+
+# Build the WebUI library if running `nmake BUILD_LIB=true`
+BUILD_LIB =
+
+all: release
+
+debug:
+!IF "$(BUILD_LIB)" == "true"
+	@cd "$(LIB_DIR)" && cd .. && $(MAKE) debug
+!ENDIF
+#	Static with Debug info
+!IF "$(WEBUI_USE_TLS)" != "1"
+	@echo Build C Example (Static Debug)...
+	@cl /Zi main.c /I"$(INCLUDE_DIR)" /link /LIBPATH:"$(LIB_DIR)\debug" /SUBSYSTEM:CONSOLE $(WEBUI_LIB_NAME)-static.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:main.exe 1>NUL 2>&1
+!ENDIF
+#	Dynamic with Debug info
+	@echo Build C Example (Dynamic Debug)...
+	@copy "$(LIB_DIR)\debug\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
+	@cl /Zi main.c /I"$(INCLUDE_DIR)" /link /LIBPATH:"$(LIB_DIR)\debug" /SUBSYSTEM:CONSOLE $(WEBUI_LIB_NAME).lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:main-dyn.exe 1>NUL 2>&1
+#	Clean
+	@- del *.exp >nul 2>&1
+	@- del *.ilk >nul 2>&1
+	@- del *.lib >nul 2>&1
+	@- del *.obj >nul 2>&1
+	@echo Done.
+
+release:
+!IF "$(BUILD_LIB)" == "true"
+	@cd "$(LIB_DIR)" && cd .. && $(MAKE)
+!ENDIF
+#	Static Release
+!IF "$(WEBUI_USE_TLS)" != "1"
+	@echo Build C Example (Static Release)...
+	@cl main.c /I"$(INCLUDE_DIR)" /link /LIBPATH:"$(LIB_DIR)" /SUBSYSTEM:WINDOWS $(WEBUI_LIB_NAME)-static.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:main.exe 1>NUL 2>&1
+!ENDIF
+#	Dynamic Release
+	@echo Build C Example (Dynamic Release)...
+	@copy "$(LIB_DIR)\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
+	@cl main.c /I"$(INCLUDE_DIR)" /link /LIBPATH:"$(LIB_DIR)" /SUBSYSTEM:WINDOWS $(WEBUI_LIB_NAME).lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:main-dyn.exe 1>NUL 2>&1
+#	Clean
+	@- del *.exp >nul 2>&1
+	@- del *.ilk >nul 2>&1
+	@- del *.lib >nul 2>&1
+	@- del *.obj >nul 2>&1
+	@- del *.pdb >nul 2>&1
+	@echo Done.
+
+clean:
+	- del *.obj >nul 2>&1
+	- del *.ilk >nul 2>&1
+	- del *.pdb >nul 2>&1
+	- del *.exp >nul 2>&1
+	- del *.exe >nul 2>&1
+	- del *.lib >nul 2>&1

examples/C/react/README.md

@@ -0,0 +1,22 @@
+## React WebUI Example
+
+This is a basic example of how to use WebUI with React to generate a portable single executable program. WebUI will run the internal web server and use any installed web browser as GUI to show the React UI.
+
+A simple Python script `vfs.py` is used to generate `vfs.h` to embed the whole react's build folder into the portable single executable program.
+
+![Screenshot](webui_react.png)
+
+### How to use it?
+
+1. Run script `build_react` to re-build the React project and compile the C file
+
+### How to create a React WebUI project from scratch?
+
+1. Run `npx create-react-app my-react-app` to create a React app using NPM
+2. Add `<script src="webui.js"></script>` into `public/index.html` to connect UI with the backend
+3. Run `python vfs.py "./my-react-app/build" "vfs.h"` to embed the build folder
+4. Now, use any C compiler to compile `main.c` into a portable executable program
+
+### Other backend languages examples:
+
+- Coming soon...

examples/C/react/build_react.bat

@@ -0,0 +1,19 @@
+@echo off
+
+echo.
+echo * Build React project...
+
+cd webui-react-example
+call npm install
+call npm run build
+cd ..
+
+echo.
+echo * Embedding React's build files into 'vfs.h'
+
+python vfs.py "./webui-react-example/build" "vfs.h"
+
+echo.
+echo * Compiling 'main.c' into 'main.exe' using Microsoft Visual Studio...
+
+nmake

examples/C/react/build_react.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+echo
+echo "* Build React project..."
+
+cd webui-react-example
+npm install || exit
+npm run build || exit
+cd ..
+
+echo
+echo "* Embedding React's build files into 'vfs.h'"
+
+python3 vfs.py "./webui-react-example/build" "vfs.h"
+
+echo
+echo "* Compiling 'main.c' into 'main' using GCC..."
+
+make

examples/C/react/main.c

@@ -0,0 +1,59 @@
+// React Example
+
+#include "webui.h"
+#include "vfs.h"
+
+void exit_app(webui_event_t* e) {
+    webui_exit();
+}
+
+int main() {
+
+    // Create new windows
+    size_t react_window = webui_new_window();
+
+    // Set window size
+    webui_set_size(react_window, 800, 800);
+
+    // Set window position
+    webui_set_position(react_window, 200, 200);
+
+    // Allow multi-user connection to WebUI window
+    webui_set_config(multi_client, true);
+
+    // Disable WebUI's cookies
+    webui_set_config(use_cookies, false);
+
+    // Bind React HTML element IDs with a C functions
+    webui_bind(react_window, "Exit", exit_app);
+
+    // VSF (Virtual File System) Example
+    //
+    // 1. Run Python script to generate header file of a folder
+    //    python vfs.py "/path/to/folder" "vfs.h"
+    //
+    // 2. Include header file in your C project
+    //    #include "vfs.h"
+    //
+    // 3. use vfs in your custom files handler `webui_set_file_handler()`
+    //    webui_set_file_handler(react_window, vfs);
+
+    // Set a custom files handler
+    webui_set_file_handler(react_window, vfs);
+
+    // Show the React window
+    // webui_show_browser(react_window, "index.html", Chrome);
+    webui_show(react_window, "index.html");
+
+    // Wait until all windows get closed
+    webui_wait();
+
+    // Free all memory resources (Optional)
+    webui_clean();
+
+    return 0;
+}
+
+#if defined(_MSC_VER)
+int APIENTRY WinMain(HINSTANCE hInst, HINSTANCE hInstPrev, PSTR cmdline, int cmdshow) { return main(); }
+#endif