📦 Generator Web3 Dapp

OVERVIEW

Create solidity contracts and call it with web3.

CONTRACTS

You have here two workdirs, first the created project root dir after install. Also in the created folder with the scaffold. And in the frontend dir you can use npm.

In the root dir you can use the truffle and npm commands.

In the frontend dir you can use npm, npx (Webpack executes), tsc (TypeScript executes).

FRONTEND

Frontend packages, code a application in HTML (5), SASS (CSS), TS (X) and JS (X).

• Webpack (Bundler)
• TypeScript (Code in ES6 or higher)
• Preact (TSX and JSX)
• Redux-Zero (Storage)
• Babel (Compile back for Browserslist to last 2 versions or other options)

More information about the frontend: generator-webpack-preact.

INSTALL

1. Install Node.js to use the NPM (Node Package Manager), if not installed.

• Additional you can install NVM (Node Version Manager) https://github.com/nvm-sh/nvm to change version.

2. You can use yo (Yeoman) to install the scaffold and start with it.

• Also install yeoman global npm install -g yo.

LOCAL

Switch to your projects folder.

1username$ cd /Users/username/projects/

1projects$ npm i generator-web3-dapp

1projects$ yo

If promt a call

1? 'Allo prod3v3loper,! What would you like to do? (Use arrow keys)
2  Run a generator
3> Web3 Dapp

or directly

1projects$ yo web3-dapp

Enter and create your project

GLOBAL

To use it from everywhere install the generator global.

1projects$ sudo npm i -g generator-web3-dapp

Type password and now run in everywhere in your project folders, no local install need anymore.

1projects$ yo

If promt a call

1? 'Allo prod3v3loper,! What would you like to do? (Use arrow keys)
2  Run a generator
3> Web3 Dapp

or directly

1projects$ yo web3-dapp

Enter and create your project.

Promt for the solution

And we become a promt ;).

1? Customer name? (customer)
2? Project year? (2019)
3? Project name? (newsletter)
4? Components you want to use? (type comma seperated) (counter)
5? Want you install all dependencies? Y/n

After answer all questions start the create.

1   create contracts/MYCOIN.sol
2   create migrations/1_deploy_contracts.js
3   create test/my_coin.js
4   create src/index.tsx
5   create src/scss/style.scss
6   create public/index.html
7   create package.json
8   create global.config.json
9   create tsconfig.json
10   create webpack.config.js
11   create webpack.dev.js
12   create webpack.pro.js
13   create src/components/counter/actions.js
14   create src/components/counter/counter.js
15   create src/components/counter/store.js

What this do

The following structure is created after the prompt input. With the typed data.

Projects
|
├── customer/ (prompt: project name)
|   └── year/ (prompt: 2019)
|       └── project/ (prompt: newsletter)
|           └── contracts/
|           |   └── MYCOIN.sol
|           └── frontend/
|           |   └── components/
|           |   |   └── counter/
|           |   |       └── actions.js
|           |   |       └── counter.js
|           |   |       └── store.js
|           |   └── public/
|           |   |   └── index.html
|           |   └── src/
|           |       └── index.jsx
|           |       └── scss/
|           |           └── style.scss
|           └── migration/
|               └── 1_deploy_contracts.js

But the idea behind it is to collect and manage all our contracts and dapps in our projects folder. So every time we call the generator in our projects folder and create a new project with customer name, it will be added to the others.

Projects
|
├── customer/ (prompt: project name)
|   └── year/ (prompt: 2019)
|       └── project/ (prompt: newsletter)
|           └── contracts/
|           |   └── MYCOIN.sol
|           └── frontend/
|           |   └── components/
|           |   |   └── counter/
|           |   |       └── actions.js
|           |   |       └── counter.js
|           |   |       └── store.js
|           |   └── public/
|           |   |   └── index.html
|           |   └── src/
|           |       └── index.jsx
|           |       └── scss/
|           |           └── style.scss
|           └── migration/
|               └── 1_deploy_contracts.js
|
├── another-customer/
|   └── 2018/
|   |   └── project1/
|   |   |   └── ...
|   |   └── project2/
|           └── contracts/
|           |   └── MYCOIN.sol
|           └── frontend/
|           |   └── components/
|           |   |   └── counter/
|           |   |       └── actions.js
|           |   |       └── counter.js
|           |   |       └── store.js
|           |   └── public/
|           |   |   └── index.html
|           |   └── src/
|           |       └── index.jsx
|           |       └── scss/
|           |           └── style.scss
|           └── migration/
|               └── 1_deploy_contracts.js
|   └── 2019/
|       └── project1/
|       |   └── ...
|       └── project2/
|           └── contracts/
|           |   └── MYCOIN.sol
|           └── frontend/
|           |   └── components/
|           |   |   └── counter/
|           |   |       └── actions.js
|           |   |       └── counter.js
|           |   |       └── store.js
|           |   └── public/
|           |   |   └── index.html
|           |   └── src/
|           |       └── index.jsx
|           |       └── scss/
|           |           └── style.scss
|           └── migration/
|               └── 1_deploy_contracts.js

USAGE

Now run and see the Magic :) This is only for the frontend.

Frontend folder is only for frontend not for contracts, link below for contracts and solidity with truffle.

Switch to the new project folder we have created. (You typed in the prompt default as example newsletter/frontend).

1projects$ cd /Users/username/projects/customer/year/newsletter/frontend

If you NOT installed dependencies in the prompts, then install first.

1frontend$ npm install

This command start the Server with the hotmodule.

1frontend$ npm run dev

1> example@1.0.0 dev
2> webpack serve --open --config webpack.dev.js
3
4<w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.
5<i> [webpack-dev-server] Project is running at:
6<i> [webpack-dev-server] Loopback: http://localhost:8080/
7<i> [webpack-dev-server] On Your Network (IPv4): http://xxx.xxx.xxx.xx:8080/
8<i> [webpack-dev-server] On Your Network (IPv6): http://[xxxx::x]:8080/
9<i> [webpack-dev-server] Content not from webpack is served from '/Users/username/Sites/testing/example/2023/newsletter/frontend/public' directory
10<i> [webpack-dev-middleware] wait until bundle finished: /
11asset index.bundle.js 782 KiB [emitted] (name: index)
12asset index.html 294 bytes [emitted]

This command build the dist folder with the end product.

1frontend$ npm run prod

To close (stop the localhost server) the NPM run type in console (Terminal): Ctrl + C.

Create contract, migration or test with truffle.

Change to root in project if you in frontend folder.

1projects$ cd /Users/username/projects/customer/year/newsletter/

1newsletter$ truffle create contract YourNewCoin

1newsletter$ truffle create migration YourNewCoin

1newsletter$ truffle create test YourNewCoin

Build contracts created contract.

1newsletter$ truffle compile

1Compiling your contracts...
2===========================
3> Compiling ./contracts/MYCOIN.sol
4> Artifacts written to /Users/username/Sites/testing/example/2023/newsletter/build/contracts
5> Compiled successfully using:
6   - solc: 0.8.13+commit.abaa5c0e.Emscripten.clang

Start developing with truffle

1newsletter$ truffle develop

Look for more here.

UNINSTALL

NPM

Local

1projects$ npm uninstall generator-web3-dapp

Global

1projects$ npm uninstall -g generator-web3-dapp

PACKAGE

You find generator-web3-dapp in Yeoman generator, NPM and on Github.

NPM - generator-web3-dapp

GitHub - generator-web3-dapp

Github Theme - generator-web3-dapp

ToDos

• Routing

Contribute

Please read the contributing.

Authors

Samet Tarim - All works

Support

Hyperly

License

MIT - prod3v3loper