The Triage Solution App is the client side application of the Triage-Solution project. It's a typical Single Page Application with Angular-JS/bootstrap and works together with a Web REST Api (see https://github.com/ChallengeEarth/TriageSolutionWebAPI, deployed to Azure http://triagesolution.azurewebsites.net/)
We use the tools angular js suggests: npm
together with bower
. What do you need to do to add a new dependency?
- Add the dependency to the
bower.json
-file (you find it in the root folder) - Run
npm install
- The module will be installed under
/app/bower_components/
. Here you find the js-scripts and css-files for this module. - Add a link to the js-script/css-files in your
index.html
. Take care, the order is important! if your new dependency has for example a dependency to angular, it needs to be placed below the angular-include (inindex.html
).
e.g. run the local http-server, run e2e-tests, run Karma Are the same as in the angular tutorial. Have a look at this: https://docs.angularjs.org/tutorial
While the API-part is hosted on Azure, we use the divshot-cloud to host the client-application. Simply because it's so simple to deploy (and pricing is free for a simple app). The login is connected with the [email protected] Github-Account.
All you need to re-deploy is:
- navigate to the
/app-directory
- run
divshot push
Installing divshot on a new machine is also very easy, see this: http://docs.divshot.com/guides/quick-start
Because we host the API on another platform than the client-application, we use CORS (https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). The CORS-calls/headers are configured in the API, see the Startup.cs-class
.
Browser-Caching is, as always, an issue when developing! Easiest way to solve it: always open the DevTools-Window in Chrome and activate the setting "Disable Cache while DevTools is open".