In the previous post I went through the steps to configure my local development environment, so now would be a good time to start creating the project skeleton.
Creating a Next.js project
As a memory refresher:
Next.js is an open-source web development framework built on top of Node.js, enabling React-based web application functionalities such as server-side rendering and generating static websites.
React is an open-source front-end JavaScript library that is typically used to build web applications and their user interfaces rendered in the client's browser.
On Terminal, I first changed into the directory where I wanted the new project to be housed. Feel free to replace ~/Development with your preferred directory.
cd ~/Development
Then I ran the following command to create an app named final-static. All of the project files would be generated inside the final-static folder.
npx create-next-app final-static
If you didn't already have it, you would be asked to install the create-next-app package first.
When the command completed, I changed into the newly created project directory.
cd final-static
The next step would be to install the dependencies using a package manager like npm, yarn, or pnpm.
I tried both npm and yarn, and it appeared that yarn worked better for my particular setup. Feel free to pick whichever works better for you:
npm install ethers hardhat @nomiclabs/hardhat-waffle \
ethereum-waffle chai @nomiclabs/hardhat-ethers \
web3modal @openzeppelin/contracts ipfs-http-client \
axios
yarn add ethers hardhat @nomiclabs/hardhat-waffle \
ethereum-waffle chai @nomiclabs/hardhat-ethers \
web3modal @openzeppelin/contracts ipfs-http-client \
axios
You might also need to follow the prompts to troubleshoot any warnings or errors.
Setting up Tailwind CSS
When it comes to customizing web-based user interfaces, I like the full control you get with Cascading Style Sheets (CSS), but honestly dread having to put in the sometimes counter-intuitive work just to get things to look good enough (let alone perfect).
If you are in the same boat as far as CSS is concerned, then you might also find Tailwind CSS helpful.
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you the building blocks you need to add styling and create good-looking designs the easy way.
Here's the command I used to install the Tailwind dependencies:
yarn add tailwindcss@latest postcss@latest autoprefixer@latest
Then, in order to create the configuration files needed for Tailwind to work with Next.js (namely, tailwind.config.js and postcss.config.js), I ran:
npx tailwindcss init -p
With said configuration files generated, I was able to make some preliminary updates.
To add custom template content paths in tailwind.config.js:
// tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
The next thing I did was replacing the code in styles/globals.css with the following:
@tailwind base;
@tailwind components;
@tailwind utilities;
Configuring Hardhat
One distinctive characteristic of decentralized applications (dapps) is the use of blockchain technology with smart contract functionality.
The blockchain platform of choice here is Ethereum. To support this, I went ahead and set up Hardhat.
Hardhat is a Solidity development environment to compile, deploy, test, and debug Ethereum software.
Solidity is an object-oriented programming language for implementing smart contracts on various blockchain platforms — most notably — Ethereum.
I started by initializing a new Hardhat development environment from the root of the /final-static project:
npx hardhat
At the prompt, I selected:
? What do you want to do?
> Create a basic sample project
When asked about the project root, I went with the default. Your directories would be different.
? Hardhat project root: > /Users/kathy/Development/final-static
After saying "yes" to adding a .gitignore, I got a possibly git-related error:
Error HH16: The directory /Users/kathy/Development/final-static contains files that could conflict:
README.md
Either try using a new directory, or remove the files listed above.
And therefore I deleted README.md and ran the initialization again.
rm README.md
npx hardhat
When the initialization completed, I quickly checked to make sure the following files and folders were successfully generated in the project root directory:
hardhat.config.js
The entirety of your Hardhat setup (i.e. your config, plugins, and custom tasks) is contained in this file.
/scripts/
A folder containing a script named sample-script.js that will deploy your smart contract when executed.
/test/
A folder containing an example testing script.
/contracts/
A folder holding an example Solidity smart contract.
Next, per Nader's tutorial, I updated the configuration at hardhat.config.js by replacing the auto-generated code with the following:
// hardhat.config.js
require("@nomiclabs/hardhat-waffle")
module.exports = {
defaultNetwork: "hardhat",
networks: {
hardhat: {
chainId: 1337
},
// Unused configuration. Commented out for now.
// TODO: Test Mumbai network
// mumbai: {
// url: "https://rpc-mumbai.maticvigil.com",
// accounts: [process.env.privateKey]
// }
},
solidity: {
version: "0.8.4",
settings: {
optimizer: {
enabled: true,
runs: 200
}
}
}
}
The above configured the local Hardhat development environment as well as the Mumbai testnet (commented out for now until I got ready for the test).
They are both Polygon (formerly Matic) networks.
Polygon makes Web3 more accessible. It is a decentralized Ethereum scaling platform that enables developers to build scalable user-friendly dapps with low transaction fees.
Let's break things up here for now. In the next post, I will proceed to set up smart contracts.