All Products
Search
Document Center

AppServer console source code integration

Last Updated: Aug 01, 2019

Project description

The SmartVideo console project develops the frontend webpage of the AppServer for you to graphically view and manage videos. For example, you can play videos, view snapshots, manually review 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 folder 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 folder. The video-admin folder is the working directory of the SmartVideo console source code. You need to run all of the following commands in the video-admin directory.

Features

The SmartVideo console provides the following features:

  • Sets a request interceptor to process logon requests or request users whose logon expires to log on again.
  • Lists all videos and allows you to:
    • Query videos based on the video ID, user ID, username, video title, review status, and creation date.
    • View video information, including the video duration, video size, and video ID.
    • Play videos in different definitions and view the video description.
    • Display snapshots.
    • Check the review status and transcoding status.
    • Recommend, review, transcode (if any transcoding jobs failed), and delete videos.
  • 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 definitions and view the video description.
    • Check the review 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 folder. The video-admin folder is the working directory of the SmartVideo console source code. The directory structure of the video-admin folder is shown as follows:

├── node_modules                  // The dependencies in the Node.js environment. After you run the npm install command, all dependencies are installed in this directory.
├── dist                          // The packaged project files.  
├── public                        
│   ├── favicon.ico               
│   └── index.html                // The webpage entry, where you can reference content from a Content Delivery Network (CDN), such as online JS and CSS files.
├── src                           // The business logic and Vue components.
│   ├── assets                    // The static resources, such as CSS files, images, and fonts.
│   │   ├── images
│   │   └── scss
│   ├── components                // The Vue components.
│   │   ├── RecommendVideo.vue    // The pop-up box for recommended videos.
│   │   └── VodPlayer.vue         // The player.
│   ├── mixin                     // The Vue mixin directory.
│   │   └── index.js
│   ├── views                     // The rendering components of Vue Router.
│   │   ├── list                  // The rendering component of the video list router.
│   │   │  └── index.vue
│   │   ├── login                 // The rendering component of the logon router.
│   │   │   └── index.vue
│   │   ├── recommend             // The rendering component of the recommended video list router.
│   │   │   └── index.vue
│   │   └── videos                // The rendering component of the side navigation pane, top navigation bar, and main page.
│   │       └── index.vue
│   ├── App.vue                   // The main rendering component.
│   ├── main.js                   // The main entry files.
│   └── router.js                 // The configuration file of Vue Router.
├── .browserslistrc               // The browser compatibility list.
├── .gitignore
├── babel.config.js               // The configuration file of Babel.
├── package-lock.json
├── package.json                  // The package description files, including various dependencies, authors, and description.
├── postcss.config.js             // The configuration files of PostCSS, with CCS vendor prefixes added.
├── README.md
├── README_zh.md
└── 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:
npm install
  1. Modify the configuration in the vue.config.js file to set the proxy parameter to your backend domain name. The sample code is as follows:
module.exports = {
  // Specifies the proxy for frontend development.
  devServer: {
    proxy: 'https://example.com', // The backend domain name, without a backslash (/) at the end.
  },
  productionSourceMap: false,
  // Specifies the path of static resources for the production environment and development environment.
  publicPath: process.env.NODE_ENV === 'production'
    ? 'https://example.com/resource/'
    : '/',
}
  1. After installing dependencies and modifying the configuration, run the following command:
npm run serve
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:

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 backend and its static resources are stored in the webapp/resource/ directory. In this case, set the publicPath parameter in the vue.config.js file as follows:

module.exports = {
  // Specifies the proxy for frontend development.
  devServer: {
    proxy: 'https://example.com', // The backend domain name, without a backslash (/) at the end.
  },
  productionSourceMap: false,
  // Specifies the path of static resources for the production environment and development environment.
  publicPath: process.env.NODE_ENV === 'production'
    ? 'https://example.com/resource/'
    : '/',
}

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 running 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 directory. The structure of the dist/ directory is as follows:

├──dist
   ├── css
   │   ├── app.[hash].css             // The CSS file of Vue components or the custom CSS file.
   │   └── chunk-vendors.[hash].css   // The CSS file imported by dependencies.
   ├── fonts
   ├── img
   ├── js
   │   ├── app.[hash].js             // The JS file of Vue components or the custom JS file.
   │   └── chunk-vendors.[hash].js   // The JS file imported by dependencies.
   ├── favicon.ico
   └── 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 response, 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 folder 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 backend. 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 directory. Enter <Your domain name>/resource/index.html in a browser. If you can visit this URL, the AppServer is deployed.