DAPNET Web

The default DAPNET Web-frontend. Written in the Vue.js framework and built using webpack.

Requirements

• Installed packages: git, nodejs, npm, wget
  • You should install a current Node.js version (e.g. v6 LTS) by following these instructions
  • This process will also install the npm binary
  • Be advised that most linux distributions ship an older version of Node.js which will not work correctly
• A running webserver (e.g. apache2, nginx, lighttpd, etc.)
• A running DAPNET Core with a reachable REST-interface

Installation

1. Download the repository: git clone https://github.com/DecentralizedAmateurPagingNetwork/Web.git
2. Checkout a specific tag: git checkout tags/v2.0.0
   • This is highly recommended for improved stability and a consistent user experience
3. Copy src/store/defaultUrls.json.example to src/store/defaultUrls.json and change the default url-settings
4. Copy src/store/defaultText.json.example to src/store/defaultText.json and change the default custom text (displayed on the home page)
   • You may use HTML markup here
5. Copy src/store/defaultMap.json.example to src/store/defaultMap.json and change the default map-settings
6. (Optional) Edit static/js/custom.js and insert your custom javascript code (e.g. a Piwik tracking code)
   • You may use jQuery here
7. Download the latest coverage-data from the central server and setup a cronjob to update these files regularly
   • Create directory static/coverage/
   • Run initial download of coverage-files: cd static/coverage && wget -m -nv -nH -nd -np -R "index.html*" -e robots=off http://web.db0sda.ampr.org/dapnet-coverage/
   • Put the following line into a cronjob, adapt the PATH_WEB variable and make sure it runs regularly

   MAILTO=root
   PATH_WEB=/opt/dapnet/Web
   */5 * * * *    YOURUSERNAME    if [ ! -d $PATH_WEB/dist/assets/coverage ]; then mkdir $PATH_WEB/dist/assets/coverage; fi && wget -m -nv -nH -nd -np -R "index.html*" -e robots=off -P $PATH_WEB/dist/assets/coverage http://web.db0sda.ampr.org/dapnet-coverage/

   • Be aware: this cronjob puts the latest coverage date directly into the dist/assets/coverage/-directory and thus overwrites the files generated by a previous npm run build command. It will not update the source-files in the static/coverage/-directory
8. Download all dependencies: npm install
9. Test your setup: npm run dev
   • Open your browser at http://localhost:8081 and check that each of your customizations was successful
10. Generate the production build: npm run build
11. Copy your freshly generated files from dist/ into your webserver's htdocs/ directory
12. Done!

Deployment into a subdirectory

It is recommended to serve the DAPNET Web module from its own sub-domain. If you really need to use a sub-directory, make sure to edit config/index.js and adapt the content of line 11 (publicPath). Now run npm run build again and the page should be rendered correctly.

Updating

Before updating make sure to read the changelog and to backup your customized files (see above)!

1. Update your local repository: git fetch
2. Run through step 2 of the installation process
3. Run through steps 8. to 11. of the installation process
4. Done!

Access with port tcp/80 only

In case you want to server users who have strong firewall restrictions and cannot access the default API Port 8080, you can use your apache webserver with mod_proxy to redirect the API calls from port tcp/80 to the API Port. Add these lines to your apache config and restart apache:

	ProxyPass "/api" "http://YOURNODEURL:8080
        ProxyPassReverse "/api" "http://YOURNODEURL:8080"

The file defaultUrls.json has to be adapted by

{
        "api": "http://YOURWEBSERVERURL/api",
...

Changelog

A list of changes is always available on the Releases-page.

Create Changelog

git log v2.0.0...v2.0.1 --pretty=format:'* %s - %h'

Directories

├── build          -> webpack build files
├── config         -> webpack build config
├── dist           -> generated webapp (after "npm run build")
├── src            -> the webapp's source code
│   ├── assets     -> assets (css, images, etc.) which will be processed by webpack
│   ├── components -> all vue-components (all pages with their template, javascript and css)
│   ├── global     -> global methods used by many components
│   ├── router     -> vue-router configuration
│   └── store      -> user-data store with its default values
└── static         -> assets (css, images, etc.) which will not be processed by webpack