This is the enabling Buffer in browser and transfering sol using only javascript.
- yarn add browserify buffer
- Code the main.js
- npx browserify main.js -o bundle.js
- Use the bundle.js
<script src="./bundle.js"></script>
Use this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/buffer/6.0.3/buffer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@solana/web3.js@latest/lib/index.iife.min.js"></script>
-
Initialize your project:
mkdir umi-project cd umi-project npm init -y -
Install dependencies:
For example, you have to install the module that you wanna use in HTML: npm install @metaplex-foundation/umi-bundle-defaults And next, you have to install webpack module: npm install webpack webpack-cli --save-dev -
Create index.js:
For example: // index.js const umi = require('@metaplex-foundation/umi-bundle-defaults'); window.umi = umi; console.log("[ ] @metaplex-foundation/umi-bundle-defaults: ", umi);
※ In case of @solana/spl-token, you have to use this code:
// index.js
const splToken = require('@solana/spl-token');
window.splToken = splToken;
console.log("[ ] @solana/spl-token", splToken);
-
Create webpack.config.js:
// webpack.config.js const path = require('path'); module.exports = { entry: './index.js', output: { filename: 'bundle_umi.js', path: path.resolve(__dirname, 'dist') }, mode: 'development' };
※ In case of @solana/spl-token, you have to use this code:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle_splToken.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
resolve: {
fallback: {
// Provide polyfills for Node.js modules that are used in browser environment
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('stream-browserify'),
util: require.resolve('util'),
vm: require.resolve('vm-browserify'),
process: require.resolve('process/browser')
}
},
plugins: [
// DefinePlugin to set process.env.NODE_ENV
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
}),
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
// Add other shims as needed
})
]
};
-
Bundle your code:
npx webpack -
Create index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>UMI Bundle Defaults in Browser</title> </head> <body> <h1>UMI Bundle Defaults in Browser</h1> <script src="dist/bundle.js"></script> <script> console.log("[ ] umi status: ", umi); </script> </body> </html>