All Products
Search
Document Center

AppServer console source code integration

Last Updated: Nov 14, 2019

Project description

The SmartVideo console project develops the front-end webpage of the AppServer for you to graphically view and manage videos. For example, you can play videos, view snapshots, manually audit videos, and recommend videos. This project is built based on @vue/cli 3. Using the Babel and Scss configuration of @vue/cli, you can quickly create a lightweight project.

Environment requirements

You need to install Node.js. Most dependencies of this project require the Node.js environment, such as the node-sass library used to compile Sass. You also need to install npm, which is a package manager for Node.js. It is used to install, update, and delete dependencies in the Node.js environment. You can visit the Node.js official website to download an appropriate Node.js installation package. When you install Node.js, npm is also installed.

Major technology stacks

The involved technology stacks include:

Source code download

The SmartVideo console source code is in the same directory as the SmartVideo AppServer source code. You need to download and decompress the SmartVideo AppServer source code package, and then find the SmartVideo console source code in the video-admin directory. The video-admin directory is the working directory of the SmartVideo console source code. You need to run commands in the video-admin directory and publish console source code files.

Features

The SmartVideo console provides the following features:

  • The SmartVideo console sets a request interceptor to process logon requests or request users whose logon expires to log on again.
  • The SmartVideo console lists all videos and allows you to:
    • Query videos based on the video ID, user ID, username, video title, audit status, and creation date.
    • View video information, including the video duration, video size, and video ID.
    • Play videos in different resolutions and view the video description.
    • Display snapshots.
    • Check the audit status and transcoding status.
    • Recommend, audit, transcode (if any transcoding jobs failed), and delete videos.
  • The SmartVideo console lists recommended videos and allows you to:
    • Query videos based on the video ID, user ID, username, video title, and creation date.
    • View video information, including the video duration, video size, and video ID.
    • Play videos in different resolutions and view the video description.
    • Check the audit status and transcoding status.
    • Preload content, cancel recommendation, and transcode videos based on Narrowband HD (if any Narrowband HD transcoding jobs failed).

Directory structure

After decompressing the downloaded source code package, you can find the SmartVideo console source code in the video-admin directory. The video-admin directory is the working directory of the SmartVideo console source code. The directory structure of the video-admin directory is shown as follows:

  1. ├── node_modules // The dependencies in the Node.js environment. After you run the npm install command, all dependencies are installed in this directory.
  2. ├── dist // The packaged project files.
  3. ├── public
  4. ├── favicon.ico
  5. └── index.html // The webpage entry, where you can reference content from a Content Delivery Network (CDN), such as online JS and CSS files.
  6. ├── src // The business logic and Vue components.
  7. ├── assets // The static resources, such as CSS files, images, and fonts.
  8. ├── images
  9. └── scss
  10. ├── components // The Vue components.
  11. ├── RecommendVideo.vue // The pop-up box for recommended videos.
  12. └── VodPlayer.vue // The player.
  13. └── Tags.vue // The video tags.
  14. └── VideoDot.vue // The video markers.
  15. └── VideoSort.vue // The TV play settings.
  16. ├── mixin // The Vue mixin directory.
  17. └── index.js
  18. ├── router-short // The routing table configuration.
  19. └── index.js
  20. ├── views // The rendering components of Vue Router.
  21. ├── list // The rendering component of the video list router.
  22. └── index.vue
  23. ├── login // The rendering component of the logon router.
  24. └── index.vue
  25. ├── recommend // The rendering component of the recommended video list router.
  26. └── index.vue
  27. └── videos // The rendering component of the side navigation pane and main page.
  28. └── index.vue
  29. ├── App.vue // The main rendering component.
  30. ├── main.js // The main entry files.
  31. └── router.js // The configuration file of Vue Router.
  32. ├── .browserslistrc // The browser compatibility list.
  33. ├── .gitignore
  34. ├── babel.config.js // The configuration file of Babel.
  35. ├── package-lock.json
  36. ├── package.json // The package description files, including various dependencies, authors, and description.
  37. ├── postcss.config.js // The configuration files of PostCSS, with CCS vendor prefixes added.
  38. ├── README.md
  39. ├── README_zh.md
  40. └── vue.config.js // The configuration file of Vue.js.

Compilation and publish

Compilation

  1. Set up the environment. Use the command-line tool to go to the project directory video-admin. Run the following command to install the dependencies of the project:
  1. npm install
  1. Modify the configuration in the vue.config.js file to set the proxy parameter to your back-end domain name. The sample code is as follows:
  1. module.exports = {
  2. // Specify the proxy for front-end development.
  3. devServer: {
  4. proxy: 'https://example.com', // The back-end domain name, without a backslash (/) at the end.
  5. },
  6. productionSourceMap: false,
  7. // Specify the path of static resources for the production environment and development environment.
  8. publicPath: process.env.NODE_ENV === 'production'
  9. ? 'https://example.com/resource/'
  10. : '/',
  11. }
  1. After installing dependencies and modifying the configuration, run the following command:
  1. npm run serve
  1. This command starts a service on your computer with the default URL of http://localhost:8080/. You can open this URL in a browser to preview the project.

Publish

Go to the project directory video-admin and run the following command to package project files:

  1. npm run build

When you publish the project in the production environment, set the publicPath parameter in the vue.config.js file to the path of static resources. For example, this project uses the Spring Boot framework at the back end and its static resources are stored in the webapp/resource/short-video directory. In this case, set the publicPath parameter in the vue.config.js file as follows:

  1. module.exports = {
  2. // Specify the proxy for front-end development.
  3. devServer: {
  4. proxy: 'http://127.0.0.1:8080', // The back-end domain name, without a backslash (/) at the end.
  5. },
  6. productionSourceMap: false,
  7. // Specify the path of static resources for the production environment and publishing environment.
  8. publicPath: process.env.NODE_ENV === 'production'
  9. ? '/resource/short-video/'
  10. : '/',
  11. }

Actually, you are using webpack in @vue/cli to package project files. You can customize the webpack configuration in the vue.config.js file. For more information, see @vue/cli Configuration Reference.

After you run the packaging command, packaged project files are generated in the root directory of the project: dist/. You need to copy all files in this directory into the webapp/resource/short-video directory. The structure of the dist/ directory is as follows:

  1. ├──dist
  2. ├── css
  3. ├── app.[hash].css // The CSS file of Vue components or the custom CSS file.
  4. └── chunk-vendors.[hash].css // The CSS file imported by dependencies.
  5. ├── fonts
  6. ├── img
  7. ├── js
  8. ├── app.[hash].css // The JS file of Vue components or the custom JS file.
  9. └── chunk-vendors.[hash].css // The JS file imported by dependencies.
  10. ├── favicon.ico
  11. └── index.html

In this directory, webpack has separated dependent CSS and JS files from custom CSS and JS files. This not only speeds up the webpage responses, but also allows you to update only the app.[hash].js and app.[hash].css files during iteration if dependencies are not changed.

Finally, store the files in the dist/ directory on the AppServer.

AppServer deployment

To deploy the AppServer, you need to store static resources on it. For example, this project uses the Spring Boot framework at the back end. You need to change the targetPath setting of the <resources> tag in the pom.xml file. For more information, see AppServer source code integration. Finally, copy the files in the dist/ directory into the webapp/resource/short-video directory. Enter <Your domain name>/resource/index.html in a browser. If you can visit this URL, the AppServer is deployed.