Project Introduction

Frontend Project

Frontend Editor Directory Structure

├─assets Resource directory
├─components Common components
├─config Panorama configuration files
├─icons Icons
├─language Multi-language configuration files
├─layout Layout framework
├─less Common less files
├─pages Pages
│  ├─editor Editor page
│  │  ├─common Editor common plugins
│  │  │  ├─dragitem Component for dragging materials into canvas
│  │  │  └─source Common module component for resource list
│  │  ├─components Large module components for editor
│  │  │  ├─canvas Canvas area component
│  │  │  ├─header Editor top component
│  │  │  ├─options Settings area component
│  │  │  │  ├─components Settings area component modules
│  │  │  │  └─elements Settings area configuration files for elements
│  │  │  ├─replace-tpl Template replacement business component
│  │  │  ├─sidebar Left menu module
│  │  │  ├─sources Left resource module
│  │  │  ├─timeline Timeline module
├─server API configuration
├─stores Mobx store management
├─theme Theme configuration
└─utils Common plugins

Frontend Development and Deployment

The project uses yarn workspace for development, please务必 use yarn for development.

1. Install dependencies

yarn install

This process takes a relatively long time as it needs to pull the required dependency packages from remote sources. You can only proceed with subsequent operations after successfully installing the dependency packages.

2. Enter development debugging mode

yarn dev

The project uses vite for packaging and debugging. If you need to conduct secondary development and modifications to the project, you can execute this command to enter development mode. After the project starts successfully, enter: https://127.0.0.1:3002 in the browser for project development and debugging.

Before development, please note whether you need to modify vite's proxy configuration:

// video-editor/vite.config.ts
server: {
  https: true,
  host: '0.0.0.0',
  port: 3002,
  proxy: {
    '/cgi-bin': { // WeChat QR code address proxy
      target: 'https://video.h5ds.com',
      changeOrigin: true,
    },
    '/api': { // API address proxy
      target: 'https://video.h5ds.com',
      changeOrigin: true,
    },
    '/video': { // Proxy address for some materials
      target: 'https://cdn.h5ds.com',
      changeOrigin: true,
    },
  },
},

3. Package and publish

yarn build

After successful packaging, a dist directory will be generated. Simply deploy it to the Nginx server directory to complete the frontend deployment. Since video encoding and decoding-related APIs require https environment support, the project must run in an https environment. For specific deployment documents, please refer to the deployment instructions.