Intro

This repository holds all the files that the site needs in order to run.

Contents

• Technology stack
• Architecture and folder stucture of UI
• Architecture of Server
• Setting Up the Project for Development
• Starting a debug session
• Setup the server

Technology stack

The technology stack of this site is base on the following frameworks:

• Typescript
• Angular
• Angular-Material
• Mapbox-gl-js
• ngx-mapbox-gl
• Jasmine + Karma - for unit testing.
• Asp.Net core
• NSubstitute
• GraphHopper
• Elastic Search and NEST
• Net Topology Suite
• OsmSharp
• Wikipedia using Wiki client library Wikipedia and upload images to Wikimedia common
• Imgur - Used for uploadling anonymous images
• Cordova - Used to wrap the site as a mobile application and add some native capabilities
• Redux using angular-redux
• PouchDB

Architecture and folder stucture of UI

The architecture is based heavily on Angular:

• application - where all the is, topmost folder.
  • common - used to store data types that are common to the entire app.
  • content - used for images, mainly favicon.
  • components - this layer handles the UI calls and bindings along with the relevant css and html files.
  • directives - folder for all the directives.
  • services - this layer hold the lower level data handling.
    • layers - where the layers logic is - POI, route, wiki, nakeb, relevant services, etc...
    • routers - handles the routing - currently there are 4 routers - hike, bike, fourbyfour and none.
• fonts - icomoon generated font for icons instead of images.
• environments - used for angular-cli to define production and dev variables.
• translations - all relevant data related to i18n

Architecture of Server

The architecture is based on layers

• Contollers - the topmost layer to catch all the requests
• Services - responsible for orchastrating executors
• Converters - converters logic between types of geo structures
• Executers - basic logical building blocks
• DataAccessInterfaces - a slim layer to decouple business logic from data access
• DataAccess - database, file system and network request are processed in this layer

Setting Up the Project for Development

In order to be able to build this site you'll need some tools:

• Install Java runtime - make sure to install 64bit version.
• Download and install Visual Studio community 2017 or later. Select:
  • ASP.NET and web development
  • .NET cross-platform development
• .Net core SDK 2.1
• Install node.js for windows (8.9+). Use the recommended 64-bit installer on modern Windows versions.
• Open Visual Studio
• Follow these steps to update the version of node.js Visual Studio uses
• If asked, and you don't have any other preference, choose "General" development settings
• In Visual Studio, File → Open → Project/Solution... and choose the IsraelHiking.sln solution from the Site reposotory location.
• From Visual Studio's Tools → Extensions and Updates...
  • Go to Online
  • Search for the following and Download them:
    • Web Essentials 2017
  • Exit Visual Studio to complete the installation
  • Find the VSIX Installer window and click Modify, wait for the installation to complete, and close it
  • Open Visual Studio, wait for the installations to complete, and restart when asked
• Open IsraelHiking.sln. You may use File → Recent Projects and Solutions
• Compile using Ctrl-Shift-B - Note: please be patient as it will take time to download all the packages.
• Go to IsraelHiking.Web and run from command line:
  • npm install to install all npm packages for the client side code
  • npm run build to generate the Angular UI client. It should create wwwroot folder on a successful run
• If you want to update the translations or upload images from your debug environment, right-click on IsraelHiking.Web and select Manage User Secrets. Otherwise, skip this step.
  
  In the secrets.json file that opens add the applicable fields and save the file.

  {
    "wikiMediaUserName": "your wikimedia user",
    "wikiMediaPassword": "your wikimedia password"
    "zanataUserName": "your zanata user",
    "zanataApiKey": "your zanata api key",
    "imgurClientId": "your imgur clinet ID"
  }
  

Starting a debug session

See the relevant page in our wiki

Setup the server

In order to be able to make the server work a few prerequisits are needed:

• Windows machine with IIS enabled and a site (Although this site should be able to run on Linux it was never fully tested).
• Install Java Runtime Environment.
• Add curl to path.
• Elasticsearch.bat and GraphHopper.cmd should be processes that run when the server machine starts and never die - use a watchdog or windows service to make sure they do (we use NSSM. for linux, check the java command inside those files and use a deamon to run them).
• Create a task to rebuild Graph Hopper and Elastic Search:
  • Open Windows' Task Scheduler
  • Create task
  • Add an action to run curl -k -X POST https://israelhiking.osm.org.il/api/update - d ""
  • Add a "On a schedule" trigger to run once a day or at the frequency of the map updates.
• Create a task to update elastic search using the above steps with the action curl -k -X PUT https://israelhiking.osm.org.il/api/update - d ""
• Create a task to clean the IIS logs using Scripts\CleanLogs.cmd