aboutsummaryrefslogtreecommitdiffhomepage
path: root/support/doc/development
diff options
context:
space:
mode:
Diffstat (limited to 'support/doc/development')
-rw-r--r--support/doc/development/client/code.md72
-rw-r--r--support/doc/development/client/components-tree.pngbin0 -> 47396 bytes
-rw-r--r--support/doc/development/server/code.md72
-rw-r--r--support/doc/development/server/upload-video.pngbin0 -> 56458 bytes
4 files changed, 144 insertions, 0 deletions
diff --git a/support/doc/development/client/code.md b/support/doc/development/client/code.md
new file mode 100644
index 000000000..ddd277e54
--- /dev/null
+++ b/support/doc/development/client/code.md
@@ -0,0 +1,72 @@
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
36Details of the Angular application file structure. It tries to follow [the official Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
37
38 app
39 |__ +admin -> Admin components (followers, users...)
40 |__ account -> Account components (password change...)
41 |__ core -> Core components/services
42 |__ header -> Header components (logo, search...)
43 |__ login -> Login component
44 |__ menu -> Menu component (on the left)
45 |__ shared -> Shared components/services (search component, REST services...)
46 |__ signup -> Signup form
47 |__ videos -> Video components (list, watch, upload...)
48 |__ app.component.{html,scss,ts} -> Main application component
49 |__ app-routing.module.ts -> Main Angular routes
50 |__ app.module.ts -> Angular root module that imports all submodules we need
51
52## Conventions
53
54Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
55
56## Developing
57
58 * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies)
59 * Run `yarn install --pure-lockfile` at the root directory to install all the dependencies
60 * Run PostgreSQL and create the database `peertube_dev`.
61 * 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`.
62
63In a Angular application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionally a SASS file.
64If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html).
65
66## Components tree
67
68![Components tree](https://github.com/Chocobozzz/PeerTube/blob/master/support/doc/client/components-tree.png)
69
70## Newcomers
71
72The 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.
diff --git a/support/doc/development/client/components-tree.png b/support/doc/development/client/components-tree.png
new file mode 100644
index 000000000..cd89aa02b
--- /dev/null
+++ b/support/doc/development/client/components-tree.png
Binary files differ
diff --git a/support/doc/development/server/code.md b/support/doc/development/server/code.md
new file mode 100644
index 000000000..d909b0c3d
--- /dev/null
+++ b/support/doc/development/server/code.md
@@ -0,0 +1,72 @@
1# Server code documentation
2
3The server is a web server developed with [TypeScript](https://www.typescriptlang.org/)/[Express](http://expressjs.com).
4
5
6## Technologies
7
8 * [TypeScript](https://www.typescriptlang.org/) -> Language
9 * [PostgreSQL](https://www.postgresql.org/) -> Database
10 * [Express](http://expressjs.com) -> Web server framework
11 * [Sequelize](http://docs.sequelizejs.com/en/v3/) -> SQL ORM
12 * [WebTorrent](https://webtorrent.io/) -> BitTorrent tracker and torrent creation
13 * [Mocha](https://mochajs.org/) -> Test framework
14
15
16## Files
17
18The server main file is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts).
19The server modules description are in the [package.json](https://github.com/Chocobozzz/PeerTube/blob/master/package.json) at the project root.
20All other server files are in the [server](https://github.com/Chocobozzz/PeerTube/tree/master/server) directory:
21
22 server.ts -> app initilization, main routes configuration (static routes...)
23 config -> server YAML configurations (for tests, production...)
24 scripts -> Scripts files for npm run
25 server
26 |__ controllers -> API routes/controllers files
27 |__ helpers -> functions used by different part of the project (logger, utils...)
28 |__ initializers -> functions used at the server startup (installer, database, constants...)
29 |__ lib -> library function (WebTorrent, OAuth2, ActivityPub...)
30 |__ middlewares -> middlewares for controllers (requests validators, requests pagination...)
31 |__ models -> Sequelize models for each SQL tables (videos, users, accounts...)
32 |__ tests -> API tests and real world simulations (to test the decentralized feature...)
33
34
35## Conventions
36
37Uses [JavaScript Standard Style](http://standardjs.com/).
38
39
40## Developing
41
42 * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies)
43 * Run `yarn install` at the root directory to install all the dependencies
44 * Run PostgreSQL and create the database `peertube_dev`.
45 * Run `npm run dev:server` to run the server, watch server files modifications and restart it automatically. The server (API + client) listen on `localhost:9000`.
46
47The `NODE_ENV=test` is set to speed up communications between instances (see [constants.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server/initializers/constants.ts)).
48
49`npm run help` gives you all available commands.
50
51If you want to test the decentralization feature, you can easily run 3 instances by running `npm run play`. The instances password are `test1`, `test2` and `test3`.
52
53
54## Architecture
55
56The server is composed by:
57
58 * a REST API (Express framework)
59 * a WebTorrent Tracker
60
61A video is seeded by the server with the [WebSeed](http://www.bittorrent.org/beps/bep_0019.html) protocol (HTTP).
62
63![Architecture scheme](https://github.com/Chocobozzz/PeerTube/blob/master/support/doc/server/upload-video.png)
64
65When a user uploads a video, the rest API create the torrent file and then adds it to its database.
66
67If a user wants to watch the video, the tracker will indicate all other users that are watching the video + the HTTP url for the WebSeed.
68
69## Newcomers
70
71The server entrypoint is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts). You can begin to look at this file.
72Then you can try to understand the [controllers](https://github.com/Chocobozzz/PeerTube/tree/master/server/controllers): they are the entrypoint of each API request.
diff --git a/support/doc/development/server/upload-video.png b/support/doc/development/server/upload-video.png
new file mode 100644
index 000000000..730e68cc4
--- /dev/null
+++ b/support/doc/development/server/upload-video.png
Binary files differ