gdal3.js v3 beta
DOCS · INTEGRATIONS

Frameworks & bundlers

v3 has one integration story: a cpp.js plugin per bundler. The framework on top (React, Vue, Svelte, anything) doesn't matter; the plugin works at the bundler layer.

Common setup

Every integration is the same three steps: install, declare the native dependency, add the plugin.

shell + cppjs.config.js
npm install gdal3.js@beta
npm install -D @cpp.js/plugin-vite        # pick your bundler's plugin

// cppjs.config.js (project root)
import wasm from "@gdal3.js/wasm/cppjs.config.mjs";
export default {
  dependencies: [wasm],
  paths: { config: import.meta.url },
};

Application code is identical everywhere:

anywhere
import "gdal3.js/Dataset.h";
import { initCppJs, Gdal } from "gdal3.js/Gdal.h";

Vite (React, Vue, Svelte, vanilla)

vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";              // or react() / svelte() / nothing
import viteCppjsPlugin from "@cpp.js/plugin-vite";

export default defineConfig({
  plugins: [vue(), viteCppjsPlugin()],
});

This is exactly how the bundled converter app (Vue 3) is set up. Dev server asset wiring, worker bundling and the COOP/COEP headers for the mt build are handled for you. The framework choice changes the first plugin in the array, nothing else; the v2 era's React/Vue/Observable setup threads (#32, #30, #33) are what this design retired.

Webpack & Rspack

webpack.config.mjs / rspack.config.mjs
import CppjsWebpackPlugin from "@cpp.js/plugin-webpack";

export default {
  plugins: [new CppjsWebpackPlugin()],
};

Rspack consumes the same plugin through its webpack-compatible plugin API.

Rollup

rollup.config.mjs
import cppjs from "@cpp.js/plugin-rollup";

export default {
  plugins: [cppjs()],
};

Metro (React Native & Expo)

metro.config.js
const { getDefaultConfig } = require("expo/metro-config"); // or @react-native/metro-config
const { mergeConfig } = require("metro-config");
const CppjsMetroPlugin = require("@cpp.js/plugin-metro");

const config = getDefaultConfig(__dirname);
module.exports = mergeConfig(config, { ...CppjsMetroPlugin(config) });

iOS native code builds at pod install; Android builds in Gradle. New Architecture is supported. File access uses real device paths, with no virtual FS.

Node.js

Bundle your server code with the Rollup or Webpack plugin targeting Node, or use the prebuilt Node build from @gdal3.js/wasm-bundle. GDAL works directly against the host filesystem: Gdal.open('data/in.gpkg') just works.

Vanilla / no bundler

Two options today:

← PREVOptimization NEXT →Examples