代码拉取完成，页面将自动刷新
PoemKit系一套免费的网站开发工具包，它也是一个微前端架构。帮助开发者从零建立一个支持服务端渲染(SSR)的React技术网站，它支持pm2自动部署到服务器。PoemKit提供了 50+ 个内置UI组件，用于构建现代Web应用程序。
PoemKit可以直接通过命令工作和部署到云服务器, 但仍然需要在其背后编写真正的代码。 这些工具包作为UI组件和逻辑模块，可以组合成一个真正的应用程序原型。它仍然需要编程功能才能使它们在实际需求中工作。PoemKit满足完全可定制的webpack配置需求。
🚌 也可以直接使用独立的 React UI组件库 [poem-ui] poem-ui.
服务器端运行 http://localhost:3000
poemkit/
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── ecosystem.config.js ------------------------- # 用于pm2部署
├── babel.config.js
├── tsconfig.json
├── webpack.config.js
├── package-lock.json
├── package.json
├── test/ --------------------------- # 单元测试脚本
├── public/ --------------------------- # 自动生成的首页HTML静态模板
│ ├── index.html
│ ├── manifest.json
│ └── server/ ------------------------------- # 用于服务器测试的PHP脚本
│ └── assets/
├── dist/ ------------------------------- # web 编译出的文件，用于生产环境
│ ├── css/
│ │ ├── poemkit.css
│ │ └── poemkit.min.css
│ └── js/
│ │ ├── poemkit.js
│ │ └── poemkit.min.js
├── src/
│ ├── client/
│ │ ├── client.js
│ │ ├── actions/
│ │ ├── reducers/
│ │ ├── helpers/
│ │ ├── services/
│ │ ├── router/
│ │ ├── components/ ------------------------- # 独立的UI组件
│ │ │ ├── */
│ │ │ ├── _utils/ ----------------------- # 常用的实用程序和样式脚本
│ │ │ └── _plugins/ --------------------- # 第三方插件
│ │ ├── views/ ------------------------------ # 网站页面
│ │ │ ├── _pages/
│ │ │ └── _html/
│ └── server/
│ │ ├── app.js
│ │ ├── server.js
│ │ └── renderer.js
│ └── store/
│ │ └── createStore.js
│ └── config/
│ │ ├── tmpl-manifest.json ------------------ # 自动生成的 `manifest.json` 文件模板
│ │ └── websiteConfig.js -------------------- # 网站配置文件(比如根目录)
└──
webpack.config.js使用内存挂载）配置你电脑的Node.js环境，推荐Node 14+版本，测试环境为v14.16.0
下载完资源后，进入到 poemkit 目录下，运行相关命令进行开发或者部署。
当你需要配置脚手架和网站基础信息和结构的时候，可编辑 package.json 文件。
项目文件会打包生成到 ./dist/* 和 ./public/*.html.
Step 1. 下载项目
$ npm install poemkit
或者克隆项目:
$ git clone git://github.com/xizon/poemkit.git
Step 2. 使用命令进入 poemkit/ 目录, {your_directory}换成你的目录路径
$ cd /{your_directory}/poemkit
Step 3. 在进行所有开发工作之前，请确保您已安装 Node 10+。 之后，在主目录中运行以下代码来安装节点模块依赖项。
$ npm install
目前测试环境为`Node 18+`、`npm 9+`。 如果依赖安装失败（一般是升级了Nodejs版本，目前测试到Node 18+），可能是新版本的npm和旧版本的npm冲突，请使用如下命令安装依赖：$ npm install --legacy-peer-deps如果仍然安装失败，请使用此方法：删除
package.json中的 devDependencies, dependencies 和 peerDependencies, 删除文件package-lock.json，并重新安装依赖：$ npm install --save-dev @testing-library/jest-dom @testing-library/react@12.1.2 @types/react @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-loader clean-webpack-plugin cross-env css-loader css-minimizer-webpack-plugin eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react file-loader glslify-loader html-loader html-webpack-plugin identity-obj-proxy include-file-webpack-plugin jest jsdom jest-environment-jsdom json-loader log-timestamp mime-types mini-css-extract-plugin sass nodemon postcss prettier prettier-loader random-string raw-loader react-test-renderer@17.0.2 safe-buffer sass-loader style-loader tar terser-webpack-plugin ts-jest ts-node tsconfig-paths typescript webpack webpack-cli webpack-dev-middleware webpack-dev-server $ npm install @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/polyfill @babel/preset-env @babel/preset-flow @babel/preset-react @babel/preset-typescript @babel/register axios babel-plugin-module-resolver compression cors express ignore-styles moment react@17.0.2 react-dom@17.0.2 react-helmet@6.1.0 react-redux@7.2.7 react-router@5.2.0 react-router-dom@5.2.0 react-router-config@5.1.1 redux@4.2.0 redux-thunk@2.3.0
Step 4. 常用的命令:
调试应用程序, 它可以用来单独检查TypeScript类型的文件而不进行编译和打包操作，便于提高开发效率，专注整体代码的编写。
$ npm run check
打包生成CSS，JS，HTML文件
$ npm run build
运行下面的命令进行本地测试和代码检查 (仅运行Express服务器）。 使用 Ctrl + C 退出终端
$ npm run dev
Step 5. 浏览器中访问以下网址，可快速调试：
http://localhost:3000
建议在调试之前将新代码重新编译打包。
Step 6 (可选). 在托管服务器上部署Node服务
部署前请先运行build命令. (如果因为 Node 权限而不能正常运行，请使用以下 命令)
$ npm run deploy
停止现有部署
$ npm run destroy
Step 7 (可选). 单元测试
$ npm run test
💡 温馨提示:
a) ERROR: npm update check failed.
如果出现如上错误，表示nodejs的环境或权限问题，可以使用下面的命令解决，注意把{username}换成你自己的设备里的名字。
$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.configb) ERROR: Node sass version 6.x.x is not compatible with ^ 4.x.x.
如果出现如上错误,请修改node-sass的版本:
$ npm install node-sass@4.14.1c) 如果升级Node版本，请执行以下代码：
$ npm install $ npm rebuild node-sass
用PM2启动Reactjs应用程序（仅在使用Node v13.9.0或更高版本时有效）。
这里将安装Node 14的版本
$ curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum install nodejs
$ node --version #v14.16.1
$ npm --version #6.14.12
$ which node babel-node #check the location of node and babel-node
$ sudo npm install pm2@latest -g
$ sudo npm install -g babel-cli
$ sudo npm install -g @babel/core @babel/cli @babel/preset-env
$ sudo npm install -g typescript ts-node
$ sudo pm2 install typescript
#先进入 `"poemkit/"` 目录
$ cd /{your_directory}/poemkit
#用pm2运行应用
$ pm2 start ecosystem.config.js
#检测可用的初始化系统，生成配置并启用启动系统(服务器重启后自动运行pm2),并检查使用的状态
$ pm2 startup
$ systemctl status pm2-root
$ pm2 start /{your_directory}/poemkit/ecosystem.config.js --restart-delay=3000
$ pm2 save
#其它命令
$ pm2 restart ecosystem.config.js
$ pm2 stop ecosystem.config.js
$ pm2 delete ecosystem.config.js
$ pm2 list
$ pm2 logs
💡 使用 NPM 或 PM2 在云服务器上部署应用程序时可能出现问题的一些解决方案:
a）ERROR: permission denied, access '/usr/lib/node_modules'
解决:
chmod -R a+x node_modulesb）ERROR: JavaScript heap out of memory
There is a strict standard limit for memory usage in V8 to be a maximum of ~1GB (32-bit) and ~1.7GB (64-bit), if you do not increase it manually.
解决:
export NODE_OPTIONS=--max_old_space_size=4096c) Error: EACCES: permission denied, mkdir '/root/.pm2/xxxx'
解决:
一般来说，只要避免使用
NPM来运行 PM2 命令即可。您仍然可以尝试以下方法：
确保在以无守护程序模式 (pm2 kill) 启动 PM2 之前杀死任何 PM2 实例。
# re-install PM2 (optional) sudo npm i -g pm2 # if pm2 was reinstalled, ts-node must be reinstalled (optional) sudo npm install -g ts-node@latest # clear all pm2 instances pm2 kill # then restart it pm2 start xxxxxx
需要在Apache或Nginx的Web服务器上部署React App。请参考网络以获取有关设置代理的教程。
现在应用程序已准备好部署，我们应该准备 Nginx 端。 如果没有安装 Nginx，可以通过运行以下两个命令轻松地使用 apt 打包系统安装它：
$ sudo apt update
$ sudo apt install nginx
或者
$ sudo yum install nginx -y
启动 Nginx:
$ systemctl start nginx
开机时启动:
$ systemctl enable nginx
在 CentOS 8 上使用 FirewallD 设置防火墙:
$ firewall-cmd --permanent --zone=public --add-service=http
$ firewall-cmd --permanent --zone=public --add-service=https
$ firewall-cmd --permanent --zone=public --add-port=3000/tcp
$ firewall-cmd --reload
$ systemctl restart nginx
检查 Nginx 是否在系统上运行：
$ systemctl status nginx
好了，现在 Nginx 服务已经成功开始运行了，我们可以继续修改 /etc/nginx/conf.d/default.conf 中的配置文件。 这是我们将指向域以启动正确的React应用程序的地方：
$ vi /etc/nginx/conf.d/default.conf
在文件末尾添加：
server {
listen 443 ssl;
server_name backend1.example.com;
...
location / {
proxy_set_header Host $http_host;
proxy_pass http://{YOUR_IP}:3000;
}
}
将这些行添加到文件后，我们需要重新启动 Nginx 服务：
$ systemctl restart nginx
如果服务重新启动成功，可能不会有任何消息。 否则，它将输出多行错误消息。
修改文件 ./src/server/app.js, 使用Node的 https.createServer([options][, requestListener]) 来包装Express服务，请查阅下面的示范代码：
import path from 'path';
import https from 'https';
const cert = fs.readFileSync(path.join(__dirname,'../../path/bundle.crt'));
const key = fs.readFileSync(path.join(__dirname,'../../path/ca.key'));
const server = https.createServer({key: key, cert: cert }, app);
...
app.get('/', (req, res) => { res.send('this is an secure server') });
...
server.listen(port, () => console.log(`Frontend service listening on port: ${port}, access https://localhost:${port} in the web browser`));
要在您的 webpack.config.js 中分流开发和生产构建之间的过程，您可以使用环境变量。
如果要同时考虑OS X和Windows，可以使用第三方工具 cross-env
Step 1. 运行命令安装 cross-env
$ npm install --save-dev cross-env
Step 2. 接着在package.json文件中修改脚本，传递变量和重新组装脚本命令
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon --require ignore-styles --exec ts-node -r tsconfig-paths/register ./src/server/server.js",
"build": "cross-env NODE_ENV=production webpack --progress --mode production"
}
通过跨环境设置变量和值 NODE_ENV=xxx, 然后我们在执行webpack时得到这个变量
Step 3. 进一步细化配置文件 webpack.config.js，以此检查从对象进程和属性env应用到变量 NODE_ENV 中：
if (process.env.NODE_ENV === 'production') {
// .. тwe apply (or add) some kind of plugin
}
修改默认的HTML模板 ./src/client/views/_html/index.html， 它将自动生成为./public/index.html。 它脑包含了 React Helmet 用于SEO的HTML标签，例如:
<!DOCTYPE html>
<html {{helmetHtmlAttributes}}>
<head>
<meta charset="utf-8" />
{{helmetTitle}}
<!-- manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
============================================= -->
<link rel="manifest" href="@@{website_root_directory}/manifest.json"/>
<!-- Mobile Settings
============================================= -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<!-- Mobile Settings end -->
<!-- Compatibility
============================================= -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- Compatibility end -->
<!-- Core & Theme CSS
============================================= -->
<link rel="stylesheet" href="@@{website_root_directory}/dist/css/poemkit.min.css?ver=@@{website_hash}"/>
<!-- Core & Theme CSS end -->
<!-- Overwrite Font Files
*
* The fonts extracted with `mini-css-extract-plugin` may not load correctly
* Font files in `dist/fonts/` are fetched automatically by `file-loader`, you can configure webpack.config.js to name them.
============================================= -->
<style>
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-solid-900.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.svg#fontawesome') format('svg');
}
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-brands-400.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.svg#fontawesome') format('svg');
}
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-regular-400.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.svg#fontawesome') format('svg');
}
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
</style>
<!-- Overwrite Font Files end -->
<!-- SEO
============================================= -->
{{helmetMeta}}
{{helmetLink}}
<meta name="generator" content="@@{website_generator}"/>
<meta name="author" content="@@{website_author}"/>
<!-- SEO end -->
<!-- Favicons
============================================= -->
<link rel="icon" href="@@{website_root_directory}/assets/images/favicon/favicon-32x32.png" type="image/x-icon"/>
<link rel="shortcut icon" href="@@{website_root_directory}/assets/images/favicon/favicon-32x32.png" sizes="32x32"/>
<link rel="apple-touch-icon" href="@@{website_root_directory}/assets/images/favicon/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="@@{website_root_directory}/assets/images/favicon/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="@@{website_root_directory}/assets/images/favicon/apple-touch-icon-114x114.png"/>
<!-- Favicons end -->
</head>
<body {{helmetBodyAttributes}}>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="app">{{reactApp}}</div>
<!-- Your Plugins & Theme Scripts
============================================= -->
<script>
var REVISION = "@@{website_version}",
APP_ROOTPATH = {
"templateUrl" : "@@{website_root_directory}", //If the file is in the root directory, you can leave it empty. If in another directory, you can write: "/blog" (but no trailing slash)
"homeUrl" : "", //Eg. https://uiux.cc
"ajaxUrl" : "" //Eg. https://uiux.cc/wp-admin/admin-ajax.php
};
</script>
<script>window.__PRELOADED_STATE__ = {{preloadedState}};</script>
<script src="@@{website_root_directory}/dist/js/poemkit.min.js?ver=@@{website_hash}"></script>
<!-- Your Plugins & Theme Scripts end -->
</body>
</html>
配置文件 ./public/manifest.json基于 ./src/config/tmpl-manifest.json 自动生成。
您可以通过修改 webpack.config.js 的 resolve 属性来创建 import 或 require 的别名，来确保模块引入变得更简单.
webpack.config.js :
...
const alias = {
pathConfig : './src/config',
pathComponents : './src/client/components',
pathRouter : './src/client/router',
pathHelpers : './src/client/helpers',
pathServices : './src/client/services',
pathReducers : './src/client/reducers',
pathPages : './src/client/views/_pages',
pathActions : './src/client/actions',
pathServer : './src/server',
pathStore : './src/store'
};
...
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss', '.sass'],
alias: {
// 需要同时配置 `babel.config.js` 和 `tsconfig.json` 文件
'@/config': path.resolve(__dirname, alias.pathConfig ),
'@/components': path.resolve(__dirname, alias.pathComponents ),
'@/router': path.resolve(__dirname, alias.pathRouter ),
'@/helpers': path.resolve(__dirname, alias.pathHelpers ),
'@/services': path.resolve(__dirname, alias.pathServices ),
'@/reducers': path.resolve(__dirname, alias.pathReducers ),
'@/pages': path.resolve(__dirname, alias.pathPages ),
'@/actions': path.resolve(__dirname, alias.pathActions ),
'@/server': path.resolve(__dirname, alias.pathServer ),
'@/store': path.resolve(__dirname, alias.pathStore ),
}
},
...
babel.config.js :
...
"plugins": [
["module-resolver", {
"root": ["./src"],
"alias": {
"@/config": "./src/config",
"@/components": "./src/client/components",
"@/router": "./src/client/router",
"@/helpers": "./src/client/helpers",
"@/services": "./src/client/services",
"@/reducers": "./src/client/reducers",
"@/pages": "./src/client/views/_pages",
"@/actions": "./src/client/actions",
"@/server": "./src/server",
"@/store": "./src/store"
}
}]
]
...
tsconfig.json :
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/config/*": ["config/*"],
"@/components/*": ["client/components/*"],
"@/router/*": ["client/router/*"],
"@/helpers/*": ["client/helpers/*"],
"@/services/*": ["client/services/*"],
"@/reducers/*": ["client/reducers/*"],
"@/pages/*": ["client/views/_pages/*"],
"@/actions/*": ["client/actions/*"],
"@/server/*": ["server/*"],
"@/store/*": ["store/*"]
}
}
}
package.json :
{
"jest": {
"testEnvironment": "jsdom",
"moduleNameMapper": {
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
"^@/config/(.*)": "<rootDir>/src/config/$1",
"^@/components/(.*)": "<rootDir>/src/client/components/$1",
"^@/router/(.*)": "<rootDir>/src/client/router/$1",
"^@/helpers/(.*)": "<rootDir>/src/client/helpers/$1",
"^@/services/(.*)": "<rootDir>/src/client/services/$1",
"^@/reducers/(.*)": "<rootDir>/src/client/reducers/$1",
"^@/pages/(.*)": "<rootDir>/src/client/views/_pages/$1",
"^@/actions/(.*)": "<rootDir>/src/client/actions/$1",
"^@/server/(.*)": "<rootDir>/src/server/$1",
"^@/store/(.*)": "<rootDir>/src/store/$1"
},
"transform": {
"^.+\\.(js|jsx)$": "babel-jest",
"^.+\\.(ts|tsx)?$": "ts-jest"
}
}
}
您可以通过修改 webpack.config.js 的 output 属性来指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」
...
const globs = {
port : 8080,
examples : 'public',
build : 'src/client',
dist : 'dist'
};
...
output: {
path: path.resolve(__dirname, './' + globs.dist + '/js' ),
filename: '[name].js'
},
...
修改package.json文件即可：
{
"author": "UIUX Lab",
"name": "poemkit",
"email": "uiuxlab@gmail.com",
"version": "1.0.0",
"projectName": "PoemKit",
"createdInfo": "UIUX Lab (https://uiux.cc)",
"projectURL": "https://uiux.cc",
"description": "React toolkit for building a full website that also is a Micro-Frontend Architecture",
...
}
路由配置同时也兼顾了网站的主导航（不包括将在主导航的页面上配置的嵌套路由）。 访问文件 ./src/client/router/RoutesConfig.js.
路由器的一些脚本可以在文件中修改 ./src/client/router/App.js.
服务端渲染和标签替换的一些脚本可以在文件中修改 ./src/server/renderer.js.
为了同时运行服务器和React应用程序，我们需要在 package.json 中添加proxy 键。我们已经将服务器设置为在端口3000上运行，因此将代理指向 localhost:3000。
{
"proxy": "http://localhost:3000",
...
}
PropTypes 检查类型:$ npm run dev
使用下面的JavaScript脚本可以编写调试代码，在终端显示错误和警告信息。
import PropTypes from "prop-types";
import React, { Component } from 'react';
export default class YourComponentName extends Component {
public static propTypes = {};
constructor(props) {
super(props);
}
render() { ... }
}
if ( process.env.NODE_ENV === 'development' ) {
YourComponentName.propTypes = {
displayEnable: PropTypes.bool.isRequired,
htmlString: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
}
}
应用默认加载了常用的第三方库(图标，动画，3D引擎等)，您可以按需加载，或者修改导入配置。第三方插件配置文件位于 ./src/client/components/_plugins/. 第三方插件默认和自定义组件一起使用，您也可以主动移除它们。
更改网站的根目录，以便您的项目上传到另一个目录时可以使用它。修改 ./src/config/websiteConfig.js 的键 rootDirectory。
如果该文件位于根目录中，则可以将其保留为空。 如果在另一个目录中，则可以写成 "/blog" (结尾不要加斜杠)
{
"rootDirectory": ""
}
网站地址(URL)通常被用于SEO优化。修改 ./src/config/websiteConfig.js 的键 siteUrl。一个完整的URL一般被命名为 https://domain-name.com (结尾不要加斜杠和子目录名称)
{
"siteUrl": ""
}
修改 ./src/config/websiteConfig.js 的键 API, 如下代码:
{
"API": {
"RECEIVE_DEMO_LIST": "https://apiurl1.com",
"RECEIVE_DEMO_LISTDETAIL": "https://apiurl2.com"
}
}
| Chrome | Firefox | Edge | IE | Safari | Opera | iOS | Android |
|---|---|---|---|---|---|---|---|
| >= 49 | >= 45 | >=14 | >=11 | >= 9 | >= 30 | >=10 | >=4.4 |
基于 MIT.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。