Quick Start

commands commonly used for local dev

npm run dev # dev back-end or docs
yarn serve # dev front-end

Overview

Basic Concepts

First of all, you need to know about the related ecology of Node. js and the installation of Node. js. We will take a minute to introduce the basic concepts. By default, you know the basic operations of Linux and Git. You can read the Basic installation Requirements

Build With(current version)

Vue.js: Front-end framework
Strapi.js: Open source Node.js Headless CMS to easily build customisable APIs
Sqlite: Database

Setup

1. the API is powered by strapi.js

Setup backend

1. quick start

# by default, the current path is the root path for luban-h5
cd back-end/h5-api
yarn install # install dependencies
yarn add psd # install dependency of psd

# install ejs engine, mainly used for preview work
yarn add strapi-hook-ejs

# modify h5-api/hook.json (next paragraph)
# see more details about strapi-hook-ejs：https://github.com/strapi/strapi/tree/master/packages/strapi-hook-ejs#configuration

npm run dev # local dev
# additional notes: run `npm run localdev` if you want to debug it in vscode

# #!en: default database is sqlite3(db location: h5-api/.tmp/data.db)

# 访问 http://locahost:1337/admin
# visit http://locahost:1337/admin

h5-api/hook. json  is configured as follows:

{
  "timeout": 3000,
  "load": {
    "before": [],
    "order": [
      "Define the hooks' load order by putting their names in this array in the right order"
    ],
    "after": []
  },
  "ejs": {
    "enabled": true,
    "viewExt": "ejs",
    "partial": true,
    "cache": false,
    "debug": false,
    "layout": false
  }
}

2. Something important

1. 403 Forbidden ：Please follow the instructions to config the API can be publicly accessible: [Roles And Permission] -> [Public] - [Permissions] 

Used for upload work cover

1. ctx.render is not a function 
   solution:Setup backend/quick start/strap-hook-ejs 

error TypeError: ctx.render is not a function
  at previewOne (~/luban-h5/back-end/h5-api/api/work/controllers/Work.js:13:16)

setup front-end

1. quick start

# by default, the current path is the root path of luban-h5
cd front-end/h5

yarn # install dependencies
yarn serve # develop

# more commands
# please refer to project/front-end/h5/package.json

2. build preview engine

Basic

luban-h5/back-end/h5-api/api/work/controllers/Work.js/previewOne

previewOne: async (ctx) => {
  const work = await strapi.services.work.findOne(ctx.params);
  return ctx.render('engine', { work });
},

How to build preview engine

1. cd front-end/h5, run yarn engine:build
2. after build finished, an folder named engine-assets is auto generated at back-end/h5-api/public
3. preview.vue is preview modal, the mobile div is an iframe which a wrapper for builded engine-entry

3. explanation for front-end components

1. lbp- > lu-ban-plugin: plugins for luban-h5：location: front-end/h5/src/components/plugins