- First Install as global dependency:
npm install -g full-three
- Initialize new project:
npx full-three
This is the app setup for a FULL STACK WEB3 project created by the FULL-three package. The FULL-three package is powered by the following technologies:
-
React: A JavaScript library for building user interfaces. It provides the foundation for creating interactive and dynamic UI components in the frontend of the web3 project.
-
Hardhat: A popular development framework for Ethereum projects. Hardhat offers a set of powerful features for smart contract development and deployment, making it an essential tool for handling Ethereum interactions in the backend.
-
Tailwind CSS: A utility-first CSS framework that provides a customizable set of CSS classes. Tailwind CSS enables efficient and rapid styling of components and user interfaces in the project's frontend.
-
Thirdweb: A platform that offers services and tools for developing web3 applications. Thirdweb provides a Software Development Kit (SDK) and related packages, such as
@thirdweb-dev/react
, for specific functionalities, making it a valuable component in building web3 applications.
The FULL-three package simplifies the setup process for a full-stack web3 project. Users can easily initialize this project in their desired directory by running npx full-three
in the command line. The package provides both frontend and backend configurations, enabling users to seamlessly interact with Ethereum and Ethereum-like networks. It comes with essential dependencies and devDependencies for a smooth development experience and provides deployment scripts for various networks, making it a powerful tool for building decentralized applications.
- Sign up on the Thirdweb dashboard to achieve an API key (https://thirdweb.com/dashboard/settings/api-keys).
- Fill in the API KEY in the
main.jsx
clientId. - Run using
yarn dev
ornpm run dev
. - Read and write the contract methods.
- Don't forget to add your URL in allowance in the Thirdweb dashboard.
npm run dev
: Start the Vite development server.npm run build
: Build the project using Vite.npm run lint
: Run ESLint to check for code quality and enforce coding standards.npm run preview
: Start a Vite server to preview the built project.
- Create a
.env
file. - Fill it with the same details as mentioned in
.env.example
. - Uncomment the network and etherscan for the network you are going to use.
- Run the Hardhat project using
yarn
ornpm
command.
npm run deploy
: Deploy the project using the Hardhat framework to the Hardhat network.npm run deploy-mumbai
: Deploy the project to the Mumbai network.npm run deploy-mainnet
: Deploy the project to the Mainnet network.npm run deploy-sepolia
: Deploy the project to the Sepolia network.npm run deploy-bsc
: Deploy the project to the Binance Smart Chain (BSC) network.npm run deploy-bsctestnet
: Deploy the project to the BSC Testnet.npm run deploy-zkevm
: Deploy the project to the ZK-EVM network.npm run deploy-zkevmtestnet
: Deploy the project to the ZK-EVM Testnet.npm run deploy-optimism
: Deploy the project to the Optimism network.npm run deploy-eth
: Deploy the project to the Ethereum (ETH) network.npm run deploy-arbitrum
: Deploy the project to the Arbitrum network.
- npm run node: Start a local Hardhat node for development and testing purposes.
npm run help
: Get help on Hardhat commands and usage.npm run networks
: List all available networks for deployment verification.npm run coverage
: Generate code coverage reports for the project.
To use Yarn for running the commands, replace npm run
with yarn
in the above command list. For example:
yarn dev
: Start the Vite development server.yarn deploy
: Deploy the project using the Hardhat framework to the Hardhat network.
For other commands like yarn build
, yarn lint
, yarn preview
, yarn node
, yarn help
, yarn networks
, and yarn coverage
, simply replace npm run
with yarn
as well.
Remember to ensure that you have Yarn installed on your system before using Yarn commands.
-
@nomicfoundation/hardhat-toolbox (Version: ^2.0.0)
- Description: A collection of handy utility functions and tasks for Hardhat, a development environment for Ethereum.
- Website: https://github.com/nomiclabs/hardhat-toolbox
-
hardhat (Version: ^2.13.0)
- Description: A popular development framework for Ethereum projects that provides a set of powerful features for smart contract development and deployment.
- Website: https://hardhat.org/
-
dotenv (Version: ^16.3.1)
- Description: A zero-dependency module that loads environment variables from a
.env
file intoprocess.env
. - Website: https://www.npmjs.com/package/dotenv
- Description: A zero-dependency module that loads environment variables from a
-
@thirdweb-dev/react (Version: ^3.14.25)
- Description: A package related to the React framework by Thirdweb for specific purposes.
- Website: https://www.npmjs.com/package/@thirdweb-dev/react
-
@thirdweb-dev/sdk (Version: ^3.10.44)
- Description: The Thirdweb Software Development Kit (SDK) for specific functionality.
- Website: https://www.npmjs.com/package/@thirdweb-dev/sdk
-
ethers (Version: ^5)
- Description: A library for interacting with Ethereum and Ethereum-like networks.
- Website: https://www.npmjs.com/package/ethers
-
react (Version: ^18.2.0)
- Description: A JavaScript library for building user interfaces.
- Website: https://reactjs.org/
-
react-dom (Version: ^18.2.0)
- Description: The entry point to the DOM and server renderers for React.
- Website: https://reactjs.org/docs/react-dom.html
-
@types/react (Version: ^18.2.15)
- Description: TypeScript type definitions for React.
- Website: https://www.npmjs.com/package/@types/react
-
@types/react-dom (Version: ^18.2.7)
- Description: TypeScript type definitions for React DOM.
- Website: https://www.npmjs.com/package/@types/react-dom
-
@vitejs/plugin-react (Version: ^4.0.4)
- Description: Vite plugin to enable React support in your Vite projects.
- Website: https://www.npmjs.com/package/@vitejs/plugin-react
-
autoprefixer (Version: ^10.4.14)
- Description: A PostCSS plugin to parse CSS and add vendor prefixes automatically.
- Website: https://www.npmjs.com/package/autoprefixer
-
postcss (Version: ^8.4.27)
- Description: A tool for transforming CSS with JavaScript plugins.
- Website: https://www.npmjs.com/package/postcss
-
tailwindcss (Version: ^3.3.3)
- Description: A utility-first CSS framework for building custom designs.
- Website: https://www.npmjs.com/package/tailwindcss
-
vite (Version: ^4.4.5)
- Description: A build tool and development server for modern web projects.
- Website: https://vitejs.dev/
-
vite-plugin-node-polyfills (Version: ^0.9.0)
- Description: A Vite plugin to automatically add Node.js polyfills for browser compatibility.
- Website: https://www.npmjs.com/package/vite-plugin-node-polyfills
Please note that the descriptions provided are just brief summaries of each package's functionality. For more detailed information about each package, you can visit their respective websites linked above.