I am creating a React Native mobile app with storybook.js. But when I run the command yarn run storybook, the storybook server starts running on the port: 7007
Preview and components in the sidebar are not visible
but it does not show the components. But it does show the preview in android emulator.
components are visible in sidebar and visible in preview
I need to see the preview on browser, but it does not at lease show the components at least.
Can somebody please help me to solve the problem?
I had this same issue and solved it by making sure storybook and the emulator were running on the same port.
I set the port/host when configuring StorybookUIRoot then added the host to storybook command in the package.json "storybook": "start-storybook -p 7007 -h 192.168.1.8"
Restart storybook and the mobile app, you should be good to go
looks like your are experiencing a common issue. See this pinned issue from the repo.
Also to be clear the server and this web ui is not required to use react native storybook and you can use it entirely from the ondeviceUI.
There are a few things you need to do to make sure that the stories load on the server.
First you should make sure the ondevice storybook is running before you start the server.
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 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"
If none of this helps feel free to ask questions on the storybook discord in the react-native channel and I'll be there to help you.
If you are following the storybook tutorial, try removing your yarn.lock, yarn again, and then follow Danny's answer.
Related
I have made a REST API for my react native application and want to fetch data from it, though this is not possible for me.
I have tried using localhost and ipv4 as the url, but it doesn't help at all. I also get an "Network Error" at times when I change to the different URLs, which I don't fully understand why they show up, since ipv4 or localhost should work.
I usually get a warning about the metro server after a while, if that has anything to do with it.
How can I connect my React Native client to my express backend?
try to run this command, it will link the port in you device which you run your React Native app with the port of your laptop,
"adb reverse tcp:3000 tcp:3000"
then run "react-native run-android"
i work with the port 3000, you can work with the port you want
I found the issue! I forgot a / in my base url, which broke the whole thing with axios. And I had one too many in my login post request!
Recently I started developing in react-native. When trying to debug using the react-devtools extension on the browser (Chrome) I only get access to the console, because all the components and elements are the ones displayed in the devtools web-page (http://localhost:8081/debugger-ui/)
So now I am trying using the react-native standalone version but it is "waiting for React to connect.."
and I get a message at the bottom saying "The server is listening on the port 8097".
I don't know much about ports but it looks to me that the application is on one port (8081) whereas the react-devtools is listening to another (8097).
I tried using adb reverse tcp:8097 tcp:8097 before running the react-devtools but it made no difference.
How do I check what port my app is listening to?
How can I make the standalone devtools run?
And if anyone can link me to a good documentation about ports for people with no background it would be very nice as well.
you are on the right track, after assigning port 8097.
Run Command+d to open the development menu and it is automatically detected by react-devtools.
I am using expo-cli#3.0.10
This app works fine in client expo which installed in device
Ok I believe I found the core problem - DNS issue.
Your Android simulator cannot properly resolve the hostname using your current DNS for whichever OS you are on be it Mac OS, Windows or Linux.
Follow this link to set your DNS address to 8.8.8.8 or some other applicable DNS.
Once you set your DNS properly it should work.
Make sure that 8.8.8.8 is the first DNS address in the list(?) of DNS addresses so that your system will resolve hostnames using the Google DNS first.
Reposting the useful information from that link below,
Change the DNS address of your network to 8.8.8.8:
MacOSX:
Open "System Preferences"
Click on "Network"
Select the network which your computer is connected and click on "Advanced"
Select "DNS", Select the "+" button, type "8.8.8.8"
Select "Ok" and "Apply"
Windows & Linux:
https://developers.google.com/speed/public-dns/docs/using
After that close the emulator and start it again.
This case happened to me whenever I switch from a network to another without restarting my emulator.
The simplest way to solve this was to restart my emulator.
I hope it helps,
For my case, this error occurred because I changed from LAN to Wireless Internet connection while the project is building.
Solution: Close the Emulator and restart Android Studio. Run the project (either npm start or expo start) and this worked for me.
You need to start expo server first. Use expo start. Then run your project.
After starting your expo server re-start your project.
I created my project in react native by CLI:
_npm install -g create-react-native-app
_create-react-native-app AwesomeProject
_cd AwesomeProject
_npm start
Then I installed expo in my Android phone, and scanned a QR code on my computer screen.
However, my phone can't connect to project, and I don't know why. It just loads and fails. This is error message:
Could not load exp:// 192.168.56.1:19000. Network response timed out.
This is view error:
"Uncaught Error: java,not.SocketTimeoutException: faild to connect to/192.168.56.1 (port 19000) after 10000 ms.
I'm trying to fix it, but still can't get it working. My phone and my laptop are on the same network. What can I do now?
I had the same problem but solved by running expo start --tunnel
Select LOCAL instead of LAN.
I kicked myself when I fixed this.
I had the same issue, turns out my firewall was blocking my connection to the development server port (for me it was 19000). Solved it by disabling firewall.
Choose Tunnel Instead of LAN or Local in connection tab. This solved the issue for me.
Keep a look on this issue for the answer:
https://github.com/react-community/create-react-native-app/issues/60
Make sure that your device and computer are one same LAN/Wifi. It will work.
Also use LAN option.
check open port using
ufw status verbose
And if you don't see the port You are working on
for example 19000 => expo
try this
ufw allow 19000
I've had a similar problem on iOS - the project showed up in the Expo app but didn't want to connect.
Here's what I did:
Connect your PC to your device through USB cable
Download the newest xde from: https://github.com/expo/xde/releases
Install XDE, create a new project from the gui (do NOT use your old project from create-react-app, as it may also show up in XDE) and click the newly created (in XDE) project under "My Projects".
Now your project should show up in the Expo app on your phone. If it doesn't try sending yourself the link to your app over email (to your own inbox, and open the link on your phone), mine looks like this: exp://5c-gp9.[accountname].my-new-project.exp.direct:80
I had this problem when my phone was connected via wifi and my destop was connected via LAN. I changed the connection mode in the browser window to tunnel, reloaded the expo app and was able to connect to my application. This was on my iOS device.
I got this issue on Win 10 with android and solved by the adding a firewall rule for my device (device IP as remote). I was using ESET NOD antivirus and it was block the device from accessing node.exe
for local testing e.g comnputer , simulator
expo start
for Real mobile device
expo start --tunnel
I'm on windows 10.
My network was set to public, but it needed to be private - so that it could safely expose devices like printers and in this case the Expo connection.
I went in my Wifi setting and clicked on Private:
If you are using windows 10 do the following. It worked for me
1. Check if your phone and pc are sharing the same router/hotspot/wifi connection. better still you can connect your pc to your phone hotspot.
2. Configure the network you are using as private. you can do so using this link https://www.digitalcitizen.life/how-set-your-networks-location-private-or-public-windows-10/
3. Off your windows defender and any other antivirus. The windows and other antivirus defender acts as a firewall and prevents expo client from working.
It will work I assure you
I was having the same issue, the solution is easy just make a Firewall rule that allows connection from your mobile device to your PC. open port number 19000 and in the IP put your phone IP address then allow the connection TCP/UDP in both directions, and everything will be OK.
Usually, you can edit the Firewall rules through your antivirus installed on your PC.
Careful don't disable your firewall, it will hurt you a lot.
This problem is due to the sdk version of the project is not compatible with the expo go ,so go to app.json of your project and edit to the latest version of sdk
I've done a lot of research and haven't found a definitive answer to this. Is there anyway to test the open graph on localhost? I don't haven any issues using the graph api on locahost.
I've changed my website url in the app settings and have even tried setting up a domain in my hosts file but the debugger linter for open graph tries to use the actual domain instead of my localhost and when using locahost directly the linter completely fails connecting.
Does anybody have any workarounds for this?
Using a local proxy is the right solution. ngrok didn't work for me neither.
A similar tool that did work with facebook debugger is localtunnel ✅
npm install -g localtunnel
lt --port 8000
# or using npx without installing localtunnel
npx lt --port 8000
Generates a url that looks something like https://<random_hash>.localtunnel.me/. Using this url in facebook open graph debugger worked for me as of October 18th 2017. I only had to hit Fetch new scrape information button. 🍻
Cool thing about localtunnel is that you can easily host your own localtunnel server with github.com/localtunnel/server so if it ever stops working with localtunnel.me, you can run your own somewhere in the cloud ⛅
You can use ngrok to create a random public subdomain that routes to your local webserver very easily, even through NAT or firewalls.
Just download ngrok and run ./ngrok http 8080 (assuming 8080 is your local webserver http port).
This will create a random subdomain like http://38a84a97.ngrok.io/ that routes to your local webserver and that you can use with Facebook to test your open graph tags.
Its very simple to test Open Graph in any local environment using Chrome or Firefox using plugins. I have used one to quickly show in chrome how the Open Graph looks to the viewer to test results. Here is a quote of what it does.
This extension shows how people will see your site in the most popular
social networks This extension is for professionals who creates a
media content.
To check meta-information of your site or article just open it in a
Chrome and click extension's icon. Also you could add an URL manually.
Here is a direct link to the plugin (Chrome)
Firefox add-on
As a bit simpler approach you can use a browser extension like https://socialsharepreview.com/browser-extensions - which will show your Social Cards directly in the Browser (which of course might fail, if you wrongly didn't set them serverside :))
To test open graph (and Twitter cards) I also had to expose localhost (Docker) to Facebook and Twitter. I used Serveo
It works very well for this, no need to install anything as it works with ssh port forwarding.
$ ssh -R 80:localhost:3000 serveo.net
Then navigate to the url given, and there you go.
You have to setup a public domain which points to your public ip address.
Use dynes.org or a similar service and setup your router to forward your port 80.
There are several tools you can use for serving something up over your localhost, each with varying degrees of functionality.
I prefer (obviously) http://forwardhq.com
Other great options here: http://devblog.avdi.org/2012/04/27/http-forwarding-services-for-local-facebook-development/
If anyone is looking to preview the :og tags on while developing on subdomains (using lvh.me) in localhost. You can use https://serveo.net.
Simply use following command to forward your local server requests. No installation required.
ssh -R yoursubdomain.serveo.net:80:yoursubdomain.lvh.me:3000 serveo.net
you can put your desired port in place of 3000.
Reference: https://blog.aarvy.me/2019/09/20/expose-local-apps-having-subdomains-to-web/