Build web and develop

目前 Conduit 并非采用完全的前后端分离方案，首先是基于 Go 编译 HTML 模版，并启动一个 Go server，再通过HTML模版加载编译打包后的 JS bundle 文件。 这部分是关于如何用本地开发模式启动 Dashboard 的 Web 及前端部分。

web部分结构

项目目录
|__ /web                   dashboard web
  |__ /app                 前端静态资源
    |__ /css               css
    |__ /fonts             字体
    |__ /img               图片     
    |__ /js                js
       |__ /componenets    react 组件目录
       |__ index.js        react 入口
    |__ test               测试文件
    |__ .babelrc           babel 配置
    |__ .eslint            eslint 配置
    |__ karma.conf.js      karma 配置
    |__ package.json       package 配置
    |__ postcss.config.js  postcss 配置
    |__ webpack.config.js  webpack 配置
  |__ /srv                 dashboard web go server 相关实现 
  |__ /templates           dashboard html template
  |__ /util                go 相关 util
  |__ Dockerfile           docker 配置
  |__ main.go              go server web 入口
  |__ readme.md

前置准备：启动 API 等相关 Controller

若未启动该部分，则 Go 服务器在启动时需要编译的一些与 conduit 版本等相关的数据会获取不到，导致模版 html 编译不过，并且前端代码无法完整运行。

具体 API 等相关构建参考 build-control-panel 部分。

前端开发相关

安装依赖

cd app  # 进入 app 目录
yarn    # 安装依赖

hot reload 启动前端任务编译功能

webpack-dev-server 会自动更新前端代码并输出到 dist 文件夹内，具体内容可以查看 webpack.config.js

yarn webpack-dev-server

启动 web server

cd ..        # 返回到web根目录
go run main.go -webpack-dev-server=http://localhost:8080

利用 Go 启动 web 服务器，编译 html 模板，并把命令参数中的 -webpack-dev-server 作为静态资源地址写入到编译后的html内。

若未启动 API 服务，此时 HTML 的编译并不能成功。会看到有包含如下文字的报错信息。这是由于 API 相关服务未启动，导致的编译问题。

template: app.tmpl.html:2:59: executing "content" at <.Data.ReleaseVersion>: can't evaluate field ReleaseVersion in type *conduit_public.VersionInfo

若未启动 API 服务导致编译失败，具体细节是默认的 api-addr 参数只有端口，这在以容器方式启动的时候 OK 的，但是本地运行时，因为只有端口，Go 服务器启动后会按照默认参数配置，直接请求一个不存在的地址http://:8085。

若按照 build-control-panel 的方式启动了 API 等服务，则执行如下命令即可：

go run main.go -addr=:8084 -metrics-addr=:9994 -api-addr=localhost:8085 -webpack-dev-server=http://localhost:8080  -uuid=96e84670-0a7c-4c08-8c13-2c2d988f992e

启动前端单元测试

conduit 使用karma + mocha + sinon + jsdom，具体内容可以查看karma.config.js

yarn karma start