https://github.com/developer239/vite-react-wasm-cpp-emscripten-cmake
TypeScript & React boilerplate with C++ WASM module for native features or performance boost.
https://github.com/developer239/vite-react-wasm-cpp-emscripten-cmake
cmake cpp emscripten javascript react typescript vite wasm
Last synced: 6 months ago
JSON representation
TypeScript & React boilerplate with C++ WASM module for native features or performance boost.
- Host: GitHub
- URL: https://github.com/developer239/vite-react-wasm-cpp-emscripten-cmake
- Owner: developer239
- Created: 2023-05-16T16:23:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T21:22:52.000Z (over 2 years ago)
- Last Synced: 2025-06-13T05:44:02.082Z (8 months ago)
- Topics: cmake, cpp, emscripten, javascript, react, typescript, vite, wasm
- Language: JavaScript
- Homepage:
- Size: 174 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vite React WASM CPP Emscripten
TypeScript & React boilerplate with C++ WASM module for native features or performance boost.
## Installation
- `yarn install` (install Node dependencies)
- `npm run install:emsdk` (initialize [emsdk](https://github.com/emscripten-core/emsdk))
- `npm run build:wasm` (build WASM module and JavaScript glue file)
## Development
- `npm run dev` (start development server)
- `npm run build:wasm` (rebuild WASM if C++ changes)
## Project Structure
- `src` - TypeScript & React source code
- `cpp/src` - C++ source code
```text
├── src
│ ├── App.tsx
│ ├── index.css
│ ├── main.tsx
│ ├── vite-env.d.ts
│ └── wasm.d.ts
└── cpp
└── main.cpp
```
## Useful Commands
- `npm run lint:ts` lint TS files
- `npm run format` format files
- `npm run prepare:husky` install git hooks
## Example
```cpp
// cpp/src/main.cpp
#include
std::string hello() {
return "Hello from C++!";
}
EMSCRIPTEN_BINDINGS(wasm_module) {
emscripten::function("hello", &hello);
}
```
Define types for the glue code:
```ts
// src/wasm.d.ts
declare let Module: {
hello: () => string
}
```
Use global module in your app:
```ts
export const App = () =>
{Module.hello()}
```
The wasm module is loaded in `indx.html`.