I'm using React Native v0.35 after upgrading from v0.26. I can no longer use the dev server on my device like I used to. When it builds to my phone, connected on the same wireless ip as my macbook, it builds from a pre bundle instead of the server. I used to be able to just set the ip in the app delegate, but that's no longer an option. I just want to be able to develop on an actual device.
You can try few things -
Make sure you have set debug server host and port on device.
https://facebook.github.io/react-native/docs/running-on-device-android.html
https://facebook.github.io/react-native/docs/running-on-device-ios.html
Restart server
npm start
or
npm start -- --reset-cache
Re-install app (delete and install)
For anyone who is seeking a solution to this problem:
The issue was that if you are developing on ios using a macbook, the code that governs the auto ip detection fails to pick up your machine's ip, so it defaults to the pre bundled package. In order to resolve this (for versions >= 0.29 && < 0.36-rc.1 - which already includes this patch), open up your node modules directory, find the react-native directory, then open that and find the packager directory. In packager, there is a file named 'react-native-xcode.sh', open that up. Then, find the code snippet and add the three lines of new code from here. After that, rebuild your app and restart your packager. The dev server should now load.
Related
I am working on a React app and trying to find a way to have it served from a local network server while I work on it, instead of localhost:3000.
The app files would be in a shared directory on the server so I could work on them from my machine. But when I npm start, the app would be accessible from the LAN and from the outside via the server.
The goal is to avoid having to build/deploy every time someone else needs to have a look at the app (which is often).
Is that even possible ?
I suggest using https://ngrok.com/. After you install it, npm start your react app and in another terminal type ngrok http 3000, it will then provide you with external public facing urls anyone can access.
If you're using VS Code you can use the Remote Development Extension Pack to SSH into the local network server and mount the workspace accordingly. You just need to setup the remote host (or subsequent ssh-exposed container) as an SSH server.
I'd like to run in my local network ubuntu server. I have installed ubuntu on my old computer which is connected to router via ethernet cable.
The goal is to share gitlab repository where my code (java-spring, react) should be build automatically after making changes in git repo (maybe by Jenkins?) and deployed on this server. These apps I'd like to test on other computer/share this apps with my homemates.
Not much to go on in your question but here's a starting point:
Router
In your router, set up a static IP address for your ubuntu box. If you wanted it to be accessible outside your LAN, this is where you'd configure port forwarding.
Server
You don't actually need gitlab for this, you could do it all by installing git directly on to your server. You can never have enough practice with git.
You'll need a web server on your Ubuntu box, probably Apache or Nginx (or similar).
Here's good instructions for Nginx (my personal preference):
https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04
You'll use that to serve the directory where Jenkins or (or whatever tool) puts your built code after the git hook triggers the build.
what is the best way to deploy a react web app (ex. employee database) on the local area network only? i'm using create-react-app and i'm almost done with the code but after that, i don't know what to do. it was easier to do this in php/mysql with the help of xammp. but i would like to do this using react this time. thank you
The react is already working in your local lan IP
for example your local lan ip is 192.168.1.20 you and your react running port is
localhost:3000
other PC's mobile devices laptop could already access the server in your PC via
http:/192.168.1.20:3000
just make sure you enable it to be allowed in your firewall usually the antivirus does not permit is so try to set enable in the firewall settings in your antivirus and windows firewall
If your app is totally static you can serve it with a web server after building. When you are done with your app first build it with:
yarn build
After this you will have all your static files in your build directory inside your project. build/static/js and build/static/css contains bundled js and css files. Those files are being attached to your index.html file. So, when you serve this directory with a web server like a regular html site, you can use your app.
By default
type npm run build
after a build is successful then,
type serve -s build
it will give you URL
use that with IP to other devices connected in the same network.
I'm currently trying to learn react native. I created a project using create-react-native-app. After the project is created, I started npm start on the folder which shows the QR code. I've installed the expo app on my android phone and scanned the code but I'm getting a Uncaught Error: Timed out, no manifest in cache on my expo app and there is no stack trace given.
I've made it work a while ago but somehow its currently not working.
Im using windows 10.
npm 5.6
yarn 1.5.1
What I've done to fix it using Ubuntu was (I created my app using create-react-native-app):
open terminal
execute ifconfig
find network interface (wlp4s0, in my case)
execute export REACT_NATIVE_PACKAGER_HOSTNAME="IP_FOUND_BEFORE"
yarn start
SUCCESS! Finished building JavaScript bundle in 10069ms
Expo only supports the most recent 6 versions, this is because we have to have all the native code for each version on the client and that gets big fast 🙃💣. As of writing this v26 is almost out, that version of the expo client will not support v19 projects. Please make sure that your app is up-to-date by going to the app.json (or exp.json depending on how old your project is 😅) and checking the version number.
Outside of that, I would also recommend you start your project by calling exp start in the root folder of your project 💙
The problem that causes this is having multiple network connections. In my case, I have a virtual network connection which is used by the packager instead of the wifi connection. So basically what's happening is that my phone and my computer uses different connections. I've found a solution here: https://github.com/react-community/create-react-native-app/issues/598
I am deploying a website that will have a few react projects that were built with create-react-app. Each project will be on its own webpage: e.g.: mywebsite.com/project1, mywebsite.com/project. I am setting up an nginx reverse proxy on an Ubuntu server (which I understand how to configure), but I am not sure how to specify port numbers for each of my create-react-app projects so that each of them has a unique port. Can anyone shed light on how to do this? Thanks!
PS - I have seen threads such as this one - How to specify a port to run a create-react-app based project?, but I do not see how this solution can be applied in production.
The server you start with npm start command in create-react-app is webpack dev server. It only meant to use while development and you shouldn't use that in a production environment.
Instead, you can easily host a CRA app with a simple static file server which can easily configure with nginx without a reverse proxy or changing the port of dev server. You simply need run npm run build command and deploy content of build folder to the appropriate folder of your static file server. You can read more about this in the documentation of CRA.
Also, make sure that you specify the homepage in your package.json before building the project, since you are going to host your app in a relative path like mywebsite.com/project1. Because CRA assumes your app is hosted at the server root with default settings.
Hope this helps!