第一部分 入门笔记

优质
小牛编辑
124浏览
2023-12-01

本文的调试环境是一个多节点Parity PoA网络。u1601充当第一个节点,u1607充当第二个节点。u1607是个ubuntu16.4桌面系统,u1607代替了文章中u1602节点。

1.生成一个新的Dapp

在u1607上克隆skeleton库:

git clone https://github.com/wbwangk/skeleton mydapp
cd mydapp 
git remote rm origin
./init.sh

执行下列命令来确保webpack安装成功了:

$ npx webpack

这回执行webpack构建,把src目录下的源码编译后输出到dist目录。

parity官方英文教程中使用的是旧版本的webpack(如webpack@2.1.0-beta.22),与新版本webpack的差异很大。

2. 配置它的外观

编辑dist/manifest.json为:

{
        "id": "mydapp",
        "name": "My Dapp",
        "description": "My demonstration dapp",
        "version": "0.1",
        "author": "webb",
        "iconUrl": "title.png"
}

3.在Parity中显示它

由于在配置文件node1.toml中指定了数据目录base_path = "/home/vagrant/parity",Parity客户端会到这个目录的下级dapps中去找部署的dapp。所以需要在dapps目录下创建一个软连接指向mydapp/dist目录(当前用户是vagrant):

cd ~/mydapp
ln -s $PWD/dist $HOME/parity/dapps/mydapp

确保parity是这样启动的:

parity ui --config node0.toml

然后用浏览器访问地址https://192.168.16.107:8180。点击Browse Dapps图标可以进入dapp浏览页面,浏览器右下角会提示授权,点击Approve按钮进行授权。

找到刚开发的应用My Dapp,点Open按钮就进入了mydapp的index.html,会显示Hello world

用webpack自带http-server

有两种方式,我也不知道哪种是更好了:

$ npx webpack-dev-server --content-base dist
$ npx http-server dist

两种方式都会在8080端口上将dapp服务出来。差异从各自的输出上可以看出来,前者的服务地址只有127.0.0.1:8080,后者还增加了192.168.16.107:8080的服务,这使得可以在宿主机的浏览器上直接访问dapp。

由于u1607是ubuntu桌面,可以用桌面带的火狐浏览器访问127.0.0.1:8080来访问My Dapp

通过webpack自动的http服务好处调试简单,但只用于开发。

你可能注意到webpack-dev-server --content-base dist已经定义到了package.json的scripts脚本中,所以可以直接用npm start来启动webpack自动的http服务。