Running npm start or expo start launches the project as follows:
React You can now view My React Native App in the browser.
Local: http://localhost:19006/ On Your Network: http://157.201.29.49:19006/
Note that the development build is not optimized.
› To create a production build, run expo build:web › Press Ctrl+C to exit.
Expo Press ? to show a list of all available commands.
Launching the Expo web by pressing ‘w’ opens Chrome browser with the IP address URI http://157.201.29.49:19006/ as advised.
However because of the office VPN, Chrome browser fails to resolve the address. The error is:
This site can’t be reached
ERR_CONNECTION_TIMED_OUT
Replacing the URL in Chrome with http://localhost:19006 succeeds.
How can I start Expo such that pressing ‘w’ automatically launches with localhost rather than the IP address?
To fix, launch expo directly as follows supplying the localhost option:
expo start —-localhost
See Expo CLI docs for expo start:
--localhost Same as --host localhost
expo start --web
or
npm run web
It is no longer supported.
Update July 25, 2022: expo-cli#6.0.0 has been released with the web UI
removed. The last release to include the web UI is expo-cli#5.5.1.
learn more
Related
App is working fine. Also working fine on Emulator and my mobile phone. But the problem is that it is not showing this page on my browser. Open Image
I created this project in react native, Using following commands.
expo init DoneWithIt
choses a Manage workflow with blank template
When I type "npm start" in terminal (using VS code terminal)
it shows Open Image
It is not opening in browser like this
Open Image
Have you tried opening your browser manually at localhost and port 19000? Or simply press "w" in the same terminal after it starts so it opens for you the browser as you can see in the second image.
The Web UI is now deprecated in favor of a more advance terminal interface: https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206
To me the "w" option is grey out but I can still run it and it will let me know that some dependencies are missing. I try to install them but it doesn't succeed. I guess just made sure that the Web UI will not work anymore.
You will see the below error if the 'w' option is grayed out or if the 'w' doesn't work,
It looks like you're trying to use web support but don't have the required dependencies installed.
Please install react-native-web#~0.18.9, react-dom#18.1.0, #expo/webpack-config#^0.17.2 by running:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
If you're not using the web, please ensure you remove the "web" string from the platform's array in the project Expo config.
install the mentioned packages and re-start the app(npm start).
Enter w, this should work.
The reason why the application is not giving you the web browser ability is because you're missing some packages. Thus far this is the version that's support out there. Try and run this code below:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
When React native application is run from terminal using
npx react-native run-ios
Cannot debug webview from safari. Safari develop menu does not show the simulator in the devices .
I could not debug the application in safari when run using command
npx react-native run-ios.
But when I tried running the application using Xcode ,simulator was available in
safari develop menu. To debug your web url you need to go to
safari>develop>simulator name> web url
I'm currently running a detached expo project in development mode. Whenever I run expo start or npm start in the terminal I get the following logs:
$ expo start
Starting project at /Users/johncd/workspace
Expo DevTools is running at http://localhost:19002
Starting Metro Bundler on port 19001.
Tunnel ready.
Your native app is running at expb675c828acbb437095bc6218883f56bb://192.168.1.12:19000
Logs for your project will appear below. Press Ctrl+C to exit.
The expected results would include a QR code after these logs, but there is none.
When I visit the DevTools at localhost:90002 I see the metro bundler is running on LAN and a QR code is available. However, when I scan this QR code, it results in an error reading "No usable data found".
I've tried checking for a Firewall (System preferences > Privacy > Firewall) but it appears to be turned off.
I have also tried uninstalling and re-installing expo-cli as well as the project and running expo start again but to no avail.
I've tried using npm start and yarn start. I have also tried running the project on a tunnel.
I created a test project using expo init test-project and successfully ran it using expo start, so it seems this issue is only occurring on this project.
I also tried running expo start --clear to clear the cache.
None of these have worked.
Any help is appreciated!
Versions:
"expo": "^33.0.0",
"expo-constants": "^5.0.1",
"expokit": "^33.0.4",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-unimodules": "^0.4.2",]
Running on OSX
You need to install expo client app first from the appstore, then the qr will be readable.
You need to install Expo Go application from app store.
I didn't see anywhere a mention of what platform you're trying to use (iOS or Android) but at least with iOS I can tell you that QR codes in Expo don't really work correctly anymore. I believe Apple prevented the Expo team from being allowed to serve the bundle through the Expo app anymore. What this means for you is that the workflow you should expect is to connect your phone to the device physically using a cable and serve the bundle through USB. You can also use an emulator and move to the device when it's convenient.
I've looked at so many tutorials, and they seem so simple, but I just can't get debugging to work (running Expo, not ready to eject, that's a whole other level of craziness).
I've tried creating an app with create-react-native-app and also with expo-init which appear to be the same thing. I start running the app with yarn start and I can see the app in Expo. I select "Attach to Packager" in VSCode, and it fails every time.
I've added "react-native.packager.port": 19005 to my settings.json but I can't seem to find the right port. My Metro screen has so many different ports in so many different places:
The terminal where I ran yarn start says
Expo DevTools is running at http://localhost:19003
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19005.
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Tunnel ready.
exp://192.168.1.5:19004
The chrome window is at localhost:19003
The first line of the Metro Bundler terminal says Starting Metro Bundler on port 19005.
Later in the terminal it says Opening exp://127.0.0.1:19004 in iOS simulator
In the sidebar it says exp://192.168.1.5:19004, which is reflected in the Dev settings screen in the iOS simulator.
I've tried changing the port in "react-native.packager.port": 19005 to every number between 19000 and 19005 and they all fail. They all say:
Could not debug. Cannot attach to packager.
Are you sure there is a packager and it is running in the port 19003?
If your packager is configured to run in another port make sure to add that to the settings.json. (error code 504)
with, of course, the currently set port.
HELP ME!!!
react-native.packager.port should be changed to the port the Browser's developer tool's is running on. Stopping and Restarting the npm server once again worked for me.
I cloned the repository: https://github.com/facebook/react-native and try to run the UIExplorer example on Android emulator.
./gradlew :Examples:UIExplorer:android:app:installDebug
./packager/packager.sh
I got this error message on the Android emulator:
Unable to download JS Bundle, Did you forget to start the development server or connect your device?
I understand this is somewhat similar to this one:
react native android failed to load JS bundle
But here I had to use the command "./packager/packager.sh" to run the example. So the answer above does not apply to this case.
In order for the app to be able to download the JS Bundle, the packager has to create and serve the JS bundle, and the emulator has to be able to connect to it.
To verify that the bundle is created and served correctly, try browsing to this page in your web browser. This should connect to the packager and get the bundle as the answer. If the packager received the request, the following request message should appear in the packager console:
<START> request:/Examples/UIExplorer/UIExplorerApp.android.bundle?platform=android
If the packager created the correct bundle, it would return get a huge file that starts with something like "__DEV__ = true;. If these two steps did not work, then there's an issue with the packager and you can report the issue on github.
To verify that the emulator can connect to your packager, when you tap Reload JS you should see the same request message in the packager console as above. If no such message appears, then the emulator can't connect to your machine.
It looks like your packager is not accessible from application. You should start React Native Packager at first. It could be done various ways - it depends on your OS and project, examples:
./packager/packager.sh
packager\packager.bat
npm start
react-native start
node "local-cli\cli.js" start
node node_modules/react-native/local-cli/cli.js start
Also check packager configuration in your project (hostname and port at least).