aboutsummaryrefslogtreecommitdiffhomepage
path: root/support/doc/client/code.md
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-01-12 17:16:48 +0100
committerChocobozzz <me@florianbigard.com>2018-01-12 17:17:45 +0100
commit339632b4a3f94a6ebee3767054ef6c701858a785 (patch)
treee71fe304d9b4b732609724ee2402be97843d2332 /support/doc/client/code.md
parent0af3182bf77aac7fc0a122d559ccb1941e75db23 (diff)
downloadPeerTube-339632b4a3f94a6ebee3767054ef6c701858a785.tar.gz
PeerTube-339632b4a3f94a6ebee3767054ef6c701858a785.tar.zst
PeerTube-339632b4a3f94a6ebee3767054ef6c701858a785.zip
Fix changing video in watch page
Diffstat (limited to 'support/doc/client/code.md')
-rw-r--r--support/doc/client/code.md69
1 files changed, 0 insertions, 69 deletions
diff --git a/support/doc/client/code.md b/support/doc/client/code.md
deleted file mode 100644
index 99298f21e..000000000
--- a/support/doc/client/code.md
+++ /dev/null
@@ -1,69 +0,0 @@
1# Client code documentation
2
3The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/).
4
5
6## Technologies
7
8 * [TypeScript](https://www.typescriptlang.org/) -> Language
9 * [Angular](https://angular.io) -> JavaScript framework
10 * [SASS](http://sass-lang.com/) -> CSS framework
11 * [Webpack](https://webpack.js.org/) -> Source builder (compile TypeScript, SASS files, bundle them...)
12 * [Bootstrap](http://getbootstrap.com/) -> CSS framework
13 * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser
14 * [VideoJS](http://videojs.com/) -> JavaScript player framework
15
16
17## Files
18
19The client files are in the `client` directory. The Webpack 2 configurations files are in `client/config` and the source files in `client/src`.
20The client modules description are in the [client/package.json](https://github.com/Chocobozzz/PeerTube/blob/master/client/package.json). There are many modules that are used to compile the web application in development or production mode.
21Here is the description of the useful `client` files directory:
22
23 tslint.json -> TypeScript linter rules
24 tsconfig.json -> TypeScript configuration for the compilation
25 .bootstraprc -> Bootstrap configuration file (which module we need)
26 config -> Webpack configuration files
27 src
28 |__ app -> TypeScript files for Angular application
29 |__ assets -> static files (images...)
30 |__ sass -> SASS files that are global for the application
31 |__ standalone -> files outside the Angular application (embed HTML page...)
32 |__ index.html -> root HTML file for our Angular application
33 |__ main.ts -> Main TypeScript file that boostraps our Angular application
34 |__ polyfills.ts -> Polyfills imports (ES 2015...)
35 |__ vendor.ts -> Vendor imports (Angular, Bootstrap...)
36
37Details of the Angular application file structure. It tries to follow [the official Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
38
39 app
40 |__ account -> Account components (password change...)
41 |__ admin -> Admin components (friends, users...)
42 |__ core -> Core components/services
43 |__ login -> Login component
44 |__ shared -> Shared components/services (search component, REST services...)
45 |__ videos -> Video components (list, watch, upload...)
46 |__ app.component.{html,scss,ts} -> Main application component
47 |__ app.module.ts -> Angular root module that imports all submodules we need
48
49## Conventions
50
51Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
52
53## Developing
54
55 * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies)
56 * Run `yarn install` at the root directory to install all the dependencies
57 * Run PostgreSQL and create the database `peertube_dev`.
58 * Run `npm run dev:client` to compile the client, run the server, watch client files modifications and reload modules on the fly (you don't need to refresh manually the web browser). The API listen on `localhost:9000` and the client on `localhost:3000`.
59
60In a Angular application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionnaly a SASS file.
61If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html).
62
63## Components tree
64
65![Components tree](https://github.com/Chocobozzz/PeerTube/blob/master/support/doc/client/components-tree.png)
66
67## Newcomers
68
69The 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.