Skip to content

Commit 6e7b0da

Browse files
AlbertShownAlbertShown
committed
Adding React example
1 parent be972b5 commit 6e7b0da

26 files changed

+19927
-0
lines changed

‎examples/C/react/GNUmakefile‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# WebUI C Example
2+
3+
# == 1. VARIABLES =============================================================
4+
5+
MAKEFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
6+
PROJECT_DIR := $(dir $(MAKEFILE_PATH))/../../../
7+
TARGET := $(firstword $(MAKECMDGOALS))
8+
LIB_DIR := $(PROJECT_DIR)/dist
9+
ifeq ($(TARGET), debug)
10+
LIB_DIR := $(LIB_DIR)/debug
11+
endif
12+
INCLUDE_DIR := $(PROJECT_DIR)/include
13+
WEBUI_LIB_NAME = webui-2
14+
ifeq ($(WEBUI_USE_TLS), 1)
15+
WEBUI_LIB_NAME = webui-2-secure
16+
endif
17+
18+
# ARGS
19+
# Set a compiler when running on Linux via `make CC=gcc` / `make CC=clang`
20+
CC = gcc
21+
# Build the WebUI library if running via `make BUILD_LIB=true`
22+
BUILD_LIB ?=
23+
24+
# BUILD FLAGS
25+
STATIC_BUILD_FLAGS = main.c -I"$(INCLUDE_DIR)" -L"$(LIB_DIR)"
26+
DYN_BUILD_FLAGS = main.c -I"$(INCLUDE_DIR)" -L"$(LIB_DIR)"
27+
28+
# Platform conditions
29+
ifeq ($(OS),Windows_NT)
30+
# Windows
31+
PLATFORM := windows
32+
SHELL := CMD
33+
STATIC_BUILD_FLAGS += -l$(WEBUI_LIB_NAME)-static -lws2_32 -Wall -luser32 -static
34+
COPY_LIB_CMD := @copy "$(LIB_DIR)\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
35+
DYN_BUILD_FLAGS += "$(WEBUI_LIB_NAME).dll" -lws2_32 -Wall -luser32
36+
STATIC_OUT := main.exe
37+
DYN_OUT := main-dyn.exe
38+
LWS2_OPT := -lws2_32 -lOle32
39+
STRIP_OPT := --strip-all
40+
CONSOLE_APP := -Wl,-subsystem=console
41+
GUI_APP := -Wl,-subsystem=windows
42+
else
43+
STATIC_BUILD_FLAGS += -lpthread -lm -l$(WEBUI_LIB_NAME)-static
44+
DYN_BUILD_FLAGS += -lpthread -lm
45+
STATIC_OUT := main
46+
DYN_OUT := main-dyn
47+
ifeq ($(shell uname),Darwin)
48+
# MacOS
49+
PLATFORM := macos
50+
CC = clang
51+
COPY_LIB_CMD := @cp "$(LIB_DIR)/$(WEBUI_LIB_NAME).dylib" "$(WEBUI_LIB_NAME).dylib"
52+
DYN_BUILD_FLAGS += "./$(WEBUI_LIB_NAME).dylib"
53+
WKWEBKIT_LINK_FLAGS := -framework Cocoa -framework WebKit
54+
else
55+
# Linux
56+
PLATFORM := linux
57+
COPY_LIB_CMD := @cp "$(LIB_DIR)/$(WEBUI_LIB_NAME).so" "$(WEBUI_LIB_NAME).so"
58+
STATIC_BUILD_FLAGS += -ldl
59+
DYN_BUILD_FLAGS += -ldl "./$(WEBUI_LIB_NAME).so"
60+
STRIP_OPT := --strip-all
61+
ifeq ($(CC),clang)
62+
LLVM_OPT := llvm-
63+
endif
64+
endif
65+
endif
66+
67+
# == 2.TARGETS ================================================================
68+
69+
all: release
70+
71+
debug: --validate-args
72+
ifeq ($(BUILD_LIB),true)
73+
@cd "$(PROJECT_DIR)" && $(MAKE) debug
74+
endif
75+
# Static with Debug info
76+
ifneq ($(WEBUI_USE_TLS), 1)
77+
@echo "Build C Example ($(CC) debug static)..."
78+
@$(CC) -g $(CONSOLE_APP) $(STATIC_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(STATIC_OUT)
79+
endif
80+
# Dynamic with Debug info
81+
@echo "Build C Example ($(CC) debug dynamic)..."
82+
$(COPY_LIB_CMD)
83+
@$(CC) -g $(CONSOLE_APP) $(DYN_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(DYN_OUT)
84+
# Clean
85+
ifeq ($(PLATFORM),windows)
86+
@- del *.o >nul 2>&1
87+
else
88+
@- rm -f *.o
89+
@- rm -rf *.dSYM # macOS
90+
endif
91+
@echo "Done."
92+
93+
release: --validate-args
94+
ifeq ($(BUILD_LIB),true)
95+
@cd "$(PROJECT_DIR)" && $(MAKE)
96+
endif
97+
# Static Release
98+
ifneq ($(WEBUI_USE_TLS), 1)
99+
@echo "Build C Example ($(CC) release static)..."
100+
@$(CC) -Os $(GUI_APP) $(STATIC_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(STATIC_OUT)
101+
@$(LLVM_OPT)strip $(STRIP_OPT) $(STATIC_OUT)
102+
endif
103+
# Dynamic Release
104+
@echo "Build C Example ($(CC) release dynamic)..."
105+
$(COPY_LIB_CMD)
106+
@$(CC) $(GUI_APP) $(DYN_BUILD_FLAGS) $(LWS2_OPT) $(WKWEBKIT_LINK_FLAGS) -o $(DYN_OUT)
107+
@$(LLVM_OPT)strip $(STRIP_OPT) $(DYN_OUT)
108+
# Clean
109+
ifeq ($(PLATFORM),windows)
110+
@- del *.o >nul 2>&1
111+
else
112+
@- rm -f *.o
113+
@- rm -rf *.dSYM # macOS
114+
endif
115+
@echo "Done."
116+
117+
clean: --clean-$(PLATFORM)
118+
119+
# INTERNAL TARGETS
120+
121+
--validate-args:
122+
ifneq ($(filter $(CC),gcc clang aarch64-linux-gnu-gcc arm-linux-gnueabihf-gcc musl-gcc),$(CC))
123+
$(error Invalid compiler specified: `$(CC)`)
124+
endif
125+
126+
--clean-linux: --clean-unix
127+
128+
--clean-macos: --clean-unix
129+
130+
--clean-unix:
131+
- rm -f *.o
132+
- rm -f *.a
133+
- rm -f *.so
134+
- rm -f *.dylib
135+
- rm -rf *.dSYM
136+
137+
--clean-windows:
138+
- del *.o >nul 2>&1
139+
- del *.dll >nul 2>&1
140+
- del *.a >nul 2>&1
141+
- del *.exe >nul 2>&1

‎examples/C/react/Makefile‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# WebUI C Example
2+
# Windows - Microsoft Visual C
3+
4+
SHELL = CMD
5+
LIB_DIR = ../../../dist
6+
INCLUDE_DIR = ../../../include
7+
WEBUI_LIB_NAME = webui-2
8+
!IF "$(WEBUI_USE_TLS)" == "1"
9+
WEBUI_LIB_NAME = webui-2-secure
10+
!ENDIF
11+
12+
# Build the WebUI library if running `nmake BUILD_LIB=true`
13+
BUILD_LIB =
14+
15+
all: release
16+
17+
debug:
18+
!IF "$(BUILD_LIB)" == "true"
19+
@cd "$(LIB_DIR)" && cd .. && $(MAKE) debug
20+
!ENDIF
21+
# Static with Debug info
22+
!IF "$(WEBUI_USE_TLS)" != "1"
23+
@echo Build C Example (Static Debug)...
24+
@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
25+
!ENDIF
26+
# Dynamic with Debug info
27+
@echo Build C Example (Dynamic Debug)...
28+
@copy "$(LIB_DIR)\debug\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
29+
@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
30+
# Clean
31+
@- del *.exp >nul 2>&1
32+
@- del *.ilk >nul 2>&1
33+
@- del *.lib >nul 2>&1
34+
@- del *.obj >nul 2>&1
35+
@echo Done.
36+
37+
release:
38+
!IF "$(BUILD_LIB)" == "true"
39+
@cd "$(LIB_DIR)" && cd .. && $(MAKE)
40+
!ENDIF
41+
# Static Release
42+
!IF "$(WEBUI_USE_TLS)" != "1"
43+
@echo Build C Example (Static Release)...
44+
@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
45+
!ENDIF
46+
# Dynamic Release
47+
@echo Build C Example (Dynamic Release)...
48+
@copy "$(LIB_DIR)\$(WEBUI_LIB_NAME).dll" "$(WEBUI_LIB_NAME).dll"
49+
@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
50+
# Clean
51+
@- del *.exp >nul 2>&1
52+
@- del *.ilk >nul 2>&1
53+
@- del *.lib >nul 2>&1
54+
@- del *.obj >nul 2>&1
55+
@- del *.pdb >nul 2>&1
56+
@echo Done.
57+
58+
clean:
59+
- del *.obj >nul 2>&1
60+
- del *.ilk >nul 2>&1
61+
- del *.pdb >nul 2>&1
62+
- del *.exp >nul 2>&1
63+
- del *.exe >nul 2>&1
64+
- del *.lib >nul 2>&1

‎examples/C/react/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
## React WebUI Example
2+
3+
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.
4+
5+
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.
6+
7+
![Screenshot](webui_react.png)
8+
9+
### How to use it?
10+
11+
1. Run script `build_react` to re-build the React project and compile the C file
12+
13+
### How to create a React WebUI project from scratch?
14+
15+
1. Run `npx create-react-app my-react-app` to create a React app using NPM
16+
2. Add `<script src="webui.js"></script>` into `public/index.html` to connect UI with the backend
17+
3. Run `python vfs.py "./my-react-app/build" "vfs.h"` to embed the build folder
18+
4. Now, use any C compiler to compile `main.c` into a portable executable program
19+
20+
### Other backend languages examples:
21+
22+
- Coming soon...

‎examples/C/react/build_react.bat‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@echo off
2+
3+
echo.
4+
echo * Build React project...
5+
6+
cd webui-react-example
7+
call npm install
8+
call npm run build
9+
cd ..
10+
11+
echo.
12+
echo * Embedding React's build files into 'vfs.h'
13+
14+
python vfs.py "./webui-react-example/build" "vfs.h"
15+
16+
echo.
17+
echo * Compiling 'main.c' into 'main.exe' using Microsoft Visual Studio...
18+
19+
nmake

‎examples/C/react/build_react.sh‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
#!/bin/bash
2+
3+
echo
4+
echo "* Build React project..."
5+
6+
cd webui-react-example
7+
npm install || exit
8+
npm run build || exit
9+
cd ..
10+
11+
echo
12+
echo "* Embedding React's build files into 'vfs.h'"
13+
14+
python3 vfs.py "./webui-react-example/build" "vfs.h"
15+
16+
echo
17+
echo "* Compiling 'main.c' into 'main' using GCC..."
18+
19+
make

‎examples/C/react/main.c‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// React Example
2+
3+
#include "webui.h"
4+
#include "vfs.h"
5+
6+
void exit_app(webui_event_t* e) {
7+
webui_exit();
8+
}
9+
10+
int main() {
11+
12+
// Create new windows
13+
size_t react_window = webui_new_window();
14+
15+
// Set window size
16+
webui_set_size(react_window, 800, 800);
17+
18+
// Set window position
19+
webui_set_position(react_window, 200, 200);
20+
21+
// Allow multi-user connection to WebUI window
22+
webui_set_config(multi_client, true);
23+
24+
// Disable WebUI's cookies
25+
webui_set_config(use_cookies, false);
26+
27+
// Bind React HTML element IDs with a C functions
28+
webui_bind(react_window, "Exit", exit_app);
29+
30+
// VSF (Virtual File System) Example
31+
//
32+
// 1. Run Python script to generate header file of a folder
33+
// python vfs.py "/path/to/folder" "vfs.h"
34+
//
35+
// 2. Include header file in your C project
36+
// #include "vfs.h"
37+
//
38+
// 3. use vfs in your custom files handler `webui_set_file_handler()`
39+
// webui_set_file_handler(react_window, vfs);
40+
41+
// Set a custom files handler
42+
webui_set_file_handler(react_window, vfs);
43+
44+
// Show the React window
45+
// webui_show_browser(react_window, "index.html", Chrome);
46+
webui_show(react_window, "index.html");
47+
48+
// Wait until all windows get closed
49+
webui_wait();
50+
51+
// Free all memory resources (Optional)
52+
webui_clean();
53+
54+
return 0;
55+
}
56+
57+
#if defined(_MSC_VER)
58+
int APIENTRY WinMain(HINSTANCE hInst, HINSTANCE hInstPrev, PSTR cmdline, int cmdshow) { return main(); }
59+
#endif

‎examples/C/react/vfs.h‎

Lines changed: 142 additions & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)