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

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

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

    目录

    介绍

    关于React

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

    更多请参考React GithubReact官网

    关于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.

    使用

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

    环境变量

    安装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
    

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

    http://localhost:8000
    

    构建

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

    $ yarn build
    

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

    /dist
    

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

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

    变量名 含义 构建后需要替换
    BASE_PATH 部署在子目录时需要改变。 例如 部署在 /demo/ 下; 则该变量的值为 /demo/
    CLIENT_ID hzero 后端进行 OAUTH 认证所需要的客户端参数
    BPM_HOST 工作流的接口地址
    API_HOST 请求接口的地址
    WEBSOCKET_HOST websocket 地址
    ESLINT 由于在提交的时候已经校验过了 所以这里不执行校验以提升打包速度
    PLATFORM_VERSION 系统是OP版还是SAAS版

    替换操作

    如果采用 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,将该行注释即可。