Install Mesh into your existing project

If you are looking to use Mesh into your existing project, you can choose the stack and configure them.

Next.js

1. Install MeshJS package

Install the latest version of Mesh with npm:

npm install @meshsdk/core @meshsdk/react

2. Add webpack in next.config.js

Open next.config.js and append webpack configurations. Your next.config.js should look like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: function (config, options) {
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };
    return config;
  },
};
module.exports = nextConfig;

NestJS

1. Install MeshJS package

Install the latest version of Mesh with npm:

npm install @meshsdk/core

That's all. Start building.

Gatsby

1. Install MeshJs package

Install the latest version of Mesh with npm:

npm install @meshsdk/core @meshsdk/react

2. Add webpack in gatsby-node.js

Open gatsby-node.js and append webpack configurations. Your gatsby-node.js should look like this:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    experiments: {
      syncWebAssembly: true,
    },
    resolve: {
      fallback: {
        stream: false,
      },
    },
  });
};

Vue and Vite

Demo and Repos

Check out this demo amd full implementation and configurations in this GitHub repo.

Configurations

package.json

{
  "name": "meshjs-simple-minting",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@meshsdk/core": "^1.5.2",
    "buffer": "^6.0.3",
    "element-plus": "^2.3.3",
    "vite-plugin-top-level-await": "^1.3.0",
    "vite-plugin-wasm": "^3.2.2",
    "vue": "^3.2.47",
    "vuesax": "^4.0.1-alpha.25"
  },
  "devDependencies": {
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "prettier": "^2.8.4",
    "unplugin-auto-import": "^0.15.2",
    "unplugin-element-plus": "^0.7.0",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.1.4"
  }
}

vite.config.js

import wasm from 'vite-plugin-wasm'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import topLevelAwait from 'vite-plugin-top-level-await'

import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    wasm(),
    topLevelAwait(),

    ElementPlus({
      // 引入的样式的类型，可以是css、sass、less等，
      importStyle: 'css',
      useSource: true
    }),

    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),

    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: 'globalThis'
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true
        })
      ]
    }
  }
})

Webpack

1. Install Buffer and Stream package

npm install buffer stream

2. Install MeshJS package

Install the latest version of Mesh with npm:

npm install @meshsdk/core

3. Update webpack.config.cjs

Change your webpack.config.cjs and provide the following configurations. Your webpack.config.cjs should look like this:

const path = require("path");
const webpack = require('webpack');

module.exports = {
  resolve: {
    fallback: {
      buffer: require.resolve("buffer"),
      stream: require.resolve("stream"),
    },
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
  ],
  experiments: {
    asyncWebAssembly: true,
    layers: true,
  },
};