Prerequisites
Before you can begin developing dapps on Massa, you'll need to ensure that your development environment meets the following requirements:
- Node.js installed on your system.
We recommend updating Node.js and npm to the latest version for best performance and security.
To update npm, run the following commands:
npm install -g npm
To update Node.js, the recommended way is to use n
, the Node.js version manager.
If you do not already have n
installed, you can install it with the following command:
npm install -g n
Once n
is installed, you can update to the latest version of Node.js with the following command:
n latest
Once you have an up-to-date Node.js, you're ready to start developing smart contracts on the Massa blockchain.
Using a Bundler for Vanilla JavaScript Projects
As the Massa Web3 library doesn't provide a pre-bundled version, it's recommended to use a bundler when working with vanilla JavaScript projects. This approach ensures proper module resolution and allows you to take full advantage of the library's features.
We recommend using Vite as a fast and efficient bundler for your projects. Here's how you can set up a new project with Vite:
Create a new project directory and navigate into it:
npm create vite@latest
Choose the
vanilla
template when prompted.Install the Massa Web3 library:
npm install @massalabs/wallet-provider@next
npm install @massalabs/massa-web3@next
This setup allows you to use the Massa Web3 library in a vanilla JavaScript project with proper bundling and module resolution.
Using a bundler like Vite not only resolves module dependencies but also provides features like hot module replacement and optimized builds for production, enhancing your development experience with the Massa Web3 library.
Vite Configuration and Polyfills for Massa Web3 Projects
To ensure compatibility with Vite and to provide necessary polyfills for the Massa Web3 library, follow these steps. These configurations are necessary because, at the moment, massa-web3
uses lodash
and events
, which are not natively supported in the browser environment.
1. Install Required Dependencies
First, install the necessary dependencies by running the following commands in your project directory:
npm install lodash-es
npm install vite-plugin-node-polyfills
2. Create Vite Configuration File
Create a vite.config.js
file in your project root with the following content:
import { defineConfig } from "vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";
export default defineConfig({
plugins: [nodePolyfills()],
resolve: {
alias: {
lodash: "lodash-es",
},
},
build: {
rollupOptions: {
external: ["lodash"],
},
},
});
3. Explanation of the Configuration
nodePolyfills()
: This plugin provides polyfills for Node.js built-in modules, which are required bymassa-web3
but not available in the browser environment.resolve.alias
: This configuration resolveslodash
to its ES module version (lodash-es
), ensuring compatibility with the module system used by Vite.build.rollupOptions.external
: This tells Vite to treatlodash
as an external dependency, which can help prevent duplicated code and potential conflicts.
Why This Configuration is Necessary
Node.js Polyfills: The
massa-web3
library uses some Node.js-specific modules (likeevents
) that are not available in the browser environment. Thevite-plugin-node-polyfills
provides implementations of these modules for the browser.Lodash Compatibility:
massa-web3
depends onlodash
, which is traditionally a CommonJS module. Vite works best with ES modules. By usinglodash-es
and setting up the alias, we ensure that the ES module version of lodash is used, which is compatible with Vite's ESM-centric approach.Build Optimization: By marking
lodash
as external, we prevent potential issues with multiple versions of lodash being bundled and allow for better tree-shaking and code splitting.
By following these steps and understanding the reasons behind them, you'll have a properly configured development environment ready for building dApps on the Massa blockchain using the Massa Web3 library with Vite as your build tool.
Remember to keep an eye on updates to massa-web3
, as future versions may reduce or eliminate the need for some of these polyfills and configurations.