I'm trying to setup my environment to develop with react-native and react-devtools.
Per default the react-devtool uses port 8097 to connect with the app on the emulator.
Unfortunatley, this port is blocked at my workplace. Where/How can i change this port?
I found out that there's an option to configure the devtools with:
const { connectToDevTools } = require("react-devtools-core");
connectToDevTools( { port: "customport" } );
I just don't know where to place this config.
I managed to change the app so that it tries to connect to a different port, but i can't seem to change wart port the devtool client (?) uses (see image)
Any help is appreciated
Related
I am using a puppeteer plugin that opens a webserver when I need to manually solve a captcha. The below code works in development, but I can't figure out an approach to get it to work in production.
I am deploying this app on render.com, and as far as I know, I can only listen to one port.
const app = express();
app.listen(process.env.PORT || "3000");
// I eventually get a link like this
// http://localhost:3001/?targetId=68C3007E851659A5D54CD6E023022C91
puppeteer.use(
PortalPlugin({
// This is a typical configuration when hosting behind a secured reverse proxy
webPortalConfig: {
listenOpts: {
port: 3001,
},
baseUrl: "http://localhost:3001",
},
})
);
I've tried making the port the same on both servers but as expected I kept getting the "port already in use" error. I've also tried pointing the base url to my render.com URL, but it times out when I navigate to the url supplied by the plugin.
I'm following the introduction from the official website here: https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/
I have repeated the steps for few times, I still can't start the storybook. Anyone success?
Any hint for what I missed?
As Tyler requested, I share the storybook index file as below (I didn't change anything, it is completed autogenerated new app):
import { AppRegistry } from "react-native";
import {
getStorybookUI,
configure,
addDecorator,
} from "#storybook/react-native";
import { withKnobs } from "#storybook/addon-knobs";
import "./rn-addons";
// enables knobs for all stories
addDecorator(withKnobs);
// import stories
configure(() => {
require("./stories");
}, module);
// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
AppRegistry.registerComponent("%APP_NAME%", () => StorybookUIRoot);
export default StorybookUIRoot;
Add screenshot of App.tsx.
I tried to answer this once already but my answer was deleted for some reason. I know this issue very well since I'm the maintainer of the package so I don't see why this answer would not be valid.
This is a common issue. You can see some further details this pinned issue from the repo.
The problem here is the connection between the mobile storybook UI and the web storybook UI via websockets. In order to solve it you need to make sure that the right IP address is being used.
First you should make sure the ondeviceUI is loaded on your mobile device since the web UI gets the stories from the device.
If you are still having issues you can manually specify the port and ip address
First set the ip and port on the getStorybookUI call.
const StorybookUIRoot = getStorybookUI({
host: "192.111.1.11", // replace this ip address with your local ip address
port: "7007"
});
Then adjust the script used to launch the react-native-server to have the port and ip option. Make sure that you use exactly the same port and host that you used in the previous step otherwise it won't work.
It should look something like this but with your own IP address instead.
"storybook": "start-storybook -p 7007 -h 192.111.1.11"
Thanks #TylerWilliams' hint.
It might due to an unknown bug on storybook, there isn't a complete solution yet, but build an android app could resolve the unlimited loading issue.
If it still doesn't work after Danny's change, try removing your yarn.lock and running yarn again.
so my problem is basically the same as here, but the question isn't answered yet.
The problem ist, that I can't view my vue application in the webbrowser when visiting <pc_ip>:8080. However when starting my vue.js app with npm run serve it tells me, that this is how I could access the page besides doing localhost:8080. It works from my PC but with my phone which is connected to the same wifi I get the error that the url is not reachable.
Thanks in advance!
UPDATE:
So after finding some other posts I also tried writing some stuff to a vue.config.js like here, here, here or here e.g.
module.exports = {
devServer: {
port: 8080,
host: '0.0.0.0'
}
}
However the problem still persists. I also tried replacing the host in that file with my actual ip, but it does not work either.
UPDATE 2:
As mentioned in a comment, I had a similar problem some time ago, when trying to access my flask server from my phone which was in the same network. Back then I set the host variable to the pc's IP and it worked. As I tested again just now, I realized that the corporation proxy I have to use in parallel could play a role in this. When I wasn't connected via using plink.exe, I could not access my running flask server from my phone. When I connected after that, everything is working.
Could the proxy or a missing configuration be hindering me to access my vue application?
UPDATE 3: so i turned of my firewall completely and then i could access the page from another device. I wondered if some other rule was blocking the port like in this post Windows Firewall - Laravel Artisan Serve - Allow Port in Inbound Rule (not working). But I am not sure how I would find that rule if there is one blocking my port?
Please follow this link:
Work around this problem
I add the following code to my vue.config.js
module.exports = {
devServer: {
port: 80,
host: '0.0.0.0'
}
}
change the port number according to your need.
Normally when you execute the npm run serve command, it gives you two addresses to access your application. A local address and a network address. Like this :
App running at:
- Local: http: // localhost: 8080 /
- Network: http://IP_ADDRESSE:8080/
So with your phone you should use the network address and not the local one.
We're trying to connect to an API (.net core 2.2) from react-native (version 0.59), via localhost, both apparently running on the same ip, different ports, react-native on port 8080, and the api on the 44344, the issue happens the moment we fetch the url from react-native
We’ve also tested running the url from Postman and everything seems ok, also from any of the web browser installed (safari/chrome), even we tested the browser INSIDE react-native iOS, and it works.
Any api running outside localhost works perfectly, is the localhost were we failed.
Network request failed.
onerror
whatwg-fetch.js:504:29
dispatchEvent
event-target.js:172:43
setReadyState
XMLHttpRequest.js:580:29
__didCompleteResponse
XMLHttpRequest.js:394:25
emit
EventEmitter.js:190:12
__callFunction
MessageQueue.js:366:47
<unknown>
MessageQueue.js:106:26
__guard
MessageQueue.js:314:10
callFunctionReturnFlushedQueue
MessageQueue.js:105:17
callFunctionReturnFlushedQueue
[native code]:0
Part of the code (function) that fetch the api, very simple (for now)
async Submit(){
//GET METHOD
try {
let response = await fetch('https://192.168.1.56:44344/api/values');
let responseJson = await response.json();
return Alert.alert(JSON.stringify(responseJson));
} catch (error) {
console.error(error);
}
}
Ok first of all, we've tried EVERY possible solution,to connect my react native app to my .net core api rest, both running in localhost, this is the list so far, of the things that we've tried so far, and still no result.
Localhost
127.0.0.1
Computer ip (network ip not mac address)
React Native blank project (from the ground up)
API .net core blank project (from the ground up)
Running snack expo + api .net core
ip forwarding (We can't do that do to our job policies/Not the solution we're looking for)
http/https
Different ports
Android and ios permissions from react-native
Same network different ip (this sorta worked, but we don't know exactly why it doesn't work running both react-native and the api in the same ip (localhost))
10.0.2.2 (for android)
Enable cors on api .net core (but apparently this doesn't work on native apps, only for web)
Expose the ip through ngrok/serveo (We can't do that do to our job policies/Not the solution we're looking for)
Frisbee
Axios
Websocket (We can't do that do to our job policies/Not the solution we're looking for)
XMLHttpRequest (status code error 0)
Firewall/proxy (our network is free from firewalls and proxies)
Web browser plugins (deactivated and/or uninstalled)
Cache/cookies
Docker (We can't do that do to our job policies/Not the solution we're looking for)
Reboot my macbook pro
we expect react native to fetch the api, so we can continue with the office 365 login authentication.
EDIT: I just discovered that fetching the machine ip (this time running windows), with my ip being 192.168.0.9 both on the api and the react native, the fetch result showed me the 10.0.2.2:80 in the header of the json response. I suppose it is the "localhost" ip from react native. How am I supposed to fetch an ip from localhost if react native is not letting me to do so?
EDIT: We had to go for plan B this time around, we've made it work with a docker on the api, but I need a solution for this problem. I'm 99% sure the issue is react-native and nothing else.
EDIT: After all these weeks one of my colleges managed to solve it. First of all, we couldn't make the firewall in my macbook pro work properly. Second, we solved that and found out our api was having issues. He found out the redirection was on https, and the certifications weren't working properly, so he changed this
"applicationUrl": "http://192.168.0.114:5001;https:192.168.0.114:5001"
to
"applicationUrl": "http://192.168.0.114:5001"
I got the same issue while fetching localhost API from react-native. Here is what I did to solve this issue.
In the startups class, I removed //app.UseHttpsRedirection(); from Configure method.(Not sure if it is needed)
After that in the launchsetting.js file under the properties folder, I changed from
"applicationUrl": "https://localhost:5001;http://localhost:5000"
to
"applicationUrl": "http://localhost:5000"
and in the React native part, I simply changed my localhost with my IP:
fetch('http://localhost:5000/values/') to fetch('http://127.0.0.1:5000/values/')
This completely worked for me
Take command prompt and type ipconfig, so we will be getting many addresses. From that take IPV4 and copy it to the clipboard. Then paste this address to both the back ends port address and front end port address.
eg say IPV4 address is 192.168.1.3 then make you your back end route API similar to this http://192.168.1.3:8080/patients, where 8080 is the port number (never mind). And use the same for the front end to grab the API result.
You have to do two things.
1 - Use http://192.168.1.x:8080 (your local ip ) rather than http:// localhost:8080 in your client.
2 - Add following code snippets to your .net core web api project in Startup.cs.
readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://192.168.1.x:8080")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
.
.
.
app.UseCors(MyAllowSpecificOrigins);
Something that worked for me was run adb reverse tcp:<YOUR PORT> tcp:<YOUR PORT> in terminal
I'm not sure of how it works exactely, but I guess it makes some sort of mapping from the virtual device port to your machine's.
Example:
adb reverse tcp:8080 tcp:8080
Using the local IP address worked for me, with no additional configuration.
Example:
fetch("http://192.168.0.103:4000/books", {
method: "GET"
})
Thanks for all the insight, but none of the above solutions worked for me.
What did work:
https://ngrok.com/ - Download ngrok, signup, and connect your account. ngrok creates a private https localhost tunnel.
Setup - https://dashboard.ngrok.com/get-started/setup
Unzip to install:
unzip /path/to/ngrok.zip
Connect your ngrok account (Non functioning example auth token):
ngrok config add-authtoken 2ySPR5UeS3Fjf5YAblNRe7ZcV1o_9sdf2SDFGHjEQaOCE6xEi
Use the command (with your desired port number):
ngrok http 8080
Once ngrok is online, replace your localhost address:
http://localhost:8080
http://127.0.0.1:8080
http://192.168.0.100:8080
with the forwarding web address (Non functioning example address):
https://ebda-61-137-45-130.ngrok.io
I've used ngrok countless times for testing on a variety of networks without issue. So far its the only foolproof method I've found for testing localhost APIs.
I am developing a backend with some routes that I want to use in an iOS App (developing the app with Expo and react-native).
So during the development mode (both for the backend and for the app), the backend is served on http://127.0.0.1:80/, and it is working perfectly when the app is on the iOS Emulator, but when I start the app on a real device, then I can't connect to the backend using the same url.
What url should I use ? Or which setting do I miss ?
Here is the code I have for starting the server...
const app = require('./app');
app.set('port', process.env.PORT || 80);
const server = app.listen(app.get('port'), () => {
console.log(`Express running → PORT ${server.address().port}`);
});
Localhost won't work if you have two different devices. Instead try to connect both to the same wifi network and use the ipv4 adress of you pc (find with ipconfig in cmd) instead of '127.0.0.1'. Provided that your firewall doesn't block the connection.
So thanks to #Mukeyii I found the answer (for a Mac and an iPhone at least) on this page
Here are the steps :
On your Node app, you need to give the port and the ip you'll be listening the app, for example :
const app = require('./app'); // app is made with express.js
app.set('port', 80);
const server = app.listen(app.get('port'), '0.0.0.0', () => {
console.log(`Express running → PORT ${server.address().port}`);
});
Strangely, I wanted to put the 127.0.0.1 ip but it didn't work. 0.0.0.0 worked for me so I put that one.
On the /private/etc/hosts file, add the line 0.0.0.0 any.url.you.wish, save and test on a browser on your computer that when you start your app (dev mode) and you type the url any.url.you.wish, you go on your app.
Download SquidMan and open it, let it install what it wants to install.
In SquidMan > Preferences, set the port in the General tab (for me: 80)
On the Client tab, set a new ip: the ip address of the iOS mobile device. To get it, you need to click on the i in front of your WiFi connected network.
On the Template tab, add a comment on the line http_access deny to_localhost and add these two lines :
# hosts file
hosts_file /private/etc/hosts
Save the Preferences and Start Squid
Get the IP Address of the Mac in System Preferences > Network
Configure the Proxy on the iPhone (port + ip) at the bottom of the same view described in 5.
That's it ! Read more infos in this url: http://egalo.com/2012/05/29/testing-mac-web-site-using-local-hostname-on-mobile-device/