web

Paperwork Web UI

General

This is a first try to build a web UI for Paperwork 2, based on Angular 9 and Material components.

Getting involved

Are you a front-end developer looking for a fun opensource project? I could use some help on this, get in touch!

Current state

GIFs (~8MB per file)

• Creating a new note
• Sharing a note
• Moving a note into a folder
• Filtering notes by tags

Docker

Environment Options

• PAPERWORK_API_GATEWAY_PROTOCOL: The protocol the front-end should communicate with the service-gateway, http or https.
• PAPERWORK_API_GATEWAY_HOST_PORT: The host/port combination under which the front-end can reach the service-gateway, e.g. api.mydomain.com:8080. If you're using a standard port (80 for http and 443 for https) you can simply specify api.mydomain.com here.

Development

Prerequisites

In order to start development, you need to have the following tools installed:

• Node.js (Mac | Ubuntu Linux | Windows)
• make (Mac: xcode-select --install | Ubuntu Linux: apt-get install make | Windows)
• yarn (Mac | Ubuntu Linux | Windows)
• Paperwork Local Dev Env

Development server

• Open a terminal/command line and cd into this directory.
• Run yarn install if you haven't done it at all or haven't done it in a while, in order to install all required dependencies.
• Run make local-run-develop for a dev server. Even though the Angular development server runs on http://localhost:4200/, this setup uses Paperwork's local dev env, hence you should navigate to http://dev.www.paperwork.local:8000/ to access your local development instance. The app will automatically reload if you change any of the source files. Use make local-run for a production build.

Code scaffolding

• Open a terminal/command line and cd into this directory.
• Run yarn install if you haven't done it at all or haven't done it in a while, in order to install all required dependencies.
• 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.

Building

• Open a terminal/command line and cd into this directory.
• Run make local-build-develop to build the project. The build artifacts will be stored in the dist/ directory. Use make local-build for a production build.

Running unit tests

• Open a terminal/command line and cd into this directory.
• Run ng test to execute the unit tests via Karma.

Running end-to-end tests

• Open a terminal/command line and cd into this directory.
• Run ng e2e to execute the end-to-end tests via Protractor.

Further help

• Open a terminal/command line and cd into this directory.
• Type ng help or go check out the Angular CLI README.