PeerTube/support/doc/client/code.md

Client code documentation

The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with TypeScript/Angular 2.

Technologies

• TypeScript -> Language
• Angular 2 -> JavaScript framework
• SASS -> CSS framework
• Webpack 2 -> Source builder (compile TypeScript, SASS files, bundle them...)
• Bootstrap -> CSS framework
• WebTorrent -> JavaScript library to make P2P in the browser
• VideoJS -> JavaScript player framework

Files

The client files are in the client directory. The Webpack 2 configurations files are in client/config and the source files in client/src. The client modules description are in the client/package.json. There are many modules that are used to compile the web application in development or production mode. Here is the description of the useful client files directory:

tslint.json   -> TypeScript linter rules
tsconfig.json -> TypeScript configuration for the compilation
.bootstraprc  -> Bootstrap configuration file (which module we need)
config        -> Webpack configuration files
src
|__ app          -> TypeScript files for Angular 2 application
|__ assets       -> static files (images...)
|__ sass         -> SASS files that are global for the application
|__ standalone   -> files outside the Angular application (embed HTML page...)
|__ index.html   -> root HTML file for our Angular 2 application
|__ main.ts      -> Main TypeScript file that boostraps our Angular 2 application
|__ polyfills.ts -> Polyfills imports (ES 2015...)
|__ vendor.ts    -> Vendor imports (Angular, Bootstrap...)

Details of the Angular 2 application file structure. It tries to follow the official Angular 2 styleguide.

app
|__ account                      -> Account components (password change...)
|__ admin                        -> Admin components (friends, users...)
|__ core                         -> Core components/services
|__ login                        -> Login component
|__ shared                       -> Shared components/services (search component, REST services...)
|__ videos                       -> Video components (list, watch, upload...)
|__ app.component.{html,scss,ts} -> Main application component
|__ app.module.ts                -> Angular 2 root module that imports all submodules we need

Conventions

Uses TSLint for TypeScript linting and Angular 2 styleguide.

Developing

• Install the dependencies
• Run npm install at the root directory to install all the dependencies
• Run PostgreSQL and create the database peertube_dev.
• Run npm run dev to compile the client and automatically run the server. Then the server will watch and compile the client files automatically. You just need to refresh the browser to see your modifications.

In a Angular 2 application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionnaly a SASS file. If you are not familiar with Angular 2 I recommend you to read the quickstart guide.

Components tree

Newcomers

The main client component is app.component.ts. You can begin to look at this file. Then you could navigate in the different submodules to see how components are built.