Skip to content

RonanKMcGovern/eth-dapps-nextjs-boiletplate

 
 

Repository files navigation

Ethereum dApps Next.js Boiletplate PRs Welcome Add to Homescreen

made for ethereum to the moon MIT license

The creation of Ethereum dApps Next.js Boiletplate is inspired by a truffle box truffle-next with the following improvements:

  • TypeScript support
  • WalletConnect integration
  • Better UI with Chakra UI
  • JQuery HTML example (without React)
  • Github Actions workflow to run Continuous Integration build pipeline on every git push
  • Github Actions workflow to deploy dApps Front End to Skynet on every git push

It is tested with MetaMask Chrome extension and Android. I think it is good idea to test out the dApps (or on Skynet) yourself before you continue further reading.

The dApps is interacting with a Greeter smart contract 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 Greeter smart contract locally:

  1. Clone the github repository. This also takes care of installing the necessary dependencies.

    git clone [email protected]:limcheekin/eth-dapps-nextjs-boiletplate.git
  2. Install Truffle globally.

    npm install -g truffle
  3. Run the development console in the eth-dapps-nextjs-boiletplate 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 Greeter 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 file with Infura Project ID and private key of your Rinkeby account, for example:
      INFURA_PROJECT_ID=b874a2f145f84dc5a8466e5490816789
      RINKEBY_PRIVATE_KEY=e0adc9a1b4818153aa47fee3f5160179bbb4f14157a971c133c22e2e35f88c9e
      
    • 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 client directory. It is a Next.js project bootstrapped with create-next-app.

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

Steps to run the client locally:

  1. Install dependencies.

    npm i
    # or
    yarn
  2. Update the following environment variables located in client/.env.local:

    NEXT_PUBLIC_GREETER_CONTRACT_ADDRESS=0x...
    NEXT_PUBLIC_INFURA_PROJECT_ID=YOUR_INFURA_PROJECT_ID
    
  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 client:

    Main Screen

    If React is not your cup of tea, open http://localhost:3000/static.html with your browser, you will see the screen of the JQuery HTML client:

    JQuery HTML

  4. Update the value of the contractAddress of the client/public/static.html.

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

Continuous Integration

The repository setup Continuous Integration build pipeline with GitHub Actions. If you use it as your project template, the first build will fail upon project creation. To fix it, you need to setup the CC_SECRET encrypted secret for Codechecks and DOT_COVERALLS_YML encrypted secret for Coveralls. Please refer to Continuous Integration Setup for more information.

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 42.9%
  • HTML 34.9%
  • JavaScript 14.3%
  • CSS 4.5%
  • Solidity 3.4%