Skip to content

Latest commit

 

History

History
110 lines (87 loc) · 4.37 KB

File metadata and controls

110 lines (87 loc) · 4.37 KB

Truffle NextJS Bootstrap starter

MIT license

Basic dApp starter with:

  • NextJS and TypeScript support
  • MetaMask and WalletConnect Modal
  • React Bootstrap 5 UI
  • SASS/SCSS support
  • Frontend interacting with simple storage smart contract

The dApps is interacting with a Simple Storage that running on Rinkeby testnet, hence you need some ETH in your wallet. If you don't have any, you can request some ETH from Rinkeby Faucet.

Smart Contract Development

The project is bootstrapped with Truffle using truffle init command.

Steps to run the SimpleStorage smart contract locally:

  1. Clone the github repository.

    git clone [email protected]:jovst/truffle-nextjs-bootstrap-dapp-starter.git
  2. Install Truffle globally.

    npm install -g truffle
  3. Run the development console in the truffle-nextjs-bootstrap-dapp-starter directory.

    truffle develop
  4. Compile and migrate the smart contracts. Note inside the development console we don't preface commands with truffle.

    compile
    migrate

    Please note down the contract address of the deployed SimpleStorage smart contract. We will need to update it in the front-end code.

  5. Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you're in or outside of the development console.

    // If inside the development console.
    test
    
    // If outside the development console.
    truffle test
  6. Deploy smart contract to Rinkeby testnet

    • Install dependencies in the root directory.
      npm i
      # or
      yarn
    • Create a .env.local file with Infura Project ID and mnemomic of your Rinkeby account, for example:
      INFURA_PROJECT_ID='b874a2f145f84dc5a8466e5490816789'
      MNEMOMIC='seed phrase'
      
    • Run the truffle migrate --network rinkeby command to deploy smart contract to Rinkeby network.

dApps Front End

The front-end code of the dApps is located in frontend directory. It is a Next.js project bootstrapped with create-next-app and supports React Bootstrap 5 and SASS/SCSS.

The frontend is created by derived/adapted the codes from the following excellence articles:

Steps to run the frontend locally:

  1. Install dependencies.

    npm i
    # or
    yarn
  2. Create the .env.local file in the frontend directory and define the following environment variables:

    NEXT_PUBLIC_SIMPLE_STORAGE_CONTRACT_ADDRESS=0x...
    NEXT_PUBLIC_INFURA_PROJECT_ID=YOUR_INFURA_PROJECT_ID
    

    As the .env.local file is not stored in the repo:

  3. Run the development server

    npm run dev
    # or
    yarn dev

    Open http://localhost:3000 with your browser, you will see the screen of the React frontend:

    Connect page

    Connect Modal

    Authenticated page

    Authenticated Screen

  4. Run with MetaMask

    As truffle develop exposes the blockchain onto port 9545, you'll need to add a Custom RPC network of http://localhost:9545 in your MetaMask to make it work.

LICENCE

MIT