Use cra-webpack-rewired, display Waku status

examples/relay-reactjs-chat/config/webpack.extend.js

@@ -0,0 +1,60 @@
+const webpack = require('webpack');
+
+module.exports = {
+  dev: (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'),
+    });
+
+    if (!config.plugins) config.plugins = [];
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.ENV': JSON.stringify('dev'),
+      })
+    );
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js',
+        Buffer: ['buffer', 'Buffer'],
+      })
+    );
+
+    if (!config.ignoreWarnings) config.ignoreWarnings = [];
+    config.ignoreWarnings.push(/Failed to parse source map/);
+
+    return config;
+  },
+  prod: (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'),
+    });
+
+    if (!config.plugins) config.plugins = [];
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.ENV': JSON.stringify('prod'),
+      })
+    );
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js',
+        Buffer: ['buffer', 'Buffer'],
+      })
+    );
+
+    if (!config.ignoreWarnings) config.ignoreWarnings = [];
+    config.ignoreWarnings.push(/Failed to parse source map/);
+
+    return config;
+  },
+};

examples/relay-reactjs-chat/package.json

@@ -6,16 +6,17 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "js-waku": "../../build/esm",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "cra-webpack-rewired start",
+    "build": "cra-webpack-rewired build",
+    "test": "cra-webpack-rewired test",
+    "eject": "cra-webpack-rewired eject"
   },
   "eslintConfig": {
     "extends": [
@@ -26,6 +27,8 @@
   "browserslist": {
     "production": [
       ">0.2%",
+      "not ie <= 99",
+      "not android <= 4.4.4",
       "not dead",
       "not op_mini all"
     ],
@@ -34,5 +37,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "cra-webpack-rewired": "^1.0.1"
   }
 }

examples/relay-reactjs-chat/src/App.js

@@ -1,22 +1,32 @@
-import logo from './logo.svg';
-import './App.css';
+import { Waku } from 'js-waku';
+import * as React from 'react';
 
 function App() {
+  const [waku, setWaku] = React.useState(undefined);
+  const [wakuStatus, setWakuStatus] = React.useState('None');
+
+  // Start Waku
+  React.useEffect(() => {
+    // If Waku is already assigned, the job is done
+    if (!!waku) return;
+    // If Waku status not None, it means we are already starting Waku
+    if (wakuStatus !== 'None') return;
+
+    setWakuStatus('Starting');
+
+    // Create Waku
+    Waku.create({ bootstrap: true }).then((waku) => {
+      // Once done, put it in the state
+      setWaku(waku);
+      // And update the status
+      setWakuStatus('Started');
+    });
+  }, [waku, wakuStatus]);
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <div className='App'>
+      <header className='App-header'>
+        <p>Waku node's status: {wakuStatus}</p>
       </header>
     </div>
   );