hzero-front-runtime是基于React的构建页面的JavaScriptUI库以及轻量级前端数据模型/状态管理框架dva, 并使用webpack 4.x构建本项目.

本项目主要为基于hzero-front创建的项目提供基础运行/开发环境/配置等,支持通过lerna工具,将本项目作为monorepo(多模块,多package管理模式)模式作为多模块项目的核心子项目

我们提供了一套方案可以基于本项目快速构建全新的monorepo项目,配合HZERO Front Cli工具即可轻松搭建全新的基于HZERO Front的前端工程

目录

• 介绍
• 使用
• 项目目录
• Author
• Contributing

介绍

关于React

React是用于构建用户界面的JavaScript库,本项目采用全新的react v16.8.x,其中包含一些全新的特性.且本项目会持续同步react版本.

更多请参考React Github或React官网

关于dva框架

dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。

请参考dva Github，相关问题可以在dva Github issues咨询

关于webpack

用于构建/打包前端工程,本项目采用全新webpack v4.28.x,其中包含全新的特性/性能优化/社区最佳实践

请参考webpack

关于Create React App

本项目是基于Create React App脚手架创建,并执行了yarn eject命令

请参考Create React App.

使用

下面是关于本项目的使用说明

环境变量

• node.js: v10.x or v8.x(>= v8.10)

  关于node.js请参考: https://nodejs.org/en/

• yarn: 推荐使用yarn管理本项目

  执行如下命令全局安装yarn

  $ npm install --global yarn 
  

  关于yarn请参考 https://yarnpkg.com

• lerna: 用于管理具有多个package的JavaScript项目的工具。

  A tool for managing JavaScript projects with multiple packages. 执行如下命令全局安装

  $ npm install --global lerna
  

  关于lerna请参考https://lernajs.io/

安装hzero-front-runtime

执行如下命令

$ yarn add hzero-front-runtime --registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
# npm install hzero-front-runtime --registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/

可以执行如下命令可以跳过puppeteer安装过程中下载Chromium

$ export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 #macos/linux
# set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 #windows

hzero-front-runtime 提供了lerna工具用与管理packages

若安装了packages,则执行如下命令安装packages的相关依赖

$ lerna bootstrap

关于lerna请参考https://lernajs.io/ 关于lerna在HZERO Front/基于HZERO Front的项目中的使用请参考lerna

使用子模块

若在项目中使用了 git submodule 进行子模块管理，需要在首次拉取代码后进行初始化操作。

$ git submodule update --init --recursive

启动项目/开发者模式

请确保dll已编译完成,然后执行如下命令用于执行hzero-front-runtime提供的webapck启动项目操作

$ yarn start

cross-env BASE_PATH=/ CLIENT_ID=localhost BPM_HOST=http://192.168.12.103:8330 API_HOST=http://hzerodevb.saas.hand-china.com WEBSOCKET_HOST=ws://172.20.0.202:8260 HARD_SOURCE=none node --max_old_space_size=4096 ./node_modules/roadhog/bin/roadhog.js dev

• start 会设置几个环境变量, 您可以改变他们来适应自己的项目
• BASE_PATH: 部署在子目录时需要改变。 例如 部署在 /demo/ 下; 则该变量的值为 /demo/
• CLIENT_ID: 是hzero后端所需要的客户端参数
• BPM_HOST: 工作流的接口地址
• API_HOST: 请求接口的地址
• WEBSOCKET_HOST: websocket 地址

启动成功后,请访问如下地址即可

http://localhost:8000

构建

请确保dll已编译完成,然后执行如下命令用于执行hzero-front-runtime提供的webapck启动的编译操作

$ yarn build

最终静态文件会生成至如下目录

/dist

build 会设置几个环境变量, 您可以改变他们来适应自己的项目。

变量名及含义如下表所示：

替换操作

如果采用 jenkins 进行构建，则需要在 build 结束后手动执行 ./docker/enterpoint.sh 进行变量替换，因而需要在脚本中填写实际的变量值。

而如果采用 gitlab CI 进行构建，这些变量的值配置于 /charts/hzero-front/values.yaml 内，在构建时会将这些变量设置到当前执行环境，在脚本执行时便可读取以进行替换。

Nginx 配置

文件 docker/default.conf 为默认的项目 Nginx 配置文件，如需修改 Nginx 配置需要在此更改，在构建 Docker 镜像时，Dockerfile 中的指令会将该文件复制到 nginx 配置目录下。

由于基础镜像暂未开启 gzip，在本项目 Dockerfile 中存在指令来更改默认的 Nginx 配置文件，以使 gzip 生效，如下：

RUN sed -i 's/\#gzip/gzip/g' /etc/nginx/nginx.conf;

如需关闭 gzip，将该行注释即可。