chore: improve way native server url provided

[chrismclarke]

Description

Tidy up legacy system that required developers to manually override config files with their local ip to test on native device, instead providing a default configuration that should work for most cases and the ability to override via local .env file if required.

Documentation has been updated to reflect the changes as per: https://docs.picsa.app/advanced/testing#running-on-a-device

Generally it should now be a 1-step process instead of 3-step, and without hardcoded file conflicts

Review Notes

Test if working via

yarn nx run picsa-apps-extension-app-native:serve

This should sucessfully configure and android build and start the development server, so that running any device or simulator from android studio should support live-reload without any additional ip changes

Discussion

Feedback discussion points if relevant (should also tag as Feedback Discussion)

Preview

Link to app preview if relevant

Screenshots / Videos

Include at least 1-2 screenshots of videos if visual changes

[OchiengPaul442]

Hey @chrismclarke, I’ve been attempting to run the app through Android Studio on my physical device and have come across some connection issues. I’ve attached a screenshot below to better illustrate the problem.

NB: While this solution does work, it requires manual intervention. Specifically, I had to modify the address in the capacitor.config file within Android Studio to match my local IP address.

[chrismclarke]

Hey @chrismclarke, I’ve been attempting to run the app through Android Studio on my physical device and have come across some connection issues. I’ve attached a screenshot below to better illustrate the problem

Thanks for looking @OchiengPaul442 I think possibly using the 0.0.0.0 workaround only works on emulators and not physical devices.

NB: While this solution does work, it requires manual intervention. Specifically, I had to modify the address in the capacitor.config file within Android Studio to match my local IP address.

Would you be able to try the solution outlined in the docs for wireless debugging? https://docs.picsa.app/advanced/testing#running-on-a-device

I've updated the pr to add capacitor.config.json to gitignore, so if you pull the changes the file should disappear, and then hopefully re-generate as required when you run the build command with the server url specified in the .env.local file

If working then I'll update the documentation to specify also a requirement if using a physical device instead of an emulator

[OchiengPaul442]

Hey @chrismclarke, I’ve been attempting to run the app through Android Studio on my physical device and have come across some connection issues. I’ve attached a screenshot below to better illustrate the problem

Thanks for looking @OchiengPaul442 I think possibly using the 0.0.0.0 workaround only works on emulators and not physical devices.

NB: While this solution does work, it requires manual intervention. Specifically, I had to modify the address in the capacitor.config file within Android Studio to match my local IP address.

Would you be able to try the solution outlined in the docs for wireless debugging? https://docs.picsa.app/advanced/testing#running-on-a-device

I've updated the pr to add capacitor.config.json to gitignore, so if you pull the changes the file should disappear, and then hopefully re-generate as required when you run the build command with the server url specified in the .env.local file

If working then I'll update the documentation to specify also a requirement if using a physical device instead of an emulator

Sure thing, @chrismclarke. I will try it out.

[OchiengPaul442]

Hey @chrismclarke,

• Here are some issues and observations I encountered while running the application on a phone and attempting wireless debugging.

Issue: Despite setting the URL in the .env.local file and rebuilding the app on the phone using Android Studio, I continue to encounter the network connection error that was previously shared. This issue persists even when trying out wireless debugging.

Observations:

Inconsistent SERVER_URL: I placed a console.log in the capacitor.config file to verify if the SERVER_URL is being correctly passed. During the build process initiated by the command yarn nx run picsa-apps-extension-app-native:serve, the correct address is initially passed. However, mid-session, it reverts back to 0.0.0.0:4200. I think this inconsistency affects the use of wireless debugging as the address changes. Upon checking the capacitor.config.json file in Android Studio, I noticed that the address does not match the one set in the .env.local file.

Server Address Visibility: I am unsure about this, but since the server is being set to0.0.0.0:4200, shouldn’t it appear in the list of URLs that can be used to access the application?

Attempted Solution: I manually changed the URL address in the capacitor.config.json file in Android Studio to my local Wi-Fi adapter address and rebuilt the application on my phone. This allowed me to use wireless debugging successfully and access via cable without issues.

USE OF EMULATOR

SERVER ADDRESS list (maybe 0.0.0.0:4200 should be include to resolve connection issue i guess)

noticed this when trying out wireless debugging

[chrismclarke]

Thanks @OchiengPaul442

Very confusing behaviour indeed. I can't seem to replicate locally but could be due to some caching issues. I've given one final pass at the code - I've updated it so now the local should only ever populate the server url when running the nx run picsa-apps-extension-app-native:serve command (not on general build), and instead of using a default value will throw an error if the user has not specified their own server url (easier to always use explicit url instead of handling multiple cases)

Example console error when apps/picsa-apps/extension-app-native/.env.local does not specify server url

Example console log then server url specified

I've also updated the document to be more straightforward (remove the section on wireless debugging, assume all cases should just use explicit server URL).

I hope that should all be working as expected now - if you have a chance to give one last check that would be appreciated

Updated documentation

https://docs.picsa.app/advanced/testing#running-on-a-device

[OchiengPaul442]

Thanks @OchiengPaul442

Very confusing behaviour indeed. I can't seem to replicate locally but could be due to some caching issues. I've given one final pass at the code - I've updated it so now the local should only ever populate the server url when running the nx run picsa-apps-extension-app-native:serve command (not on general build), and instead of using a default value will throw an error if the user has not specified their own server url (easier to always use explicit url instead of handling multiple cases)

Example console error when apps/picsa-apps/extension-app-native/.env.local does not specify server url

Example console log then server url specified

I've also updated the document to be more straightforward (remove the section on wireless debugging, assume all cases should just use explicit server URL).

I hope that should all be working as expected now - if you have a chance to give one last check that would be appreciated

Updated documentation

https://docs.picsa.app/advanced/testing#running-on-a-device

Sure, I’ll proceed with the testing once more.

[OchiengPaul442]

Hey @chrismclarke,

• Successfully integrated the latest changes which have been tested and now the applications runs well on physical device and the Emulator. (Live reload works fine as well on my end.)
• Additionally, wireless debugging is functional post app build from Android Studio.
• Confirmed the successful reading of the local IP from the capacitor.config.json file.

[chrismclarke]

Thanks @OchiengPaul442 ! Glad we could get everything working in the end, should hopefully make things a lot easier for other developers in the future