web

ANYPLACE WEB

• Separate web app frontends written in AngularJS / GoogleMapsJS.
• In future work we aim to migrate to: VueJS + Leaflet.
• sample code
• All web apps share some resources:

shared
├── css
├── images
└── js/
    └── anyplace-core-js

Web Apps:

1. architect: AngularJS + Grunt
2. viewer: AngularJS + Grunt
3. viewer_campus: AngularJS + Grunt
4. developers: sbt-play-swagger + swagger-ui
   • this is generated by the backend (see DOCUMENTATION.md)
5. anyplace-vue: sample VueJS + Leaflet code

---

---

DEPLOYMENT:

---

1. Prepare sources

1.1 Clone from repository

• If starting from scratch you can clone:

git clone [email protected]:dmsl/anyplace.git git.web

• If the code was there, make sure to keep it updated
  • e.g. git pull in git.web to fetch latest sources..
• active development of the web apps is on the branch: develop-clients-web
  • you might want to checkout that one, or the master one

1.2 Configure the Backend URL

• You must modify: shared/js/anyplace-core-js/api.js
• and enter your backend's URL by modifying the API.url variable
• the public anyplace server is:
  • https://ap.cs.ucy.ac.cy:44/api

2. Install compilation tools

• The Angular apps need some dependencies
• these apps are:
  • architect, viewer, or viewer_campus
• These are sample commands.
• Use up-to-date info to install the tools below

sudo apt install npm
sudo npm install -g bower
sudo apt install node-grunt-cli

3. Compile web apps

• Repeat this process for each app
• cd to each app dir
  • install bower dependencies
  • install npm dependencies
  • deploy app using grunt:
    • there is devepopment mode and normal deploy

3.1 Install dependencies:

bower install
npm install  # npm install -g grunt-cli

3.2 Deploy app

• the development version will keep watching for resource changes
  • e.g. when you modify a JS file, it will recompile
  • or when you put new images or CSS files in /shared/, it will recompile/optimize those
• use it when you are developing
• if you want to deploy anyplace (i.e., on a server) use the second command

grunt # development version, that "watches" for changes

grunt deploy

## for windows use:
## grunt.cmd

Compilation output (info)

• this will generate many files
• these will reside in the build folder of each app
• those are ignored from git

    <web-app>
    ├── build
    │   ├── css
    │   │   └── anyplace.min.css  # Concatenated and minified CSS
    │   ├── images
    │   │   └── ...               # Optimized images
    │   └── js
    │       └── anyplace.min.js   # Concatenated and minified JS files
    ├── bower_components
    │   └── ...                   # Bower dependencies
    └── index.html

Sample script: deploy_webapps.sh

Output

0. probably will need adjustments but it's a good starting point
1. First, you must download the sources
2. Install any tools
3. Compile + Deploy the apps