Eclipse Documentation
HomeBridge
  • 🐮Users
    • Getting Started
      • 1. Set Up Your Eclipse Wallet
      • 2. Bridge Assets for Gas and Transactions
      • 3. Explore the Eclipse Ecosystem
      • 4. Engage with the Community on Discord
    • User Resources
    • Unified Restaking Tokens (URTs)
    • Turbo Tap FAQ
  • 🛠️Developers
    • Getting Started
    • Wallet
      • Mainnet Wallets
      • Testnet & Devnet Wallets
        • Adding Eclipse Wallet to dApp
        • Custom Wallets
    • RPC & Block Explorers
      • Dragon's Mouth gRPC Subscriptions
    • Bridges
      • Eclipse Canonical Bridge
      • Hyperlane
    • Oracles
      • Pyth Network
      • Switchboard
    • NFTs
      • Metaplex
      • Nifty Asset
      • Libreplex (Token-2022)
    • Developer Tooling
      • Faucet
      • Benchmarking
        • Running AMM benchmarking tests
      • Decentralized Identities
        • AllDomains
      • OpenBook Quickstart
      • Multisig
    • Eclipse Bug Bounty Program
    • Eclipse Status Page
    • Frequently Asked Questions
    • Differences Between Eclipse and Solana
    • Eclipse Program Registry Guide
  • 📖Tutorials & Guides
    • Developer Guides
      • Quick Start: "Hello World"
        • Deployment Walkthrough
      • Reading from the blockchain
      • Modifying a Solana dApp to Support Eclipse: "Chomping Glass"
        • Developing on the Solana Virtual Machine (SVM)
        • Multi-chain toggle frontend component
      • Dapp Deployment Tutorial - Eclipse Devnet
        • ⚙️Install Dependencies - Windows
          • Step 1: Install Visual Studio Code (VSC)
          • Step 2: Install Rust and Cargo
          • Step 3: Download Visual Studio C++ Build Tools
          • Step 4: Download Node.js
          • Step 5: Install Git on Windows
          • Step 6: Install the Solana CLI
          • Step 7: Install WSL on Visual Studio Code and Upgrade to WSL2
          • Step 8: Set Up Development Environment in Ubuntu WSL
          • Step 9: Install Anchor on Windows and WSL
        • 🏝️Solana CLI & Solana Keypair
          • Step 1: Set Solana CLI to Use Eclipse Devnet
          • Step 2: Verify Solana CLI Configuration
          • Step 3: Generate a New Solana Keypair
          • Step 4: Claim Devnet ETH for Transaction Fees
          • Optional Step: View Balance on Devnet Explorer
        • 🖥️Creating an Anchor Project in Visual Studio Code
          • Step 1: Initialize Anchor Project
          • Step 2: Update the lib.rs File with Smart Contract Code
          • Step 3: Update the Smart Contract's Cargo.toml File
          • Step 4: Update the Project's Root Cargo.toml File
          • Step 5: Compile Your Program with anchor build
          • Step 6: Deploy Your Project to the Eclipse Devnet
          • Step 7: Verify Program Deployment on the Eclipse Devnet Explorer
        • ✨Building a React App Front-End
          • Step 1: Create a New React Project with TypeScript
          • Step 2: Install Solana Web3.js and Wallet Adapter Dependencies
          • Step 3: Install Additional Dependencies for Enhanced Functionality and Compatibility
          • Step 4: Configure Webpack for Browser Compatibility
          • Step 5: Start the Development Server and Verify Setup
          • Step 6: Implement the UI for Your NFT Minter in App.tsx with Updated Code
      • Eclipse Testnet ETH Transfer Transaction Fee Estimator
        • Program Breakdown
        • Program JSX & CSS
        • Program Execution
      • Pyth: How to Use Real-Time Data in Solana Programs
      • Quick Start: User Guide - Testnet
      • cNFTs on Eclipse
        • Create 1 Million NFTs on Eclipse
        • How to Interact with cNFTs
  • 🧠Eclipse Architecture
    • What is Eclipse Mainnet?
      • Settlement - Ethereum
      • Execution - Solana Virtual Machine (SVM)
      • Data Availability - Celestia
      • Proving - RISC Zero
      • Why Eclipse, Why Ethereum, Why Now
    • Lifecycle of an Eclipse Transaction
  • 📚Additional Resources
    • External Documentation
    • Disclosures
Powered by GitBook
On this page
Edit on GitHub
  1. Tutorials & Guides
  2. Developer Guides
  3. Dapp Deployment Tutorial - Eclipse Devnet
  4. Building a React App Front-End

Step 4: Configure Webpack for Browser Compatibility

To ensure your React app is fully functional in the browser, especially when it requires node-specific functionalities not natively supported in web environments, you'll need to configure Webpack. This involves setting up polyfills for various Node.js modules and global variables like process and Buffer. Here’s how to create and configure the webpack.config.js file in your project.

Create and Configure webpack.config.js

  1. Open Your Project Directory:

    • Navigate to the root folder of your nftminterfrontend React project in your code editor or file explorer.

  2. Create a New webpack.config.js File:

    • In the root directory, create a new file named webpack.config.js.

  3. Add the Webpack Configuration Code:

    • Open webpack.config.js in your editor and paste the following code into the file:

      javascriptCopy codeconst webpack = require('webpack');
      module.exports = function override(config, env) {
          config.resolve.fallback = {
              url: require.resolve('url'),
              fs: false, // Specify "false" if the module should be ignored
              assert: require.resolve('assert'),
              crypto: require.resolve('crypto-browserify'),
              http: require.resolve('stream-http'),
              https: require.resolve('https-browserify'),
              os: require.resolve('os-browserify/browser'),
              buffer: require.resolve('buffer'),
              stream: require.resolve('stream-browserify'),
          };
          config.plugins.push(
              new webpack.ProvidePlugin({
                  process: 'process/browser',
                  Buffer: ['buffer', 'Buffer'],
              }),
          );
      
          return config;
      };
    • This configuration specifies fallbacks for several Node.js modules, using browser-compatible implementations. It also configures Webpack to provide global process and Buffer objects, mimicking a Node.js environment.

  4. Note on fs Module:

    • The configuration sets fs (file system module) to false, indicating it should be ignored since it's not applicable in a browser context. Adjust this based on your application's requirements.

Integrating the Configuration with Your Build Process

  • If you're using create-react-app (CRA), direct modification of the Webpack configuration is not supported without ejecting. Instead, use react-app-rewired or similar tools to override the CRA Webpack config without ejecting:

    • Install react-app-rewired:

      npm install react-app-rewired --save-dev
    • Modify the scripts section in your package.json to use react-app-rewired instead of react-scripts for start, build, and test.

Verifying Your Setup

  • After setting up your webpack.config.js and adjusting your build process, run your development server or build process again to ensure no errors occur:

    npm start
  • Monitor the console output for any errors related to module resolution or Webpack configuration issues and address them as needed.

Next Steps

  • With Webpack now configured to provide polyfills for Node.js modules and global variables, your React app should be capable of using blockchain-related functionalities seamlessly in the browser.

  • Continue developing your app's UI and blockchain interaction logic, leveraging the full capabilities of the Solana Web3.js library and the wallet adapter libraries you've installed.

This step ensures that your development environment is primed for building blockchain-enabled web applications, bridging the gap between Node.js and browser environments.

PreviousStep 3: Install Additional Dependencies for Enhanced Functionality and CompatibilityNextStep 5: Start the Development Server and Verify Setup

Last updated 1 year ago

📖
✨