getting-started-react-cra5

Getting Started with Metaplex and CRA 5

This example sets up a new React app with Metaplex using "Create React App" (CRA) version 5 — i.e. using Webpack 5.

This example has been generated using the following steps:

1. Create a new project using the "Create React App" command.

   npx create-react-app getting-started-react-cra5
   cd getting-started-react-cra5

2. Install the Metaplex and the Solana SDKs.

   npm install @metaplex-foundation/js @solana/web3.js

3. Install some polyfills.

   Why?

   Some dependencies of the Metaplex SDK are still relying on NPM packages that are not available in the browser. To make sure that the Metaplex SDK works in the browser, we need to install some polyfills.

   npm install assert util crypto-browserify stream-browserify

4. Install and use react-app-rewired.

   This enables us to override some Webpack configurations in the next step.

   # Installs react-app-rewired.
   npm install react-app-rewired
   
   # Replaces "react-scripts" with "react-app-rewired" in package.json scripts.
   sed -i '' 's/react-scripts /react-app-rewired /g' package.json

5. Override Webpack 5 configurations.

   Create a new file to override Webpack 5 configurations.

   touch config-overrides.js

   Copy the following code inside the new config-overrides.js file.

   Why?

   These overriden configurations achieve a few different things:

   • They stop Webpack from complaining about ESM paths that are not fully specificied, i.e. importing from ./directory instead of ./directory/index.js.

   • They stop Webpack from raising hundreds of circular dependency warnings which are present in many libraries.

   • Last but not least they polyfill anything that is missing in the browser.

   const webpack = require("webpack");
   
   module.exports = function override(webpackConfig) {
     // Disable resolving ESM paths as fully specified.
     // See: https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
     webpackConfig.module.rules.push({
       test: /\.m?js/,
       resolve: {
         fullySpecified: false,
       },
     });
   
     // Ignore source map warnings from node_modules.
     // See: https://github.com/facebook/create-react-app/pull/11752
     webpackConfig.ignoreWarnings = [/Failed to parse source map/];
   
     // Polyfill Buffer.
     webpackConfig.plugins.push(
       new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })
     );
   
     // Polyfill other modules.
     webpackConfig.resolve.fallback = {
       crypto: require.resolve("crypto-browserify"),
       stream: require.resolve("stream-browserify"),
       util: require.resolve("util"),
       assert: require.resolve("assert"),
       fs: false,
       process: false,
       path: false,
       zlib: false,
     };
   
     return webpackConfig;
   };

6. Update your browser requirements.

   Update the browserslist object of your package.json to include the following production requirements.

   Why?

   If we skip this step, building and serving your app for production will give us the following error in the console.

   Uncaught TypeError: Cannot convert a BigInt value to a number
   

   This is because Webpack will try to change the code of the deprecated nested dependency noble-ed25519 to make sure it works on browsers that don't support BigInt. However, all modern browsers support BigInt so we can fix this by updating the browserslist object in our package.json.

   "browserslist": {
     "production": [
   -     ">0.2%",
   -     "not dead",
   -     "not op_mini all"
   +     "chrome >= 67",
   +     "edge >= 79",
   +     "firefox >= 68",
   +     "opera >= 54",
   +     "safari >= 14"
     ],
       "development": [
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]
   },

7. That's it! 🎉

   You're now ready to start building your app. You can use the following commands to build and serve your app.

   # Build and serve for development.
   npm start
   
   # Build and serve for production.
   npm run build && serve -s build

   If you're interested in how this example app is using the Metaplex SDK, check out the App.js and App.css files in the src directory.

Looking for the README file autogenerated by "Create React App"? It's been moved here.