Debug Environment Setup

The setup instructions are enabling the build of the project and some debugging. Full debugging of the site requires additional settings.

Contents

• Angular web UI
• Capacitor
• Tests

Angular

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.

Capacitor

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:watch-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
5. Make sure the device allows debugging
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

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