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.
Related
My team is working on an NodeJS app with a ReactJS frontend that needs to be deployed on our Ubuntu server. It runs fine locally and it used to run fine on the server until we added a Router/Switch structure into the App.js. Now we get 404 and 502 errors and I'm thinking of adding some GitHub action to automate the deployment process with npm run build and all. Ideally, every time we push to GitHub, the app on the server should update without someone having to tunnel in and type something manually. Can anyone suggest a ready-made YAML file for that purpose? How would we trigger it on our Ubuntu server? Would we run it under nginx (like now) or apache?
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 using create-react app. In order to view the project in the browser locally:
In the command line, in the application directory I type the command npm start
In the browser I type http://localhost:3000/ for the URL on the same computer (Or other port I specify).
I'd like to be able to access the project from browsers on other computers as well. This is for the purpose of QA. How can I set it? Is there a way to set it in the package.json file, and without npm eject?
You can establish Public Connection using ngrok. When you run ngrok you instantly get a public address to your local development machine.
You share generated public Ngrok link (viz. http://92832de0.ngrok.io) with other users. They connect to Ngrok and this connection between their pc and Ngrok is referred to as Public Connection
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.