Setting Up the Project for Website Development

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

• Install Docker
• Install .Net core SDK 9.0
• Install node.js (20+).
• Run from command line dotnet restore and after that dotnet build
• 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
• Run docker compose up graphhopper - it should fail for the first time
• Run gh-update.ps1 (set chmod +x if needed) to generate the graphhopper routing data
• Run docker compose up to load the rest of the sercives
• Run dotnet run --project IsraelHiking.Web
• [Optional] For a full end-to-end with ability to upload to wikimedia and imgur set the following secrets:
  • dotnet user-secrets set "wikiMediaUserName" "your wikimedia user"
  • dotnet user-secrets set "wikiMediaPassword" "your wikimedia password"
  • dotnet user-secrets set "imgurClientId" "your imgur client ID"

Capacitor (iOS, Android)

In order to debug the Capacitor app (iOS or Android) make sure to setup everything needed according to the Capacitor setup instructions: See Capacitor's instructions here. In order to debug the app follow these steps:

1. Go to IsraelHiking.Web folder
2. Run npm run build:mobile - this will make the UI up-to-date with changes
3. Before starting a debug session in the IDE (xcode or Android Studio) run npx cap sync or npx cap sync android (for android platform)
4. Connect a device to the workstation or via wifi
5. Make sure the device allows debugging (for android)
6. Start the app from the IDE in debug mode
7. For Android: open chrome, surf to chrome://inspect and click on IsraelHiking link to open the console
8. For iOS: open safari on the mac and connect to the device to see the console. There are also prints to the xcode IDE logger from the console you can check

Watch for changes in typescript/html

In order to regenerate the client code on every change use the following command inside IsraelHiking.Web folder: npm run build:watch. This will keep the wwwroot typescript transpiled files up-to-date so you can change the code and instantly see the changes. Once this is up and running you can debug the client side code using the developer tools. For mobile use npm run build:mobile-watch

OSM data update

• Make sure the backend is up and running using the dotnet run --project IsraelHiking.Web
• Surf to localhost:5000/swagger/ and you should be presented with the API of the site
  • Expand the POST under Update
  • Select the relevant configuration and click try it out!
  • The update of the database will be running for about 10 minutes and can be seen in the logs (can be seen in the console where you ran dotnet)
  • Once completed the server is ready!

Tests

• To run UI tests use npm run test in IsraelHiking.Web folder
• To run server tests use run dotnet test
• Use Rider for running specific tests and debug .net code