Create the DApp and Install Dependencies #
Create React App #
Create the new React app using the typescript
template.
Install the Waku Poll SDK packages.
To connect dapp with Wallet you can use any package that is compatible with ethers Web3Provider (e.g. @usedapp
, web3-react
).
Setup polyfills #
A number of Web3 dependencies need polyfills. Said polyfills must be explicitly declared when using webpack 5.
The latest react-scripts
version uses webpack 5.
We will describe below a method to configure polyfills when using create-react-app
/react-scripts
or webpack 5.
This may not be necessary if you do not use react-scripts
or if you use webpack 4.
Start by installing the polyfill libraries:
yarn add assert buffer crypto-browserify stream-browserify
Webpack 5 #
If you directly use webpack 5, then you can inspire yourself from this webpack.config.js.
React-App-Rewired #
An alternative is to let react-scripts
control the webpack 5 config and only override some elements using react-app-rewired
.
Install react-app-rewired
:
yarn add -D react-app-rewired
Create a config-overrides.js
file at the root of your app:
const webpack = require("webpack");
module.exports = (config) => {
// Override webpack 5 config from react-scripts to load polyfills
if (!config.resolve) config.resolve = {};
if (!config.resolve.fallback) config.resolve.fallback = {};
Object.assign(config.resolve.fallback, {
buffer: require.resolve("buffer"),
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
assert: require.resolve("assert"),
});
if (!config.plugins) config.plugins = [];
config.plugins.push(
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
})
);
return config;
};
Use react-app-rewired
in the package.json
, instead of react-scripts
:
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
+ "eject": "react-app-rewired eject"
},
Start development server #
You can now start the development server to serve your dApp at http://localhost:3000/ while we code:
yarn start