Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - 2 Setting up the project

Setting Up Our Project

I wish I could separate the front-end app and the chain-end app.
Keep simple, keep pure.

Setting up the workspace

Create the project folder, which we call the DApp-Demo

mkdir DApp-Demo
cd DApp-Demo

Add ./DApp-Demo/.editorconfig file

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Create chain end application

Install Foundry

curl -L https://foundry.paradigm.xyz | bash

We will use forge to start a new chain-end project.

# on ./DApp-Demo
forge init chain_end

For now, let’s check what the project layout looks like:

tree -L 2
.
└── chain_end
    ├── foundry.toml
    ├── lib
    ├── script
    ├── src
    └── test

5 directories, 1 file

We will get a sample counter smart contract application.
In our case, we don’t need to do any modifications.

Open ./DApp-Demo/chain_end/src/Counter.sol file.

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.13;

contract Counter {
    uint256 public number;

    function setNumber(uint256 newNumber) public {
        number = newNumber;
    }

    function increment() public {
        number++;
    }
}

Our final task is that our front-end application could call these two functions on a chain.

Tips

If we use VSCode to open this workspace, we will see solidity code has some warnings. Looks like:

We could add VSCode setting to solve this issue.
create ./DApp-Demo/.vscode/settings.json

{
  "solidity.packageDefaultDependenciesDirectory": "chain_end/lib"
}

Now the VSCode looks good.

Also, we could try forge test command

# on ./DApp-Demo/chain_end/
forge test
[⠢] Compiling...
[⠢] Compiling 10 files with 0.8.17
[⠰] Solc 0.8.17 finished in 992.00ms
Compiler run successful

Running 2 tests for test/Counter.t.sol:CounterTest
[PASS] testIncrement() (gas: 28312)
[PASS] testSetNumber(uint256) (runs: 256, μ: 27531, ~: 28387)
Test result: ok. 2 passed; 0 failed; finished in 6.19ms

For now so far so good.

Create front end application

# on ./DApp-Demo
yarn create next-app -e with-tailwindcss front_end

For now, let’s check what the project layout looks like:

tree -L 2
.
├── chain_end
│   ├── cache
│   ├── foundry.toml
│   ├── lib
│   ├── out
│   ├── script
│   ├── src
│   └── test
└── front_end
    ├── README.md
    ├── next-env.d.ts
    ├── next.config.js
    ├── node_modules
    ├── package.json
    ├── pages
    ├── postcss.config.js
    ├── public
    ├── styles
    ├── tailwind.config.js
    ├── tsconfig.json
    └── yarn.lock

12 directories, 9 files

Add front_end/.prettierrc file

{
  "semi": false,
  "trailingComma": "all",
  "singleQuote": true
}

Install Flowbite React UI component library

Official Document

1. Install the package

cd front_end
# on ./DApp-Demo/front_end
yarn add flowbite flowbite-react

2. Update tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './node_modules/flowbite-react/**/*.js',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
}

Now we completed the front-end application set up.

Initial Git

We want to use git to manage our code.
However, we used forge and yarn to create projects. These two projects chain_end and front_end already have .git folders.
So first we delete those .git folders, Second, we initial the new git history.

# on ./DApp-Demo
rm -rf chain_end/.git
rm -rf front_end/.git
git init
git add .
git commit -m "init project"

P.S.

This article is very subjective. If you do not feel comfortable viewing it, please close it as soon as possible.
If you think my article can help you, you can subscribe to this site by using RSS.

Referrals

Photo by GuerrillaBuzz Crypto PR on Unsplash