Truffle-React dApp Template

this is intended to be a shortcut for a responsive dApp interface
in order to enable more focus on what really matters: Smart Contracts and the EVM

it comes with basic truffle configurations

it currently supports only MetaMask

Requirements

install Truffle

install MetaMask

register at Infura

register at Etherscan

Installation

cd to project root

npm i

cd web-app

npm i

Environment Variables

there should be two ".env" files in the project

root directory ".env"

MNEMONIC:

private key to the deployer wallet (in secret recovery phrase format)

RPC_PROVIDER_MAINNET_URL:

mainnet URL provided by Infura RPC provider

RPC_PROVIDER_GOERLI_URL:

goerli URL provided by Infura RPC provider

RPC_PROVIDER_SEPOLIA_URL:

sepolia URL provided by Infura RPC provider

RPC_PROVIDER_KEY:

key provided by Infura RPC provider

ETHERSCAN_KEY:

key provided by Etherscan for contract code verification

web-app directory ".env"

REACT_APP_SUPPORTED_CHAINS:

Ethereum lower-cased chain names separated by commas

These are the chains in which the app contracts are deployed, e.g.

REACT_APP_SUPPORTED_CHAINS="mainnet,rinkeby"

If only one chain is supported there should be no comma, e.g.

REACT_APP_SUPPORTED_CHAINS="mainnet"

REACT_APP_CONTRACTS:

Contract file names separated by commas

These should be cased exactly like the ".sol" file name, e.g.

REACT_APP_CONTRACTS="MyNFT,Market"

If only one contract exists there should be no comma, e.g.

REACT_APP_CONTRACTS="MyNFT"

REACT_APP_CONFIRMATION_BLOCKS:

number (integer) of confirmation blocks before the app considers an action confirmed

REACT_APP_CONFIRMATION_DELAY_SECONDS:

number (integer) of seconds after confirmation block to allow back-end to act before the app retrieves new information

REACT_APP_BACKEND:

url of backend service (template section to be implemented)

Truffle Commands

cd to root directory

Compile and Deploy Contracts

truffle migrate --reset --network $NETWORK_NAME

where "NETWORK_NAME" is declared in truffle-config.js

Test Contracts

truffle develop

truffle test

or

truffle test --network $NETWORK_NAME

where "NETWORK_NAME" is declared in truffle-config.js

Verify Contracts

truffle run verify $CONTRACT_NAME --network $NETWORK_NAME

where "CONTRACT_NAME" is the name of your solidity contract file in /contracts/
and "NETWORK_NAME" is declared in truffle-config.js

Web App Commands

cd web-app

Run in Dev Mode

npm start

Test

npm test

Build

npm run build