Настройка среды разработки для Dapps с Ethereum на этой ранней стадии технологии не всегда тривиальна. Но с этой инструкцией вы сможете работать над своим Dapp, и все, что вам нужно, это установить Node.js и NPM.

Мы будем использовать веб-пакет для обслуживания вашего Dapp и ganache-cli для запуска вашей частной цепочки блоков за считанные секунды. Web3.js используется для подключения вашего децентрализованного приложения к нашей частной цепочке блоков Эфириума. Чтобы создать наш проект и установить все пакеты, просто запустите эти команды.

npm init
npm install --save [email protected] webpack webpack-dev-server html-webpack-plugin ganache-cli

Я использую версию 1.0.0-beta.31, потому что в версии 0.x.y есть критические изменения.

Вебпак

Webpack — отличный инструмент, который можно использовать как в небольших приложениях, так и в крупных производственных конвейерах. Я буду настраивать только то, что необходимо для обслуживания простого приложения.

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

Вы должны назвать этот файл webpack.config.js, чтобы запустить команду webpack без дополнительной настройки.

NPM-скрипты

Давайте отредактируем package.json и добавим два простых скрипта, которые предоставят нам полноценную среду разработки Dapp.

{
    // ...
    "scripts": {
        "dapp": "webpack-dev-server --mode=development",
        "ethereum": "ganache-cli"
    },
    // ...
}

Если мы запустим обе команды, Dapp будет скомпилирован и запущен на http://localhost:8080/, а Ganache предоставит локальную тестовую среду с достаточным количеством эфира для экспериментов.

Доступ к Ganache из index.js

В файле src/index.js загрузим web3.js и подключим к нему Ganache. В этом примере я покажу вам, как получить доступ к учетным записям.

const Web3 = require('web3');
const web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");
web3.eth.getAccounts().then(console.log);

index.html

Базовый HTML-шаблон для нашего децентрализованного приложения

<!doctype html>
<html>
    <head>
        <title>My awesome Dapp</title>
    </head>
    <body>
        Your body here
    </body>
</html>

Запуск скриптов

Теперь запустите сценарии npm, и вы увидите учетные записи из ganache в журнале браузера, если вы посетите http://localhost:8080/. Убедитесь, что оба скрипта продолжают работать во время разработки!

npm run dapp
npm run ethereum

Дальнейшая информация

github-репозиторий: https://github.com/wagner-daniel/simple-dapp-environment

ганаш-кли: https://github.com/trufflesuite/ganache-cli

веб-пакет: https://webpack.js.org/

web3: https://web3js.readthedocs.io/en/1.0/

0x8CD43A3D3bceA97cc2972F9F2C3BdB9b6A965576 — Если хотите оставить чаевые :)