HotReload LiveReload LiveXaml [Mac] [Windows] [nuget package] [opensource]

AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
edited November 2018 in Xamarin.Forms

Hi all
I want to introduce a nuget package which allows reloading XAML views from Visual Studio on your running app.
This package works for Mac too!

https://github.com/AndreiMisiukevich/HotReload

«13

Posts

  • VovaKamishnikovVovaKamishnikov USMember ✭✭✭

    Very interesting
    How is this better than LiveXAML from ionapps ‏and Live Reload from Xamarin ?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    edited November 2018
    > @VovaKamishnikov said:
    > Very interesting
    > How is this better than LiveXAML from ionapps ‏and Live Reload from Xamarin ?

    Hi, thanks for feedback.
    1) It works for Mac (I'm not sure, but it seems Xamarin Live Reload doesn't)
    2) It's free (LiveXaml is not. LiveXaml is paid)
    3) It's open source (Both LiveXaml and LiveReload are not)
    4) It works in any IDE (Sublime, VisualCode etc.)

    Obviously, it has got some weakness, but i haven't spent a lot of time for first release :)
  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    CSS isn't supported yet, but i am going to do it)

    -
    BTW, as for LiveReload.. it isn't supported and plugin was removed. So, now there are LiveXaml (paid), Gorilla Player (don't know :( ) and HotReload - open source and free :))

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Fixed startup crash on latest xCode

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Need more testers xD
    Are there any ideas how can we improve it?)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Hi all
    New release https://github.com/AndreiMisiukevich/HotReload/releases/tag/1.1.0

    BUGS:

    • FIXED OBSERVING OF SUBDIRECTORIES
      Enhancements:

    • ADDED X:NAME SUPPORT

    • ADDED POSSIBILITY TO WORK WITH XamlCompilationOptions.Compile
    • REMOVED NECESSITY TO USE #IF DEBUG IN EACH ELEMENT
    • MOVED HOTRELOAD TO Xamarin.Forms namespace for more comfortable use

    Available here: https://github.com/AndreiMisiukevich/HotReload

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Release 1.1.1
    ENHACEMENT:

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    This looks impressive but I'm afraid a major advantage of LiveXAML over HotReload is that you don't need to make any code changes to your app - just add the NuGet package.
  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    > @JamesLavery said:
    > This looks impressive but I'm afraid a major advantage of LiveXAML over HotReload is that you don't need to make any code changes to your app - just add the NuGet package.

    Yes, that is what I want to adjust ;)
  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    @AndreiMisiukevich_ said:
    > @JamesLavery said:
    > This looks impressive but I'm afraid a major advantage of LiveXAML over HotReload is that you don't need to make any code changes to your app - just add the NuGet package.

    Yes, that is what I want to adjust ;)

    Great - if you can do that, then it will be really good!

  • batmacibatmaci DEMember ✭✭✭✭✭

    @AndreiMisiukevich_ I just tried and have 2 issues.
    1) when i try to run observer.exe on windows 10, i get this message "observer.exe is not compatible with the version of Windows you're running. Check your computer's system information and then contact the software publisher."
    2) I tried to run project on debug mode on ios and i got error, i could resolve the error installing hotreload nuget on ios project also.

  • batmacibatmaci DEMember ✭✭✭✭✭

    1) i downloaded source code and complied project and used exe generated out of my build and it works fine. It looks like your build was x86 what you uploaded on github and it doesnt work on x64 pc

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @batmaci thank you very much for feedback!
    I will create an issue on my github and solve

    1) I need to find, how to build it for x64 architecture from my Mac.. (or update the Readme)
    2) I will update Readme

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @batmaci updated Readme for 1) and 2) cases :)
    Thanks again

  • batmacibatmaci DEMember ✭✭✭✭✭

    @AndreiMisiukevich_ belows are not clear for me,
    1) which ip should we use, when i start observer.exe by default i see this URL: http://169.254.53.15:8000, is it correct or how can i get correct url? you mentioned "Check application output "HOTRELOADER STARTED AT {IP}" and compare it with url in terminal/cmd" what do you mean by terminal/cmd? i am guessing that this is for MAC. do you know how can i get this in windows? I tried using Observer.exe u=http://127.0.0.1:8000 but still didnt work on Android

    2) Does it work on "save" document? so everytime i save, it pushes changes?
    3) Does it work for UWP, Android (emulator and device), Ios( emulator and device)?

    thanks

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @batmaci
    Android device, iOS device, iOS simulator should work
    Android emulator. Known issue: https://github.com/AndreiMisiukevich/HotReload/issues/1
    UWP.. didn't tried, but i guess it will work as well (it's crossplatform solution)

    So.
    1) "which ip should we use" - you must use ip of your device (if it's physical device) or ip of your local machine if it's simulator (As i mentioned above.. currently it doesn't work on android emulator. Can't solve it now.. httplistener doesn't work on android emulator)

    When you start application you can find your device IP in output, just start observer on the same url. (But as i see you tried to do it on android emulator... :( )
    Btw, make sure your PC/Mac and device/emulator are in the same local network

    2) Yes, it does
    3) Currently it doesn't work for Android emulator.. but i want to redesign my solution for it: host server on PC/Mac and collect changes every 1 sec for example (instead of doing in on "save")

  • batmacibatmaci DEMember ✭✭✭✭✭

    @AndreiMisiukevich_ i have seen the ip address in the console and i started with this ip address but i cant make it working on android device. i have attached source code on my project and added reference on Net Standard project. can you give me some hint how to debug the connection? in which functions do I expect a call after "save"?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    > @batmaci said:
    > @AndreiMisiukevich_ i have seen the ip address in the console and i started with this ip address but i cant make it working on android device. i have attached source code on my project and added reference on Net Standard project. can you give me some hint how to debug the connection? in which functions do I expect a call after "save"?

    Does it work on iOS ?
    Seems, I need to check it.

    You may try on sample project..
  • batmacibatmaci DEMember ✭✭✭✭✭
    edited January 2

    Nope, it doesnt work for me on Ios Emulator. I gave exatly same address and used your sample project but cannot make it working. i am on Windows

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @batmaci :( oh no.. could you please create an issue on my github with all possible info? I appreciate your help
    Maybe, somebody will be interested in contribution.

    There are several reasons why it can not be working

    1) Issues with file observer (it doesn't work) in that case you won't see any logs in command line during its work (if you change any file)
    2) Issues with sending xaml (maybe your PC and emulator are in different networks? Do they have similar ip ? 192.168.0.13 and 192.168.0.27 for example ?)
    3) Some issues with reloader (http listener) try to run the app and in your browser call http://{ip}:{port} and try to catch it with breakpoint there https://github.com/AndreiMisiukevich/HotReload/blob/master/Reloader/Xamarin.Forms.HotReload.Reloader/HotReloader.cs#L150

  • batmacibatmaci DEMember ✭✭✭✭✭
    edited January 2

    @AndreiMisiukevich_ strange behavior. i debugged and found out that observer doesnt detect xaml changes if i change over VS 2017 but if i do any change using notepad, observer caches change and sends to the url.
    Problem number 2; HandleRequestAsync receives that request and when I debug line by line all works without exception but debugging even shows that content xaml is replaced and reloaded but Ios emulator is not showing changes.

    EDIT: good news, i fixed both problems and i will make you PR requests later :D i guess nobody ever tested on windows below.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @batmaci haha) i wait your PR

    Yes, that's right :) I have no Win PC :( both work and home laptops run on OS X

    As for problem 1) I faced with this on mac too, but fixed by adding handler of FileCreated (because VS create temp file then changes all file, but notepad/sublime etc. doesn't.. so two different events FileCreated and FileChanged )

    Thank you very much ! :)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @batmaci don't forget about your promise to create PR ;0

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Code updated.
    Hot reload can be started on Windows as well.

    Follow "setup" steps :)

  • VovaKamishnikovVovaKamishnikov USMember ✭✭✭

    LiveXAML costs 240$ without regular discounts
    Minimal developer rate is 10$
    Therefore LiveXAML costs maximum 24 hours of work

    I wonder is it worth to create another solution and spend a lot of time ?

  • batmacibatmaci DEMember ✭✭✭✭✭

    @AndreiMisiukevich_ are you able to reload contenviews also? I couldnt make it working for me. when i check the source code, i cant figure out how do you reload contentview as it is a part of contentpage?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    > @batmaci said:
    > @AndreiMisiukevich_ are you able to reload contenviews also? I couldnt make it working for me. when i check the source code, i cant figure out how do you reload contentview as it is a part of contentpage?

    Hi. Yes, I am.
    I reload the element and parent page
    Works on Mac
  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Hi guys!
    We found a workaround for starting hotreload on android emulator
    https://github.com/AndreiMisiukevich/HotReload/issues/1

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    https://github.com/AndreiMisiukevich/HotReload
    Should work fine on Windows and Mac (devices and simulators/emulators) !

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Added extension for VS for Windows
    https://github.com/AndreiMisiukevich/HotReload#widnows

  • NickANickA USMember ✭✭
    edited February 17

    @AndreiMisiukevich_

    *Edit...

    Disregard my post before this edit. This is awesome, thanks for making it! The Forms Previewer is literally useless, I'm not sure if it actually works for anyone and should be removed.

    This is great and will same me so much time. Thanks again.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
  • NMackayNMackay GBInsider, University mod

    @NickA said:
    @AndreiMisiukevich_

    *Edit...

    Disregard my post before this edit. This is awesome, thanks for making it! The Forms Previewer is literally useless, I'm not sure if it actually works for anyone and should be removed.

    This is great and will same me so much time. Thanks again.

    "The Forms Previewer is literally useless"

    As the whole community said.....and got ignored.

    It sort of works in 2019 for basic templates but for serious apps, it won't. These tools save time, game changer is when it's baked into Visual Studio, otherwise it's a pain to strip out in CI automation.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    At weekend we'll add info about how to use VS extension :)
    And probably will be available extension for VS for Mac too
    For now Mac users may use observer.exe

  • vladhorbyvladhorby MXMember ✭✭

    Hey Andrei,

    First of all, thank you for HotReload, it's a great and helpful project!

    I've tried using it on Windows with Visual Studio, but I ran into several problems, especially because UWP apps are not allowed to communicate with each other on localhost.
    I started to think about an workaround and I ended up making my own Reloader, using SignalR. I did it the other way around though, having the Monitor act as a server and the Xamarin Forms apps as clients (more like the way Xamarin LiveReload was doing it).
    That also brings in several other benefits:

    • you can have the Monitor running in the background and the apps automatically connect when they start
    • you can have several apps running and getting the updates simultaneously, allowing you to see the impact of your XAML changes on Android, iOS and UWP at the same time, for example.

    The xaml updating side is pretty basic, but it works well for my projects (Xamarin.Forms with ReactiveUI) without the need to change any code in the views' code-behind.

    Apparently I cannot post links here yet, but you can check out the repository on github /vladhorby/Codexcite.Reloader

    Let me know what you think.

    Vlad

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @vladhorby Hi

    • Only handles updates for the current page, ignores updates for other pages.

    I am keen to allow updates all pages :)

  • vladhorbyvladhorby MXMember ✭✭

    @AndreiMisiukevich_ Hi there, thanks for the reply!
    I normally use live reload for quick design updates while working on a single page so I didn't need it, but you're right, it's a normal requirement.
    I added the functionality and updated the repository - it just implied maintaining a cached version of the updated pages and applying it on page Appearing.

    Vlad

  • batmacibatmaci DEMember ✭✭✭✭✭

    @vladhorby i have also implemented exactly your way. it has also another benefit. you dont have to make code changes for each pages like @AndreiMisiukevich_ 's solution does. but i didn't use any signalR or reactiveUI. why did you need those? TcpClient with basic listener does pretty much what is required. All those has 1 big disadvantage, they are just applying changes in memory but as I understand correctly livexaml changes actual uploaded file in the device. thats why you can change any page regardless of it is the active one or not and changes are applied.

Sign In or Register to comment.