How to set Flipper in a WSL2/React Native project environment? - android

I tried to find a guide in Flipper docs when using WSL2 but they don't have it.
How can I make it work when I already have a adb server running, a React Native Metro server running and a local node express server running?
Just to be clear, the React Native setup with WSL 2 is working fine, I just want to add Flipper.
The problem is that Flipper seems to try starting another adb server to listen on ports 8096 and 8097.
I'm not sure why I did that but I tried to run adb reverse tcp:8096 tcp:8096 and adb reverse tcp:8097 tcp:8097, and Flipper initialized fine, since it ran adbkit when failed to run a adb server. It seems buggy but it is kind of working, and I don't know if I did the right thing..
Can anyone help me with this setup?

I known it is a bit but in case someone comes around the solutions is to assign the host 0.0.0.0 to metro bundler when you start it.
react-native start --host 0.0.0.0
you can find more on this discursion

Related

What is your dev flow for React Native Android?

For the last few weeks I've been developing an app for Android using React Native, and overall the experience is pretty good, however I feel like I might be missing something. Does anyone have any pointers?
My flow is
Start Android Studio
Wait for build/sync
Run app on physical device or AVD
See the expected red screen
Start the Metro server
Now the app is running
Run pidcat com.myapp to see device logs
Make JS changes via VSCode
Hit reload in Flipper (no hot-reloading?)
Re-navigate to the screen I'm working on
So far it's all good other than the lack of hot-reloading.
However whenever I made a change to some Java code, I need to hit Rebuild in Android Studio, and this takes quite some time usually.
Is this all normal? Perhaps I'm missing something.
Thanks in advance
You don't have to start Android studio.
If using Flipper, start Flipper first.
Start metro server in one terminal
run react-native run-android in another terminal.
To reload type r in the terminal with metro server.
Changes to JS side should automatically reflect in the device. ( https://reactnative.dev/docs/fast-refresh )
With react-native you shouldn't be making big changes to the native side of the codes. If reloading doesn't reflect the changes to the native side. Then close the metro server and build again.

How do I setup shadow-cljs for code reload with Cordova + Clojurescript?

I am currently working on a sample app on Cordova with Clojurescript. I am using shadow-cljs to build the project but somehow I could not find a way to make the code reload to work.
Instead, I have to use the browser build when developing since it allows for a shorter feedback loop with the code reload. And then after that, I deploy the app to a device/emulator using the cordova command line.
Is there a way in shadow-cljs to make the code reload to work while using the device/emulator directly when developing ?
I created a simple example using shadow-cljs with Cordova. I only tested the windows runtime but I'd assume that the others work as well.
It is all regular shadow-cljs the only special tweak in the config file is the :use-document-host false since by default it will try to use document.location and figure out where to connect from there. On Windows at least that is some ms-appx:// URL which cannot be used to connect the shadow-cljs websocket. So we disable the default which will make it use localhost instead. This works fine for Windows but other platforms might require tweaking the :devtools-url config option in case the generated "app" does not run on the same machine (eg. mobile device or emulator).

Accessing iis-express from another device

I've been struggling for a while trying to run something on iis-express (service for example) and trying to use it from another device, for example, trying to debug Andoroid\IOS\Win-Phone (or Xamarin) application with WebApi\WCF service.
I have encountered many problems while trying to do this, I've found lots of recommendations about what to do, but non of them worked for me and were to complicated if you don't have a static IP.
After a while, I've found this very simple node.js open source iis-express,
So I wanted save everybody lots of time
This app just opens a simple temp proxy to a specific port on iis-express, it works great and it is very simple.
Just install it with npm:
npm install -g iisexpress-proxy
And then run
iisexpress-proxy localPort to proxyPort
Just don't forget to install node.js and make sure ports are not blocked by firewall
Hope it helps

Weinre not working, trying to debug?

I think I may be missing something, but I have installed the .apk on my android tablet with the script
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
in the header.
I decided to try running it locally following http://forums.adobe.com/docs/DOC-2623. I went to "localhost:8080" and weinre is installed, but I still get the same thing "target not found".
I think I am missing a step, or I am not completely understanding how it connects to my app?
I have also tried building it via build.phonegap.com enabling debug mode, then installing the apk then clicking debug, gosh the steps are nice and easy but I can't get it to work.
I have to be missing something, so I hope someone can help me understand what I am missing.
Solved: Thanks to #Christian Kuetbach following his answer helped, let me add a few things just in case someone else has this issue.
I made sure the script weinre gives you to add is loaded last, I put it at the very bottom, because I figured it should load after everything. Just did this to make sure.
Make sure to connect to weinre properly, #Christian Kuetbach says it --boundHost -all- but I had to enter it like this weinre --boundHost -all- maybe adding the weinre is an obvious thing, but it could cause confusion, so make sure to do that I am running on win8 if that makes a difference.
How did you start the weinre server part at the android device?
I think you'll nee to use the IP of you server (You Dev-Computer) in the HTML.
In case of Windows 8: https://kb.wisc.edu/page.php?id=27309
In that example above the IP is 144.92.124.118
<script src="http://144.92.124.118:8080/target/target-script-min.js#anonymous"></script>
update
This will only work, if the device is online and in the same network as your PC and the firewall is configured to allow connections and weinre server is started with the parameter --boundHost -all-

Get page source of a web page running in the emulator while the script used is running in the local machine?

Here's what I need to do,
I need to get the page source of a web page running inside the emulator.
The script that is going to perform the task is running in the local machine.
The script is made using monkeryrunner.
any ideas? thanks!
There is a blog post I read about this just the other day:
http://dtmilano.blogspot.co.uk/2012/11/androidviewclient-getting-browsers-html.html
I believe it will only run in the emulator but you have that in your tags so it is likely this will do exactly what you want!

Categories

Resources