feat: serve editor(front-end) with strapi(koa-static)

Author: ly525

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -94,6 +94,7 @@ pids
 logs
 results
 build
+build-editor
 node_modules
 .node_history
 package-lock.json

back-end/h5-api/config/custom.json

@@ -1,3 +1,6 @@
 {
-  "myCustomConfiguration": "This configuration is accessible through strapi.config.myCustomConfiguration"
+  "myCustomConfiguration": "This configuration is accessible through strapi.config.myCustomConfiguration",
+  "custom": {
+    "enabled": true
+  }
 }

back-end/h5-api/config/environments/development/middleware.json

@@ -0,0 +1,5 @@
+{
+  "editorStatic": {
+    "enabled": true
+  }
+}

back-end/h5-api/config/environments/production/middleware.json

@@ -0,0 +1,5 @@
+{
+  "editorStatic": {
+    "enabled": true
+  }
+}

back-end/h5-api/config/environments/staging/middleware.json

@@ -0,0 +1,5 @@
+{
+  "editorStatic": {
+    "enabled": true
+  }
+}

back-end/h5-api/config/middleware.json

@@ -9,7 +9,8 @@
       "gzip"
     ],
     "order": [
-      "Define the middlewares' load order by putting their name in this array is the right order"
+      "Define the middlewares' load order by putting their name in this array is the right order",
+      "editorStatic"
     ],
     "after": [
       "parser",

back-end/h5-api/middlewares/editorStatic/index.js

@@ -0,0 +1,31 @@
+/*
+ * @Author: ly525
+ * @Date: 2020-01-02 21:50:50
+ * @LastEditors  : ly525
+ * @LastEditTime : 2020-01-11 00:22:10
+ * @FilePath: /h5-api/api/work/controllers/Work.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description:
+ * serve luban-h5 front-end dist
+ *
+ * You will find information here:
+ * 1. https://github.com/strapi/strapi/issues/3007
+ * 2. https://stackoverflow.com/questions/55090339/strapi-custom-routes-to-redirect-to-public-directory/55130475#55130475
+ * 3. https://medium.com/@schalkneethling/automate-package-releases-with-semantic-release-and-commitizen-d7d4c337f04f
+ * 4. https://strapi.io/documentation/3.0.0-beta.x/concepts/middlewares.html#middlewares
+ */
+
+const koaStatic = require('koa-static');
+const path  = require('path');
+
+module.exports = strapi => {
+  return {
+    // eslint-disable-next-line no-unused-vars
+    initialize: function(cb) {
+      strapi.router.get(
+        '/*',
+        koaStatic(path.resolve('./build-editor'))
+      );
+    }
+  };
+};

front-end/h5/vue.config.js

@@ -1,8 +1,8 @@
 /*
  * @Author: ly525
  * @Date: 2019-12-14 22:43:55
- * @LastEditors: ly525
- * @LastEditTime: 2020-01-05 22:09:02
+ * @LastEditors  : ly525
+ * @LastEditTime : 2020-01-10 23:37:15
  * @FilePath: /luban-h5/front-end/h5/vue.config.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
@@ -12,6 +12,7 @@ const path = require('path')
 // const isProd = process.env.NODE_ENV === 'production'
 const target = 'http://localhost:1337'
 const engineOutputDir = path.join(__dirname, '../../back-end/h5-api/public/engine-assets')
+const editorBuildOutputDir = path.join(__dirname, '../../back-end/h5-api/build-editor')
 
 let page
 switch (process.env.PAGE) {
@@ -28,7 +29,8 @@ switch (process.env.PAGE) {
       template: 'public/index.html',
       filename: 'index.html',
       title: 'Index Page',
-      outputDir: 'dist'
+      // outputDir: 'dist'
+      outputDir: editorBuildOutputDir
       // publicPath: isProd ? '/main/' : '/'
     }
 }

luban-h5.sh

@@ -0,0 +1,82 @@
+#!/bin/sh
+
+###
+ # @Author: ly525
+ # @Date: 2020-01-10 22:23:34
+ # @LastEditors  : ly525
+ # @LastEditTime : 2020-01-10 23:27:59
+ # @FilePath: /luban-h5/luban-h5.sh
+ # @Github: https://github.com/ly525/luban-h5
+ # @Description: Do not edit
+ # @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ ###
+
+
+cur_dir=`pwd`
+
+help_usage() {
+cat << EOT
+Usage:
+  $(basename $0) [--help|-h] [init|start|restart|stop]
+
+  help	   Show usage.
+
+  init	   #!en Install dependencies, build front-end && back-end.
+           #!zh 初始化: 安装依赖并编译前后端
+
+  start    #!en Start the luban-h5 service(powered by pm2).
+           #!zh 启动luban-h5, 执行这一步骤之前, 需要执行 ./$(basename $0) init
+
+  restart  #!en Restart the luban-h5 service.
+           #!zh 重启luban-h5
+
+  stop     #!em Build binary packages only.
+           #!zh 停止luban-h5
+
+e.g.
+  ./luban-h5.sh init
+  ./luban-h5.sh start
+  ./luban-h5.sh stop
+EOT
+exit
+}
+
+
+luban_h5_init() {
+  # 到前端目录安装依赖，并编译核心编辑器 + 预览引擎
+  # #!en compile the core editor and preview engine
+  cd front-end/h5 && yarn && yarn build
+  cd ${cur_dir}
+
+  # 在后端目录，编译后台管理系统
+  cd back-end/h5-api && yarn && yarn build
+  cd ${cur_dir}
+}
+
+luban_h5_start() {
+  cd back-end/h5-api && npx pm2 start --name luban-h5-service server.js
+  cd ${cur_dir}
+}
+
+luban_h5_restart() {
+  cd back-end/h5-api && npx pm2 restart luban-h5-service
+  cd ${cur_dir}
+}
+
+luban_h5_stop() {
+  cd back-end/h5-api && npx pm2 stop luban-h5-service
+  cd ${cur_dir}
+}
+
+
+
+# Initialization step
+action=$1
+case "$action" in
+    init|start|restart|stop)
+        luban_h5_${action}
+        ;;
+    *)
+        help_usage
+        ;;
+esac