H5-Dooring is a powerful, open source, free H5 visual page configuration solution dedicated to providing a simple, convenient, professional and reliable, unlimited set of H5 landing page best practices. The technology stack is mainly react, developed in the background using nodejs.
Commercial license, including a full set of source code
Subsequent Dooring updates are submitted here, and you can pick up if you need to update
Authorize private repositories for enterprises
Dooring series products have applied for software copyright, please follow the commercial license agreement to use, prohibit distribution and open source, otherwise they will be investigated for legal responsibility
Project SchemaNew
H5-Dooring technology architecture includes the core editor side, the management background (can be replaced with your own internal use, or transformed into internal use), and the server side (the replaceable server side, which can be replaced with your own company's service system), and the corresponding directories are as follows:
editor (H5-Dooring editor)
admin(Manage the back-end end)
server(Server-side, only used for data support and page rendering)
Environment parameters
Package name
Version
Remark
nodejs
14.15.4
this version is recommended
yarn(recommend)
1.22.4
npm, pnpm, etc. can also be used, but you need to ensure that the version is consistent
Browser support
Modern browsers does not support IE browser
IEdge
Firefox
Chrome
Safari
Run locally
editor project
purchase privatized authorized companies can go into the delivered editor project and execute the installation package command:
yarn
After the installation is complete, run the command again:
yarn start
At this time, the IP port number of the access will be printed in the terminal console, and we can open it in the browser to run.
Construct
We can see the following script configuration in the package.json file of the project:
Here is an introduction to the purpose of these commands:
build Used to package editor projects
build:h5 For packing H5 base works, required
build:down Base project for packaging and downloading codes (mainly used to download H5 page codes online)
After we finish building, we will move the packaged files to the server/static directory. Deployment also requires only the server directory.
Common configuration
Engineering we use umi3.0, so we manage the public configuration related to the editor under the .umirc.ts file, here we need to pay attention to the define in the file, mainly used to provide custom configuration:
define: {
START_ENV,
lang,
// Configure the domain name for H5 access
h5Domain: 'cn.dooring.vip',
// Sets the current version number
curVersion: dooringVersion,
// ICP filing information
copyright: '鄂ICP备18024675号-3',
// Whether to display the update pop-up window
showUpdateModal: true,
// Changelog
updateList: [
"1. 新增表格组件",
"2. 国际化优化",
"3. 表单详情页支持内部滚动",
"4. 个人图片库性能优化",
"5. 下载代码功能优化"
],
// Website logo address
logo: 'http://cdn.dooring.cn/dr/logo.ff7fc6bb.png',
// Whether the entry page displays sponsored brands and copyright notices
showAdsAndTip: true,
// Get the QR code of the login code when logging in
qrcode: 'http://cdn.dooring.cn/dr%2Fcode1.png',
// Friendly link display
friendLinks: [
{
name: 'V6',
link: 'http://v6.dooring.cn/beta',
title: '可视化大屏编辑器'
},
{
name: 'Power',
link: '/powernice',
title: '文档编辑器'
}
],
// Default language
defaultLocale: 'zh-CN',
langMap: langMap
},
admin
With the editor project, I will not introduce them all here.
server(Server engineering)
Again, we go to that directory and execute the installation command:
yarn
run:
yarn start
If you start editor or admin separately, we cannot access the server request normally, so at this time, we need to configure the local server IP, and configure the editor or admin project IP whitelist in the server project, as follows:
In this way, we can solve the problem of the server running locally across domains.
The deployment goes live
We just need to upload the server directory to the server and install nodejs, yarn, if you need to do load balancing, we can use pm2, use pm2 to do complex balancing:
pm2 start dist/index.js -i max
Notes
1. cdn issue
At present, some static resources in the H5-Dooring project are stored in the Dooring server CDN, and enterprises need to replace the CDN of dooring with an external or enterprise's own CDN or static server before deployment.
2. Installation error problem
Node-SaaS installation failures may be encountered during the installation process, and the following solutions can be used here:
When npm installs node-sass dependencies, it downloads the .node file from the github.com. Due to the problem of the domestic network environment, this download time may be very long, and even cause the timeout failure。
Solution one
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
// linux、mac
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
// window
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass
Solution 2: Use CNPM
cnpm install node-sass
Solution 3: Create an .npmrc file
Create an .npmrc file in the root directory of the project and copy the following code to the file
Welcome to H5-Dooring 👋
Project SchemaNew
H5-Dooring technology architecture includes the core editor side, the management background (can be replaced with your own internal use, or transformed into internal use), and the server side (the replaceable server side, which can be replaced with your own company's service system), and the corresponding directories are as follows:
Environment parameters
Browser support
Modern browsers does not support IE browser
Run locally
editor project
purchase privatized authorized companies can go into the delivered editor project and execute the installation package command:
After the installation is complete, run the command again:
At this time, the IP port number of the access will be printed in the terminal console, and we can open it in the browser to run.
Construct
We can see the following script configuration in the
package.json
file of the project:Here is an introduction to the purpose of these commands:
After we finish building, we will move the packaged files to the
server/static
directory. Deployment also requires only theserver
directory.Common configuration
Engineering we use
umi3.0
, so we manage the public configuration related to the editor under the.umirc.ts
file, here we need to pay attention to thedefine
in the file, mainly used to provide custom configuration:admin
With the editor project, I will not introduce them all here.
server(Server engineering)
Again, we go to that directory and execute the installation command:
run:
If you start editor or admin separately, we cannot access the server request normally, so at this time, we need to configure the local server IP, and configure the editor or admin project IP whitelist in the server project, as follows:
In this way, we can solve the problem of the server running locally across domains.
The deployment goes live
We just need to upload the
server
directory to the server and installnodejs
,yarn
, if you need to do load balancing, we can usepm2
, use pm2 to do complex balancing:Notes
1. cdn issue
At present, some static resources in the
H5-Dooring
project are stored in theDooring
serverCDN
, and enterprises need to replace theCDN
ofdooring
with an external or enterprise's ownCDN
or static server before deployment.2. Installation error problem
Node-SaaS installation failures may be encountered during the installation process, and the following solutions can be used here:
When npm installs node-sass dependencies, it downloads the .node file from the github.com. Due to the problem of the domestic network environment, this download time may be very long, and even cause the timeout failure。
Solution one
Solution 2: Use CNPM
Solution 3: Create an .npmrc file
Create an .npmrc file in the root directory of the project and copy the following code to the file
It must also be added under .bashrc in the home directory:
At last
In this way, the node-saaS error problem can be solved.