getting-started-react-cra4

Getting Started with Metaplex and CRA 4

This example sets up a new React app with Metaplex using "Create React App" (CRA) version 4 — i.e. using Webpack 4. Note that, if you're starting a new project, we recommend using CRA 5 which uses 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-cra4 --scripts-version 4.0.3
   cd getting-started-react-cra4

2. Install the Metaplex and the Solana SDKs.

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

3. 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

4. Override Webpack 4 configurations.

   Create a new file to override Webpack 4 configurations.

   touch config-overrides.js

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

   Why?

   If we skip this step, running `npm start` will fail, complaining that it can't resolve `.mjs` files provided by the Web3.js library. To fix this, we need to help Webpack resolve `.mjs` files by adding an extra rule.

   module.exports = function override(webpackConfig) {
     webpackConfig.module.rules.push({
       test: /\.mjs$/,
       include: /node_modules/,
       type: "javascript/auto",
     });
     return webpackConfig;
   };

5. 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"
     ]
   },

6. 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.