JetPad is a web-based collaborative text editor built with SwellRT real-time technology and the Angular 2 framework.
Install node.js and npm package manager in order to download the dependencies. Then, do:
git clone [email protected]:P2Pvalue/jetpad.git
cd jetpad
npm i
You can run it in dev mode with:
npm start
The server is running now at http://localhost:3000/
If you want to build the project in dev mode, do:
npm run build
For production ready build, do:
npm run build:prod
Output files will be placed in '/dist' folder.
JetPad requires SwellRT as backend server. To setup a SwellRT server, please visit the SwellRT Readme.
If you run JetPad in dev mode (npm start) the index file
index.html will point to localhost:9898, the default SwellRT development endpoint. For other scenarios
edit index.html to adjust the endpoint to swellrt.js.
When using Nginx as fronted server for JetPad, use following configuration to cache resources properly:
server {
listen 80;
listen [::]:80;
server_name jetpad.local.net;
root /var/www/jetpad;
index index.html;
location / {
try_files $uri$args $uri$args/ $uri/ /index.html =404;
add_header Cache-Control must-revalidate;
}
location /assets {
etag on;
}
location ~ \.bundle\.js$ {
add_header Cache-Control public;
etag off;
expires max;
gzip on;
gzip_types application/javascript;
}
}
JetPad uses Webpack 2. In order to manage project dependencies you should use npm system or add directly the new dependency in package.json file:
npm install <dependency> --save
The project's layout is based in AngularClass starter. The configuration is hosted completely under config folder of the project. There are three types of configuration: dev, prod and test. Also there is a configuration for unit test managed by Karma and E2E tests based in protractor.
The project uses Bootstrap as UI framework. The current version is 3.3.7. The project also uses the bootstrap-material-design modules and bootstrap-sass module.
Bootstrap also requires Jquery. The version imported with the project is 1.9.1. The Sass styles are defined in src/assets folder and the main file is src/app/app.style.scss .
Currently the project is not implementing Angular components as Web Components. The configuration in app.component.ts, main component of the application set up the encapsulation property as encapsulation: ViewEncapsulation.None. This way all defined sytles will be prepended in style elements in the head of the application. The transformation of sass styles to pure CSS is made up by webpack loaders:
css-loader, css-to-string-loader,
resolve-url and sass-loader.
Code and documentation copyright 2016-2017 Pablo Ojanguren, David Llop, Alejandro Garrido and University Complutense of Madrid. Code released under the Affero GPL v3 license. Doc licensed under CC BY 4.0.