diff --git a/README.md b/README.md index 0501563e1..d8e014825 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Alfresco Content App +[Public documentation](https://alfresco.github.io/alfresco-content-app/) + This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.4.7. ## Development server @@ -23,6 +25,25 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github. Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). +## Running documentation locally + +For development purposes, you can run and test documentation locally. +That is useful when working in different branches instead of a `master` one. + +Run the following command to install the lightweight development server [wsrv](https://denysvuika.gitlab.io/wsrv/#/): + +```sh +npm install -g wsrv +``` + +Now you can use the next command to serve the documentation folder in the browser: + +```sh +wsrv docs/ -s -l -o +``` + +The browser page is going to automatically reload upon changes. + ## Further help To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/docs/README.md b/docs/README.md index 0501563e1..18e85ecff 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,28 +1,15 @@ # Alfresco Content App -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.4.7. +## Prerequisites -## Development server +- Alfresco Content Services (Community) or Alfresco Content Services 5.2.2 (Enterprise) +- [node.js](https://nodejs.org/en/) 8.9.1 or later -Run `ng start` for a dev server. Navigate to `http://localhost:3000/` (opens by default). -The app will automatically reload if you change any of the source files. +## Building and running locally -## Code scaffolding +Please refer to the [developer docs](/build) to get more details on building and running application on your local machine. -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +## Using with Docker -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). +The Content App provides a "Dockerfile" and "docker-compose" files to aid in running application in a container. +Please refer to the "[Using with Docker](/docker)" article for more details. diff --git a/docs/build.md b/docs/build.md new file mode 100644 index 000000000..2afeb489b --- /dev/null +++ b/docs/build.md @@ -0,0 +1,49 @@ +# Building from source code + +The Content App is based on [Angular CLI](https://cli.angular.io), and you can use all the commands, generators and blueprints supported by the CLI. + +Use the following commands to clone a copy of the project, install dependencies and run it. + +```sh +git clone https://github.com/Alfresco/alfresco-content-app.git +cd alfresco-content-app +npm install +npm start +``` + +The application run at port 3000 by default, and should automatically open in the default browser once project compilation finishes. + +## Proxy settings + +The Content App provides a proxy configuration for local development server +that allows you to address specific scenarios with CORS and native authentication dialogue. + +You can find settings in the "proxy.conf.js" file in the project root directory. + +
+The proxy settings get automatically applied every time you run the application with "npm start" script. +You must restart the application every time you change the setting values. +
+ +## Running documentation locally + +For development purposes, you can run and test documentation locally. +That is useful when working in different branches instead of a `master` one. + +Run the following command to install the lightweight development server [wsrv](https://denysvuika.gitlab.io/wsrv/#/): + +```sh +npm install -g wsrv +``` + +Now you can use the next command to serve the documentation folder in the browser: + +```sh +wsrv docs/ -s -l -o +``` + +The browser page is going to automatically reload upon changes. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). diff --git a/docs/configuration.md b/docs/configuration.md new file mode 100644 index 000000000..922b1fb13 --- /dev/null +++ b/docs/configuration.md @@ -0,0 +1,111 @@ +# Application Configuration + +The Content Application provides support for a global settings file `app.config.json` that you can use to customise the behaviour of ACA and ADF components. + +## Server settings + +Once the Content Application starts, it needs to know where the Alfresco Content Services (either Community or Enterprise) server is. +The "ecmHost" property allows you to set the address of the server using the dynamic or static format. + +### Dynamic address + +The example below demonstrates the most common dynamic format for development environment: + +```json +{ + "ecmHost": "http://{hostname}{:port}", + ... +} +``` + +The configuration above assumes you are running ACS and Content App on the same server and port +and allows deploying to different servers having the same unified configuration file. + +For example, a proxy server at `localhost:3000` hosting the Content App as the root application, +and `localhost:3000/alfresco` for the ACS repository. + +At runtime, the application is going to automatically substitute the "{hostname}" value with the original hostname. +Optionally it can also use the value of the original port if present, for example, "3000" at local machines, or skip the value for port 80. + +### Static address + +Alternatively, you can provide a static address for the ACS services if necessary: + +```json +{ + "ecmHost": "http://localhost:3000", + ... +} +``` + +## Application settings + +The are many settings you can change to alter the default behaviour of the application. + +### Application Name + +The following block allows you to change the name of the application. + +```json +{ + ..., + "application": { + "name": "Alfresco Example Content Application" + } +} +``` + +The value of the `application.name` key gets appended to every browser tab title at runtime +with the format `[page title] - [application name]`, +for example: "Personal Files - Alfresco Example Content Application". + +### Restricted content + +You can restrict users from uploading certain types of files and folders by setting or extending the list of rules at the "files.excluded" path. + +By default, the application ships with the following rules already predefined: + +```json +{ + ..., + "files": { + "excluded": [ + ".DS_Store", + "desktop.ini", + "thumbs.db", + ".git" + ] + }, + ... +} +``` + ++You can get more details on the supported rules in the following article: [Upload Service](https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/upload.service.md). +
+ +### Pagination settings + +You can change the default settings of the pagination that gets applied to all the document lists in the application. + +```json +{ + ..., + "document-list": { + "supportedPageSizes": [ + 25, + 50, + 100 + ] + }, + ... +} +``` + +## Your custom settings + +You can store any information in the application configuration file, and access it at runtime by utilising the `AppConfigService` service provided by the ADF framework. + ++Please refer to the [AppConfigService](https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/app-config.service.md) documentation to get more details on Application Configuration features and API available. +
diff --git a/docs/cors.md b/docs/cors.md new file mode 100644 index 000000000..192da5af7 --- /dev/null +++ b/docs/cors.md @@ -0,0 +1,21 @@ +# Cross Origin Resource Sharing (CORS) + +## Chrome Workaround + +For the Chrome you can use the following plugin that allows you toggle CORS: +[Allow-Control-Allow-Origin](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi) + +## Firefox Workaround + +FireFox users can try the following plugin: [CORS Everywhere](https://addons.mozilla.org/en-Gb/firefox/addon/cors-everywhere/) + +## Safari Workaround + +If you are developing or testing with Safari then you can use the "Develop" menu to toggle the CORS mode. +Please note that page must be reloaded every time you change CORS settings. + + + +## See also + +- [Using CORS](https://www.html5rocks.com/en/tutorials/cors/) diff --git a/docs/docker.md b/docs/docker.md new file mode 100644 index 000000000..8f24330cc --- /dev/null +++ b/docs/docker.md @@ -0,0 +1,88 @@ +# Using with Docker + ++This article assumes you are familiar with Docker and know how to create images and containers. +
+ +You can create a Docker image to run Alfresco Content App in the container. + +## Building from source code + +You need to run the following commands to build the project from the source code: + +```sh +npm install +npm run build +``` + +That produces a build in the "dist" folder that you can use with a Docker image. + ++Also, you may need to update the `dist/app.config.json` file with the settings relevant to your scenario. +
+ +## Creating an image + +The Content Application provides a "Dockerfile" file in the repository root. +You can build the image with the following command: + +```sh +docker image build -t content-app . +``` + +## Running image in a container + +To run the image locally, you can use the following command: + +```sh +docker container run -p 80:80 --rm content-app +``` + +Navigate to "http://localhost" to access the running application. + +## Docker Compose file + +You can also use the "docker-compose" file for local development and testing. +To build and run container run the following command in the root project folder: + +```sh +docker-compose up +``` + +To perform a cleanup operation, use the next command: + +```sh +docker-compose down --rmi all +``` + +Navigate to "http://localhost:3000" to access the running application. + ++Please keep in mind that you should manually build the project every time you want to publish the image or run it locally with the container. +
+ +## Using with local ACS setup + +If you run ACS at port 8080 as a Docker container (typical development configuration), you can use the following command to build the project before creating an image: + +```sh +npm run build:dev +``` + +The command above updates the "dist/app.config.json" file to point the Content App to "http://localhost:8080" upon startup. +Alternatively, you can change the configuration file manually before generating an image. + +So the development workflow, in this case, is going to be: + +```sh +npm run build:dev +docker-compose up +``` + +Navigate to "http://localhost:3000" to access the running application. + +To perform a cleanup operation, use the next command: + +```sh +docker-compose down --rmi all +``` diff --git a/docs/images/safari-develop-menu.png b/docs/images/safari-develop-menu.png new file mode 100644 index 000000000..af2b58d9a Binary files /dev/null and b/docs/images/safari-develop-menu.png differ diff --git a/docs/index.html b/docs/index.html index 2530e9341..4366360a0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,6 +17,32 @@ { title: 'Home', path: '/' + }, + { + title: 'Building', + path: 'build' + }, + { + title: 'Docker', + path: 'docker' + }, + { + title: 'Guides', + type: 'dropdown', + items: [ + { + title: 'Building', + path: 'build' + }, + { + title: 'CORS', + path: 'cors' + }, + { + title: 'Configuration', + path: 'configuration' + } + ] } ], icons: [ diff --git a/src/app.config.json b/src/app.config.json index 6d3dbe894..921c92dde 100644 --- a/src/app.config.json +++ b/src/app.config.json @@ -1,5 +1,5 @@ { - "ecmHost": "http://{hostname}:{port}", + "ecmHost": "http://{hostname}{:port}", "application": { "name": "Alfresco Example Content Application", "build": "1234"