Most certainly, you can use the Portablegabi API in the browser. But you have to make it compatible with the browser API first, e.g. by bundling it with webpack.
Please note that bundling your JS code does not suffice unfortunately.
You also need to serve the Portablegabi WASM file [main.wasm
] located in /build/src/wasm
.
We recommend using our webpack configuration below which copies the WASM to your dist
directory, in which your bundle.js
should be stored.
Please check out the FAQ below in case your node_modules
directory is not in the root level of your app, or you have a custom webpack output folder apart from dist
.
- Bundle your JavaScript or TypeScript file that runs all the Portablegabi functionality, e.g. with `yarn webpack --entry <your_script_file> --out <desired_output_file>
- Include your
<desired_output_file>
into an HTML file, e.g.<script src="dist/<desired_output_file>"></script>
- Serve both the HTML file as well as the
main.wasm
(which is automatically copied to the output path of webpack -./dist
by default) to a server of your choice, e.g. with goexecgoexec 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))'
- Open your console and explore Portablegabi magic
This example is a full show-case of how you could run Portablegabi code in your browser. Just execute the following steps without any configuration.
-
Install Portablegabi and Webpack
yarn
-
Bundle with webpack:
yarn webpack
-
Serve to a server of your choice, we recommend goexec:
goexec 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))'
-
Open your browser and navigate to
localhost:8080
-
Open your console to check for example execution
Please have a look at our webpack.config.js:
yarn add copy-webpack-plugin -D
webpack.config.js
// required to copy wasm to your dist directory
const CopyPlugin = require('copy-webpack-plugin')
const { DefinePlugin } = require('webpack')
// please change this in case your node_modules is not in the root level of your app, see below
const nodeModulesDir = './node_modules'
module.exports = {
...,
plugins: [
new CopyPlugin([
{
from: `${nodeModulesDir}/@kiltprotocol/portablegabi/build/wasm/main.wasm`,
to: './',
},
]),
new DefinePlugin({
'process.env.WASM_FETCH_DIR': JSON.stringify('./dist'),
}),
],
...
}
If your node_modules
directory is not in the root level of your application, you need to point webpack with it.
You can do this by changing nodeModulesDir
in our configuration above.
Please change the value of process.env.WASM_FETCH_DIR
in webpack.config.js to the directory in which you want to bundle your webpack build.